| Create React app |
npx create-react-app my-app |
Bootstrap a new React project. |
| Start dev server |
npm start |
Run development server. |
| Build project |
npm run build |
Build optimized production bundle. |
| Functional component |
const MyComp = () => <div>Hello</div>; |
Define a React functional component. |
| Class component |
class MyComp extends React.Component { render() { return <div>Hello</div>; } } |
Define a React class component. |
| useState hook |
const [state, setState] = useState(initialValue); |
Add local state to functional components. |
| useEffect hook |
useEffect(() => { /* side effect */ }, []); |
Perform side effects in functional components. |
| Props |
<Component prop1={value} /> |
Pass data to components. |
| Event handler |
<button onClick={handleClick}>Click me</button> |
Handle events. |
| JSX fragment |
<> ... </> |
Group multiple elements without extra node. |
| Conditional rendering |
{condition && <Component />} |
Render component conditionally. |
| List rendering |
{items.map(item => <li key={item.id}>{item.name}</li>)} |
Render lists dynamically. |
| React Router start |
npm install react-router-dom |
Install routing library. |