The React manual covers various core APIs, Hooks, component lifecycle methods, and more.
The following is a complete React reference manual, covering all core concepts from basic to advanced (based on React 18+ modern practices, prioritizing function components + Hooks), each table contains **Concept/Syntax**, **Description**, **Example Code** and **Notes**.
### 1. JSX Basics
| Concept/Syntax | Description | Example Code | Notes |
| --- | --- | --- | --- |
| JSX Basic Structure | HTML-like syntax, compiled to `React.createElement` | `return
Hello
;` | Must have a single root element, can use `{name.toUpperCase()}` | Supports calculations, variables, ternary, etc. |
| Attribute Binding | class → className, for → htmlFor | `
` | Use camelCase (e.g., `tabIndex`) |
| Self-closing Tags | All tags must be closed | `` | Tags without children must be self-closing |
| Conditional Rendering | Ternary operator or `&&` | `{isLogin ? : }` `{count > 0 && {count}}` | `&&` is used for "render if exists" |
| List Rendering | Use `map()`, must add `key` | `{items.map(item =>
{item.name}
)}` | key must be unique and stable, avoid using index |
| Comments | Use `{/* */}` | `{/* This is a comment */}` | Placed inside JSX |
| Fragment | Empty tag, avoids extra DOM | `
1
2
` | Short syntax `Hello
; }` | Modern choice, no this |
| Class Component (Legacy) | Use `class` extending `React.Component` | `class App extends React.Component { render() { return ; } }` | Only for understanding legacy code |
| Props Passing | One-way data flow, from parent to child | `` Child component: `function Child({name}) {...}` | Read-only, cannot be modified |
| Default Props | `defaultProps` (use parameter default values for function components) | `function Child({name = 'Guest'}) {...}` | ES6 default parameters are simpler |
| Props Type Checking | PropTypes (or TypeScript) | `Child.propTypes = { name: PropTypes.string.isRequired }` | Warning in development mode, removed in production |
| Component Composition | Nesting, children | `
Title
` Parent: `{props.children}` | children is a special Prop |
### 3. State and Hooks (Core)
| Hook / Concept | Description | Example Code | Notes |
| --- | --- | --- | --- |
| useState | Declare state variable | `const [count, setCount] = useState(0);` `
YouTip
` | Tags without children must be self-closing |
| Conditional Rendering | Ternary operator or `&&` | `{isLogin ? : }`