React.js is a popular JavaScript library for building user interfaces, particularly single-page applications where you need a fast response to user interactions. Whether you’re new to React or looking to sharpen your skills, this cheat sheet will help you get the most out of your React development.
Essential React Concepts
Components
Functional Components:
These are simpler components defined by functions that return JSX. They do not manage state or lifecycle methods on their own.
return <h1>Hello, {props.name}</h1>;
}
Class Components:
These components are more complex and can manage state and lifecycle methods.
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Props and State
Props:
Props (short for properties) are how you pass data from a parent component to a child component. They are read-only within the child.
return <h1>Welcome, {props.name}!</h1>;
}
// Usage in a parent component
function App() {
return <Greeting name=“Alice“ />;
}
State:
State is used for data that changes over time within a component. It is local and fully controlled by the component.
constructor(props) {
super(props);
this.state = { count: 0 };
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}
Lifecycle Methods (Class Components)
Lifecycle methods are used in class components to perform actions at different points in a component’s lifecycle:
componentDidMount: Called after the component is mounted to the DOM.
componentDidUpdate: Called after the component’s updates are flushed to the DOM.
componentWillUnmount: Called right before the component is removed from the DOM.
componentDidMount() {
console.log(‘Component did mount!‘);
}
componentDidUpdate() {
console.log(‘Component did update!‘);
}
componentWillUnmount() {
console.log(‘Component will unmount!‘);
}
render() {
return <div>Check the console for lifecycle logs!</div>;
}
}
React Hooks
Hooks allow functional components to manage state and side effects.
useState:
Allows functional components to have state.
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect:
Handles side effects in functional components.
document.title = `You clicked ${count} times`;
});
Best Practices
Composition vs Inheritance: Prefer composition over inheritance to reuse code between components.
Lifting State Up: Often, several components need to reflect the same changing data. Lift the shared state up to their closest common ancestor.
Immutable Data: Treat state as if it were immutable. Never modify this.state directly, instead use setState.
Functional Updates: If the next state depends on the previous state, pass a function to setState, rather than an object.
Conclusion
This React cheat sheet should serve as a quick reference to the most critical concepts and best practices of React development. Whether you are building a small widget or a large-scale application, these principles will help guide your project to success.
