React Cheat Sheet
Page 1/2
1. Basics of React
• Component: A reusable piece of UI.
jsx
Copy
function MyComponent() {
return <div>Hello, World!</div>;
}
• JSX: JavaScript XML (HTML-like syntax in JavaScript).
jsx
Copy
const element = <h1>Hello, React!</h1>;
• Rendering: Use ReactDOM.render() to render a component.
jsx
Copy
ReactDOM.render(<MyComponent />, document.getElementById('root'));
• Props: Pass data to components.
jsx
Copy
function Greet(props) {
return <h1>Hello, {props.name}</h1>;
}
<Greet name="John" />;
• State: Manage dynamic data in components.
jsx
Copy
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
• Event Handling: Attach events to elements.
jsx
Copy
function handleClick() {
alert('Button clicked!');
}
<button onClick={handleClick}>Click Me</button>;
2. Component Lifecycle (Class Components)
• Mounting:
o constructor()
o render()
o componentDidMount()
• Updating:
o shouldComponentUpdate()
o render()
o componentDidUpdate()
• Unmounting:
o componentWillUnmount()
3. Hooks (Functional Components)
• useState: Manage state.
jsx
Copy
const [state, setState] = useState(initialValue);
• useEffect: Side effects (e.g., API calls).
jsx
Copy
useEffect(() => {
// Code to run on mount/update
return () => {
// Cleanup (e.g., remove event listeners)
};
}, [dependencies]);
• useContext: Access context values.
jsx
Copy
const value = useContext(MyContext);
• useRef: Reference DOM elements or persist values.
jsx
Copy
const inputRef = useRef();
<input ref={inputRef} />;
React Cheat Sheet
Page 2/2
4. Conditional Rendering
• Ternary Operator:
jsx
Copy
{isLoggedIn ? <Welcome /> : <Login />}
• Logical &&:
jsx
Copy
{isLoading && <Spinner />}
5. Lists and Keys
• Rendering Lists:
jsx
Copy
const numbers = [1, 2, 3];
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
• Keys: Unique identifiers for list items.
jsx
Copy
<li key={item.id}>{item.name}</li>
6. Forms
• Controlled Components:
jsx
Copy
function MyForm() {
const [value, setValue] = useState('');
return (
<form>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</form>
);
}
7. React Router (for Navigation)
• Install:
bash
Copy
npm install react-router-dom
• Basic Setup:
jsx
Copy
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/about" component={About} />
<Route path="/" component={Home} />
</Switch>
</Router>
);
}
8. Context API
• Create Context:
jsx
Copy
const MyContext = React.createContext(defaultValue);
• Provide Context:
jsx
Copy
<MyContext.Provider value={/* some value */}>
<ChildComponent />
</MyContext.Provider>
• Consume Context:
jsx
Copy
const value = useContext(MyContext);
9. Redux (State Management)
• Install:
bash
Copy
npm install redux react-redux
• Create Store:
jsx
Copy
import { createStore } from 'redux';
const store = createStore(reducer);
• Connect to React:
jsx
Copy
import { Provider } from 'react-redux';
<Provider store={store}>
<App />
</Provider>
