npm-react

1
# React
2

3
React is a JavaScript library for building user interfaces that emphasizes declarative programming, component-based architecture, and efficient rendering. It enables developers to create interactive UIs through composable components that manage their own state and efficiently update 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
```javascript
15
import React from 'react';
16
// Access: React.useState, React.Component, etc.
17
```
18

19
Named imports:
20

21
```javascript
22
import { useState, useEffect, Component, Fragment } from 'react';
23
```
24

25
For CommonJS:
26

27
```javascript
28
const React = require('react');
29
const { useState, useEffect, Component } = require('react');
30
```
31

32
JSX Runtime (automatic - handled by transpilers):
33

34
```javascript
35
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
36
```
37

38
## Basic Usage
39

40
```javascript
41
import React, { useState, useEffect } from 'react';
42

43
// Function component with hooks
44
function Counter() {
45
  const [count, setCount] = useState(0);
46
  
47
  useEffect(() => {
48
    document.title = `Count: ${count}`;
49
  }, [count]);
50
  
51
  return (
52
    <div>
53
      <p>You clicked {count} times</p>
54
      <button onClick={() => setCount(count + 1)}>
55
        Click me
56
      </button>
57
    </div>
58
  );
59
}
60

61
// Class component
62
class Timer extends React.Component {
63
  constructor(props) {
64
    super(props);
65
    this.state = { seconds: 0 };
66
  }
67
  
68
  componentDidMount() {
69
    this.interval = setInterval(() => {
70
      this.setState({ seconds: this.state.seconds + 1 });
71
    }, 1000);
72
  }
73
  
74
  componentWillUnmount() {
75
    clearInterval(this.interval);
76
  }
77
  
78
  render() {
79
    return <div>Seconds: {this.state.seconds}</div>;
80
  }
81
}
82
```
83

84
## Architecture
85

86
React is built around several key concepts:
87

88
- **Components**: Reusable UI building blocks that can be function or class-based
89
- **Virtual DOM**: Efficient reconciliation system that minimizes direct DOM manipulation
90
- **Unidirectional Data Flow**: Props flow down, events flow up for predictable state management
91
- **Hooks**: Functions that let you use state and lifecycle features in function components
92
- **Context**: Built-in state management system for sharing data across component trees
93
- **Concurrent Features**: Modern React includes features for handling async operations and non-urgent updates
94

95
## Capabilities
96

97
### React Hooks
98

99
Complete set of built-in hooks for state management, side effects, performance optimization, and more. Essential for modern React development with function components.
100

101
```javascript { .api }
102
// State hooks
103
function useState<S>(initialState: S | (() => S)): [S, (value: S | ((prev: S) => S)) => void];
104
function useReducer<R extends Reducer<any, any>>(reducer: R, initialState: ReducerState<R>): [ReducerState<R>, Dispatch<ReducerAction<R>>];
105

106
// Effect hooks  
107
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
108
function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
109
function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;
110

111
// Performance hooks
112
function useMemo<T>(factory: () => T, deps: DependencyList): T;
113
function useCallback<T extends Function>(callback: T, deps: DependencyList): T;
114
```
115

116
[React Hooks](./hooks.md)
117

118
### Component Classes
119

120
Base classes for creating class-based React components with lifecycle methods and state management.
121

122
```javascript { .api }
123
class Component<P = {}, S = {}, SS = any> {
124
  constructor(props: P);
125
  setState<K extends keyof S>(state: ((prevState: S, props: P) => Pick<S, K> | S | null) | Pick<S, K> | S | null, callback?: () => void): void;
126
  forceUpdate(callback?: () => void): void;
127
  render(): ReactNode;
128
}
129

130
class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {}
131
```
132

133
[Component Classes](./components.md)
134

135
### Element Creation & Manipulation
136

137
Core functions for creating and manipulating React elements, essential for JSX alternatives and dynamic element creation.
138

139
```javascript { .api }
140
function createElement<P extends {}>(type: ReactType, props?: Attributes & P | null, ...children: ReactNode[]): ReactElement<P>;
141
function cloneElement<P extends {}>(element: ReactElement<P>, props?: Partial<P> & Attributes | null, ...children: ReactNode[]): ReactElement<P>;
142
function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>;
143
```
144

145
[Element Creation](./elements.md)
146

147
### Built-in Components
148

149
Special React components for layout, performance profiling, and development features.
150

151
```javascript { .api }
152
const Fragment: ExoticComponent<{ children?: ReactNode }>;
153
const StrictMode: ExoticComponent<{ children?: ReactNode }>;
154
const Profiler: ExoticComponent<ProfilerProps>;
155
const Suspense: ExoticComponent<SuspenseProps>;
156
const SuspenseList: ExoticComponent<SuspenseListProps>;
157
```
158

159
[Built-in Components](./builtin-components.md)
160

161
### Context API
162

163
Create and consume context for sharing data across component trees without prop drilling.
164

165
```javascript { .api }
166
function createContext<T>(defaultValue: T): Context<T>;
167
function createServerContext<T>(globalName: string, defaultValue: T): ServerContext<T>;
168

169
interface Context<T> {
170
  Provider: ExoticComponent<ProviderProps<T>>;
171
  Consumer: ExoticComponent<ConsumerProps<T>>;
172
  displayName?: string;
173
}
174
```
175

176
[Context API](./context.md)
177

178
### Higher-Order Components
179

180
Utilities for enhancing components with additional functionality like memoization, ref forwarding, and lazy loading.
181

182
```javascript { .api }
183
function memo<P extends object>(Component: FunctionComponent<P>, propsAreEqual?: (prevProps: P, nextProps: P) => boolean): NamedExoticComponent<P>;
184
function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
185
function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): LazyExoticComponent<T>;
186
```
187

188
[Higher-Order Components](./hoc.md)
189

190
### Children Utilities
191

192
Utilities for working with props.children, including mapping, filtering, and validating child elements.
193

194
```javascript { .api }
195
const Children: {
196
  map<T, C>(children: C | ReadonlyArray<C>, fn: (child: C, index: number) => T): C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
197
  forEach<C>(children: C | ReadonlyArray<C>, fn: (child: C, index: number) => void): void;
198
  count(children: any): number;
199
  only<C>(children: C): C extends any[] ? never : C;
200
  toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;
201
};
202
```
203

204
[Children Utilities](./children.md)
205

206
### Concurrent Features
207

208
Modern React features for handling async operations and optimizing performance with transitions and deferred values.
209

210
```javascript { .api }
211
function startTransition(scope: () => void): void;
212
function useTransition(): [boolean, (callback: () => void) => void];
213
function useDeferredValue<T>(value: T): T;
214
```
215

216
[Concurrent Features](./concurrent.md)
217

218
### References & Utilities
219

220
Reference management and utility functions for accessing DOM elements and creating stable references.
221

222
```javascript { .api }
223
function createRef<T = any>(): RefObject<T>;
224
function useRef<T = undefined>(): MutableRefObject<T | undefined>;
225
function useImperativeHandle<T, R extends T>(ref: Ref<T> | undefined, init: () => R, deps?: DependencyList): void;
226
const version: string;
227
```
228

229
[References & Utilities](./refs.md)
230

231
### JSX Runtime
232

233
Low-level JSX transformation functions used by transpilers to convert JSX syntax into JavaScript function calls.
234

235
```javascript { .api }
236
// Production runtime
237
function jsx(type: any, props: any, key?: any): ReactElement;
238
function jsxs(type: any, props: any, key?: any): ReactElement;
239

240
// Development runtime  
241
function jsxDEV(type: any, props: any, key?: any, isStaticChildren?: boolean, source?: any, self?: any): ReactElement;
242
```
243

244
[JSX Runtime](./jsx-runtime.md)
245

246
### Experimental APIs
247

248
Experimental and unstable APIs that may change in future versions. Use with caution in production applications.
249

250
```javascript { .api }
251
// Experimental components
252
const unstable_Cache: ExoticComponent<{ children?: ReactNode }>;
253
const unstable_DebugTracingMode: ExoticComponent<{ children?: ReactNode }>;
254
const unstable_LegacyHidden: ExoticComponent<{ children?: ReactNode; mode: 'hidden' | 'unstable-defer-without-hiding' }>;
255
const unstable_Offscreen: ExoticComponent<{ children?: ReactNode; mode?: 'hidden' | 'visible' }>;
256
const unstable_Scope: ExoticComponent<{ children?: ReactNode }>;
257
const unstable_TracingMarker: ExoticComponent<{ children?: ReactNode; name: string }>;
258

259
// Experimental cache functions
260
function unstable_getCacheSignal(): AbortSignal;
261
function unstable_getCacheForType<T>(resourceType: () => T): T;
262
function unstable_useCacheRefresh(): () => void;
263
```
264

265
These experimental APIs are subject to change and should only be used for testing React's upcoming features.
266

267
## Types
268

269
```javascript { .api }
270
// Core types
271
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
272
type ReactChild = ReactElement | ReactText;
273
type ReactText = string | number;
274
type ReactFragment = {} | Iterable<ReactNode>;
275

276
// Component types
277
type FunctionComponent<P = {}> = (props: PropsWithChildren<P>, context?: any) => ReactElement<any, any> | null;
278
type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
279

280
// Element types
281
interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
282
  type: T;
283
  props: P;
284
  key: Key | null;
285
}
286

287
// Ref types
288
type Ref<T> = RefCallback<T> | RefObject<T> | null;
289
interface RefObject<T> {
290
  readonly current: T | null;
291
}
292
interface MutableRefObject<T> {
293
  current: T;
294
}
295
```