Scribd
Upload
34 views

React Cheat Sheet

The React Cheat Sheet provides a concise overview of key concepts in React, including components, JSX, props, state, event handling, and lifecycle methods. It also covers hooks, conditional rendering, lists and keys, forms, React Router for navigation, the Context API, and Redux for state management. Each section includes code examples to illustrate the concepts effectively.

Uploaded by

mrbanala.m51
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

React Cheat Sheet

The React Cheat Sheet provides a concise overview of key concepts in React, including components, JSX, props, state, event handling, and lifecycle methods. It also covers hooks, conditional rendering, lists and keys, forms, React Router for navigation, the Context API, and Redux for state management. Each section includes code examples to illustrate the concepts effectively.

Uploaded by

mrbanala.m51
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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>

You might also like