npm-react

1
# Components and Elements
2

3
Core component classes and element creation functions for building React applications. This includes base classes for creating stateful and stateless components, as well as functions for creating and manipulating React elements.
4

5
## Capabilities
6

7
### Component Class
8

9
Base class for React components with state and lifecycle methods.
10

11
```typescript { .api }
12
/**
13
 * Base class for React components
14
 */
15
class Component<P = {}, S = {}> {
16
  constructor(props: P, context?: any);
17
  
18
  /**
19
   * Updates component state and triggers re-render
20
   * @param state - Partial state update or function returning state update
21
   * @param callback - Optional callback executed after state update
22
   */
23
  setState<K extends keyof S>(
24
    state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
25
    callback?: () => void
26
  ): void;
27
  
28
  /**
29
   * Forces component to re-render immediately
30
   * @param callback - Optional callback executed after re-render
31
   */
32
  forceUpdate(callback?: () => void): void;
33
  
34
  /**
35
   * Renders the component's UI
36
   * @returns React node representing the component's UI
37
   */
38
  render(): React.ReactNode;
39
  
40
  readonly props: Readonly<P>;
41
  state: Readonly<S>;
42
  context: any;
43
  refs: { [key: string]: React.ReactInstance };
44
}
45
```
46

47
**Usage Examples:**
48

49
```typescript
50
import React, { Component } from "react";
51

52
interface Props {
53
  initialCount: number;
54
}
55

56
interface State {
57
  count: number;
58
}
59

60
class Counter extends Component<Props, State> {
61
  constructor(props: Props) {
62
    super(props);
63
    this.state = { count: props.initialCount };
64
  }
65

66
  increment = () => {
67
    this.setState({ count: this.state.count + 1 });
68
  };
69

70
  render() {
71
    return (
72
      <div>
73
        <p>Count: {this.state.count}</p>
74
        <button onClick={this.increment}>Increment</button>
75
      </div>
76
    );
77
  }
78
}
79
```
80

81
### PureComponent Class
82

83
Component class with built-in shallow comparison for props and state to prevent unnecessary re-renders.
84

85
```typescript { .api }
86
/**
87
 * Component with automatic shallow comparison optimization
88
 * Only re-renders when props or state change shallowly
89
 */
90
class PureComponent<P = {}, S = {}> extends Component<P, S> {}
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import React, { PureComponent } from "react";
97

98
interface Props {
99
  name: string;
100
  age: number;
101
}
102

103
class UserCard extends PureComponent<Props> {
104
  render() {
105
    return (
106
      <div>
107
        <h3>{this.props.name}</h3>
108
        <p>Age: {this.props.age}</p>
109
      </div>
110
    );
111
  }
112
}
113
```
114

115
### Fragment
116

117
Wrapper component that groups multiple elements without adding extra DOM nodes.
118

119
```typescript { .api }
120
/**
121
 * Groups multiple children without creating DOM wrapper
122
 */
123
const Fragment: React.ExoticComponent<{ children?: React.ReactNode }>;
124
```
125

126
**Usage Examples:**
127

128
```typescript
129
import React, { Fragment } from "react";
130

131
function UserInfo() {
132
  return (
133
    <Fragment>
134
      <h1>User Profile</h1>
135
      <p>Welcome back!</p>
136
    </Fragment>
137
  );
138
}
139

140
// Short syntax
141
function UserInfoShort() {
142
  return (
143
    <>
144
      <h1>User Profile</h1>
145
      <p>Welcome back!</p>
146
    </>
147
  );
148
}
149
```
150

151
### StrictMode
152

153
Development tool that helps identify potential problems in React applications.
154

155
```typescript { .api }
156
/**
157
 * Development mode helper for highlighting potential problems
158
 * Activates additional checks and warnings for descendants
159
 */
160
const StrictMode: React.ExoticComponent<{ children?: React.ReactNode }>;
161
```
162

163
**Usage Examples:**
164

165
```typescript
166
import React, { StrictMode } from "react";
167

168
function App() {
169
  return (
170
    <StrictMode>
171
      <Header />
172
      <Main />
173
      <Footer />
174
    </StrictMode>
175
  );
176
}
177
```
178

179
### Profiler
180

181
Component for measuring performance of React component trees.
182

183
```typescript { .api }
184
/**
185
 * Measures rendering performance of its descendants
186
 */
187
interface ProfilerProps {
188
  id: string;
189
  onRender: (
190
    id: string,
191
    phase: "mount" | "update",
192
    actualDuration: number,
193
    baseDuration: number,
194
    startTime: number,
195
    commitTime: number,
196
    interactions: Set<any>
197
  ) => void;
198
  children?: React.ReactNode;
199
}
200

201
const Profiler: React.ExoticComponent<ProfilerProps>;
202
```
203

204
### createElement
205

206
Creates React elements programmatically without JSX.
207

208
```typescript { .api }
209
/**
210
 * Creates a React element
211
 * @param type - Element type (string for DOM elements, component for custom components)
212
 * @param props - Element properties
213
 * @param children - Child elements
214
 * @returns React element
215
 */
216
function createElement<P extends {}>(
217
  type: string | React.ComponentType<P>,
218
  props?: (P & React.Attributes) | null,
219
  ...children: React.ReactNode[]
220
): React.ReactElement<P>;
221
```
222

223
**Usage Examples:**
224

225
```typescript
226
import React, { createElement } from "react";
227

228
// Create DOM element
229
const heading = createElement("h1", { className: "title" }, "Hello World");
230

231
// Create component element
232
const button = createElement(
233
  "button",
234
  { onClick: () => console.log("clicked") },
235
  "Click Me"
236
);
237

238
// Create custom component element
239
function Welcome(props: { name: string }) {
240
  return createElement("h1", null, `Hello, ${props.name}!`);
241
}
242

243
const welcome = createElement(Welcome, { name: "Alice" });
244
```
245

246
### cloneElement
247

248
Clones and returns a new React element using the original element as the starting point.
249

250
```typescript { .api }
251
/**
252
 * Clones a React element with new props
253
 * @param element - Element to clone
254
 * @param props - Additional or replacement props
255
 * @param children - New children (replaces existing children)
256
 * @returns Cloned React element
257
 */
258
function cloneElement<P>(
259
  element: React.ReactElement<P>,
260
  props?: Partial<P> & React.Attributes,
261
  ...children: React.ReactNode[]
262
): React.ReactElement<P>;
263
```
264

265
**Usage Examples:**
266

267
```typescript
268
import React, { cloneElement } from "react";
269

270
function Button(props: { className?: string; onClick?: () => void; children: React.ReactNode }) {
271
  return <button {...props}>{props.children}</button>;
272
}
273

274
function App() {
275
  const originalButton = <Button onClick={() => alert("clicked")}>Original</Button>;
276
  
277
  // Clone with additional props
278
  const clonedButton = cloneElement(originalButton, {
279
    className: "primary",
280
    children: "Cloned Button"
281
  });
282
  
283
  return (
284
    <div>
285
      {originalButton}
286
      {clonedButton}
287
    </div>
288
  );
289
}
290
```
291

292
### isValidElement
293

294
Verifies whether an object is a valid React element.
295

296
```typescript { .api }
297
/**
298
 * Checks if object is a valid React element
299
 * @param object - Object to test
300
 * @returns True if object is a React element
301
 */
302
function isValidElement(object: any): object is React.ReactElement;
303
```
304

305
**Usage Examples:**
306

307
```typescript
308
import React, { isValidElement } from "react";
309

310
function renderContent(content: unknown) {
311
  if (isValidElement(content)) {
312
    return content;
313
  }
314
  
315
  if (typeof content === "string") {
316
    return <span>{content}</span>;
317
  }
318
  
319
  return <span>Invalid content</span>;
320
}
321

322
// Usage
323
const element = <div>Hello</div>;
324
const text = "Hello";
325

326
console.log(isValidElement(element)); // true
327
console.log(isValidElement(text)); // false
328
```
329

330
## Types
331

332
### Component-Related Types
333

334
```typescript { .api }
335
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
336

337
interface ComponentClass<P = {}, S = ComponentState> {
338
  new (props: P, context?: any): Component<P, S>;
339
  propTypes?: WeakValidationMap<P>;
340
  contextTypes?: ValidationMap<any>;
341
  childContextTypes?: ValidationMap<any>;
342
  defaultProps?: Partial<P>;
343
  displayName?: string;
344
}
345

346
interface FunctionComponent<P = {}> {
347
  (props: P, context?: any): ReactElement<any, any> | null;
348
  propTypes?: WeakValidationMap<P>;
349
  contextTypes?: ValidationMap<any>;
350
  defaultProps?: Partial<P>;
351
  displayName?: string;
352
}
353

354
interface ReactElement<P = any, T = string | JSXElementConstructor<any>> {
355
  type: T;
356
  props: P;
357
  key: Key | null;
358
  ref: any;
359
}
360

361
type ReactNode = ReactElement | string | number | boolean | null | undefined | ReactNode[];
362

363
type Key = string | number;
364

365
interface Attributes {
366
  key?: Key | null;
367
}
368

369
interface ClassAttributes<T> extends Attributes {
370
  ref?: Ref<T>;
371
}
372
```