npm-react

1
# React
2

3
React is a JavaScript library for building user interfaces with a declarative, component-based approach. It enables developers to create interactive UIs by designing simple views for each application state, with React efficiently updating and rendering only the necessary components when data changes.
4

5
## Package Information
6

7
- **Package Name**: react
8
- **Package Type**: npm
9
- **Language**: JavaScript/TypeScript
10
- **Installation**: `npm install react`
11

12
## Core Imports
13

14
```typescript
15
import React from "react";
16
import { useState, useEffect, Component } from "react";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const React = require("react");
23
const { useState, useEffect, Component } = require("react");
24
```
25

26
### JSX Runtime Imports
27

28
```typescript
29
// Automatic JSX runtime (React 17+)
30
// These are imported automatically by bundlers:
31
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
32

33
// Development JSX runtime
34
import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
35

36
// Manual JSX import (legacy)
37
import React from "react";
38
```
39

40
## Basic Usage
41

42
```typescript
43
import React, { useState } from "react";
44

45
// Function component with hooks
46
function Counter() {
47
  const [count, setCount] = useState(0);
48

49
  return (
50
    <div>
51
      <p>Count: {count}</p>
52
      <button onClick={() => setCount(count + 1)}>
53
        Increment
54
      </button>
55
    </div>
56
  );
57
}
58

59
// Class component
60
class Welcome extends React.Component {
61
  render() {
62
    return <h1>Hello, {this.props.name}!</h1>;
63
  }
64
}
65

66
// Creating elements
67
const element = React.createElement("h1", null, "Hello, world!");
68
```
69

70
## Architecture
71

72
React is built around several key concepts:
73

74
- **Components**: Reusable UI pieces that accept props and return JSX elements
75
- **JSX**: Syntax extension for JavaScript that allows writing HTML-like code in components
76
- **Hooks**: Functions that let you use state and other React features in function components
77
- **Virtual DOM**: React's internal representation of the UI for efficient updates
78
- **Reconciliation**: The process by which React updates the DOM to match the virtual DOM
79
- **Context**: A way to pass data through the component tree without prop drilling
80

81
## Capabilities
82

83
### Components and Elements
84

85
Core component classes and element creation functions for building React applications.
86

87
```typescript { .api }
88
class Component<P = {}, S = {}> {
89
  constructor(props: P);
90
  setState<K extends keyof S>(
91
    state: ((prevState: S, props: P) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
92
    callback?: () => void
93
  ): void;
94
  forceUpdate(callback?: () => void): void;
95
  render(): React.ReactNode;
96
}
97

98
class PureComponent<P = {}, S = {}> extends Component<P, S> {}
99

100
function createElement<P extends {}>(
101
  type: string | React.ComponentType<P>,
102
  props?: P | null,
103
  ...children: React.ReactNode[]
104
): React.ReactElement<P>;
105
```
106

107
[Components and Elements](./components.md)
108

109
### Hooks
110

111
React Hooks for state management, side effects, and component lifecycle in function components.
112

113
```typescript { .api }
114
function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
115

116
function useEffect(
117
  effect: React.EffectCallback,
118
  deps?: React.DependencyList
119
): void;
120

121
function useContext<T>(context: React.Context<T>): T;
122

123
function useReducer<R extends React.Reducer<any, any>>(
124
  reducer: R,
125
  initialState: React.ReducerState<R>,
126
  initializer?: undefined
127
): [React.ReducerState<R>, React.Dispatch<React.ReducerAction<R>>];
128

129
function useSyncExternalStore<Snapshot>(
130
  subscribe: (onStoreChange: () => void) => () => void,
131
  getSnapshot: () => Snapshot,
132
  getServerSnapshot?: () => Snapshot
133
): Snapshot;
134

135
function use<T>(usable: Promise<T> | React.Context<T>): T;
136

137
function experimental_useEffectEvent<Args extends any[], Return>(
138
  callback: (...args: Args) => Return
139
): (...args: Args) => Return;
140
```
141

142
[Hooks](./hooks.md)
143

144
### Context API
145

146
React Context for sharing values between components without explicit prop passing.
147

148
```typescript { .api }
149
function createContext<T>(defaultValue: T): React.Context<T>;
150

151
interface Context<T> {
152
  Provider: React.Provider<T>;
153
  Consumer: React.Consumer<T>;
154
  displayName?: string;
155
}
156

157
interface Provider<T> {
158
  value: T;
159
  children?: React.ReactNode;
160
}
161
```
162

163
[Context API](./context.md)
164

165
### Refs and Forward Refs
166

167
Reference system for accessing DOM nodes and component instances.
168

169
```typescript { .api }
170
function createRef<T = any>(): React.RefObject<T>;
171

172
function useRef<T = undefined>(): React.MutableRefObject<T | undefined>;
173
function useRef<T = undefined>(initialValue: T): React.MutableRefObject<T>;
174

175
function forwardRef<T, P = {}>(
176
  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
177
): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
178

179
interface RefObject<T> {
180
  readonly current: T | null;
181
}
182

183
interface MutableRefObject<T> {
184
  current: T;
185
}
186
```
187

188
[Refs and Forward Refs](./refs.md)
189

190
### Performance Optimization
191

192
Tools for optimizing React application performance through memoization and lazy loading.
193

194
```typescript { .api }
195
function memo<P extends object>(
196
  Component: React.FunctionComponent<P>,
197
  propsAreEqual?: (prevProps: P, nextProps: P) => boolean
198
): React.NamedExoticComponent<P>;
199

200
function useMemo<T>(factory: () => T, deps: React.DependencyList | undefined): T;
201

202
function useCallback<T extends (...args: any[]) => any>(
203
  callback: T,
204
  deps: React.DependencyList
205
): T;
206

207
function lazy<T extends React.ComponentType<any>>(
208
  factory: () => Promise<{ default: T }>
209
): React.LazyExoticComponent<T>;
210
```
211

212
[Performance Optimization](./performance.md)
213

214
### Concurrency and Transitions
215

216
Concurrent features for managing non-urgent updates and improving user experience.
217

218
```typescript { .api }
219
function useTransition(): [boolean, React.TransitionStartFunction];
220

221
function startTransition(callback: () => void): void;
222

223
function useDeferredValue<T>(value: T): T;
224
function useDeferredValue<T>(value: T, initialValue: T): T;
225

226
function useOptimistic<S, A>(
227
  state: S,
228
  updateFn: (currentState: S, optimisticValue: A) => S
229
): [S, (optimisticValue: A) => void];
230

231
// Experimental features
232
function unstable_addTransitionType(type: string): void;
233
function unstable_getCacheForType<T>(resourceType: () => T): T;
234
function unstable_useCacheRefresh(): <T>(?() => T, ?T) => void;
235
function unstable_useSwipeTransition<T>(
236
  gesture: StartGesture<T>
237
): [boolean, (callback: () => void, options?: { gesture: T }) => void];
238
```
239

240
[Concurrency and Transitions](./concurrency.md)
241

242
### Suspense and Error Boundaries
243

244
Components and utilities for handling async loading states and errors in React applications.
245

246
```typescript { .api }
247
interface SuspenseProps {
248
  children?: React.ReactNode;
249
  fallback: React.ReactNode;
250
}
251

252
class Suspense extends React.Component<SuspenseProps> {}
253

254
class ErrorBoundary extends React.Component<
255
  { children: React.ReactNode; fallback?: React.ComponentType<any> },
256
  { hasError: boolean }
257
> {}
258

259
// Experimental components
260
const unstable_SuspenseList: React.ExoticComponent<{
261
  children: React.ReactNode;
262
  revealOrder?: "forwards" | "backwards" | "together";
263
  tail?: "collapsed" | "hidden";
264
}>;
265

266
const unstable_LegacyHidden: React.ExoticComponent<{ children?: React.ReactNode }>;
267
const unstable_Activity: React.ExoticComponent<{ children?: React.ReactNode }>;  
268
const unstable_Scope: React.ExoticComponent<{ children?: React.ReactNode }>;
269
const unstable_TracingMarker: React.ExoticComponent<{ children?: React.ReactNode }>;
270
const unstable_ViewTransition: React.ExoticComponent<{ children?: React.ReactNode }>;
271

272
// Server-side functions
273
function unstable_postpone(reason: string): void;
274
```
275

276
[Suspense and Error Boundaries](./suspense.md)
277

278
### JSX Runtime
279

280
JSX transformation functions for automatic JSX processing by bundlers and compilers.
281

282
```typescript { .api }
283
// Production JSX runtime
284
function jsx(type: any, config: any, maybeKey?: string): React.ReactElement;
285
function jsxs(type: any, config: any, maybeKey?: string): React.ReactElement;
286

287
// Development JSX runtime  
288
function jsxDEV(
289
  type: any, 
290
  config: any, 
291
  maybeKey?: string, 
292
  isStaticChildren?: boolean,
293
  source?: any,
294
  self?: any
295
): React.ReactElement;
296

297
// Fragment symbol for both runtimes
298
const Fragment: React.ExoticComponent<{ children?: React.ReactNode }>;
299
```
300

301
### Utilities
302

303
Utility functions for working with React elements and development tools.
304

305
```typescript { .api }
306
function isValidElement(object: any): object is React.ReactElement;
307

308
function cloneElement<P>(
309
  element: React.ReactElement<P>,
310
  props?: Partial<P> & React.Attributes,
311
  ...children: React.ReactNode[]
312
): React.ReactElement<P>;
313

314
const Children: {
315
  map<T, C>(
316
    children: C | readonly C[],
317
    fn: (child: C, index: number) => T
318
  ): C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
319
  forEach<C>(
320
    children: C | readonly C[],
321
    fn: (child: C, index: number) => void
322
  ): void;
323
  count(children: any): number;
324
  toArray(children: React.ReactNode | React.ReactNode[]): React.ReactElement[];
325
  only<T>(children: T): T extends any[] ? never : T;
326
};
327

328
// Server-side security functions
329
function taintUniqueValue(
330
  message: string,
331
  lifetime: any,
332
  value: any
333
): void;
334

335
function taintObjectReference(
336
  message: string, 
337
  object: any
338
): void;
339

340
// Development utilities
341
function act<T>(callback: () => T | Promise<T>): Promise<T>;
342
function captureOwnerStack(): string | null;
343
const version: string;
344
```
345

346
[Utilities](./utilities.md)
347

348
## Types
349

350
### Core Types
351

352
```typescript { .api }
353
type ReactNode = ReactElement | string | number | boolean | null | undefined | ReactNode[];
354

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

361
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
362

363
interface FunctionComponent<P = {}> {
364
  (props: P, context?: any): ReactElement<any, any> | null;
365
  propTypes?: WeakValidationMap<P>;
366
  contextTypes?: ValidationMap<any>;
367
  defaultProps?: Partial<P>;
368
  displayName?: string;
369
}
370

371
interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {
372
  new (props: P, context?: any): Component<P, S>;
373
  propTypes?: WeakValidationMap<P>;
374
  contextTypes?: ValidationMap<any>;
375
  childContextTypes?: ValidationMap<any>;
376
  defaultProps?: Partial<P>;
377
  displayName?: string;
378
}
379

380
type Key = string | number;
381

382
type Ref<T> = RefCallback<T> | RefObject<T> | null;
383

384
type RefCallback<T> = (instance: T | null) => void;
385
```