Table of contents
- 1. Introduction to React
- 2. React Installation
- 3. JSX (JavaScript XML)
- 4. Components
- 5. State
- 6. Props
- 7. State vs Props
- 8. Component Lifecycle
- 9. Handling Events
- 10. Conditional Rendering
- 11. Lists and Keys
- 12. Refs
- 13. React Router
- 14. Hooks
- 15. React Context
- 16. Higher-Order Components (HOC)
- 17. Code Splitting
- 18. Redux
- 19. React Bootstrap
- 20. React with Tailwind CSS
- 21. Unit Testing in React
- 22. Common Utility Libraries
- Final Tips
This enhanced cheatsheet provides a detailed, step-by-step overview of React.js concepts. Whether you're a beginner or aiming to become an expert, this guide will help you understand React in depth and develop dynamic web applications with ease.
1. Introduction to React
React is a popular JavaScript library developed by Facebook for building user interfaces, particularly single-page applications (SPAs). It follows a component-based architecture, allowing developers to build encapsulated components that manage their own state.
Why Use React?
Reusable Components: Write once, use anywhere.
Virtual DOM: Optimizes updates by comparing differences with the actual DOM, leading to faster UI rendering.
Unidirectional Data Flow: Makes the code predictable and easier to debug.
Ecosystem Support: Rich ecosystem with tools like Redux, React Router, and a huge developer community.
2. React Installation
You can start a React project using create-react-app
, which sets up everything you need.
Steps to Install:
npx create-react-app my-app
cd my-app
npm start
This command scaffolds a React project with pre-configured Webpack, Babel, and ESLint, giving you a ready-to-use environment.
Manual Setup:
If you prefer more control, manually set up a project by installing React and ReactDOM:
npm install react react-dom
Then, configure Babel and Webpack for JSX compilation and module bundling.
3. JSX (JavaScript XML)
JSX is a syntax extension for JavaScript that allows writing HTML-like code within JavaScript. React components return JSX to describe the UI.
Example:
function App() {
return <h1>Hello, World!</h1>;
}
Why JSX?
Readability: Makes it easier to visualize the component structure.
Integration: Embeds HTML and JavaScript in one file.
Pre-compiled: Babel converts JSX to standard JavaScript using
React.createElement()
.
4. Components
Components are independent, reusable pieces of UI. React encourages breaking the UI into small, manageable pieces.
Types of Components:
Functional Components: Preferred for simplicity and using hooks.
Class Components: Older approach, includes lifecycle methods.
Functional Component Example:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
Class Component Example:
class Welcome extends React.Component {
render() {
return <h1>Welcome to React!</h1>;
}
}
Why Components?
Promotes reusability and modularity.
Makes testing and maintenance easier.
Encourages separation of concerns.
5. State
State is a built-in object in React components that holds data or information about the component. When state changes, the component re-renders.
Example with useState
Hook:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Why State?
Allows React to create dynamic, interactive UIs.
Ensures components are re-rendered when data changes.
6. Props
Props (short for properties) are read-only attributes passed from parent to child components.
Example:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
<Greeting name="John" />
Why Props?
Enables data sharing between components.
Helps create customizable components.
7. State vs Props
Feature | State | Props |
Definition | Internal data storage | External data passed to component |
Mutability | Mutable | Immutable |
Usage | For dynamic behavior | For passing static information |
8. Component Lifecycle
Lifecycle methods allow class components to run code at specific times during a component’s lifecycle.
Phases:
Mounting: Component is created and inserted into the DOM.
constructor()
componentDidMount()
Updating: Component is re-rendered due to state or prop changes.
componentDidUpdate()
Unmounting: Component is removed from the DOM.
componentWillUnmount()
In functional components, use the useEffect
hook to handle lifecycle events:
useEffect(() => {
console.log('Component mounted');
return () => console.log('Component unmounted');
}, []);
9. Handling Events
React events are similar to DOM events but follow camelCase naming.
Example:
function handleClick() {
alert('Button clicked');
}
<button onClick={handleClick}>Click Me</button>
Why React Events?
Ensures cross-browser compatibility.
Allows passing functions directly as event handlers.
10. Conditional Rendering
Conditionally render components based on certain conditions.
Example:
function Greeting({ isLoggedIn }) {
return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}
Why Conditional Rendering?
- Dynamically display content based on state or props.
11. Lists and Keys
Rendering lists efficiently in React requires using keys, which uniquely identify list items.
Example:
const items = ['Apple', 'Banana', 'Cherry'];
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
Why Keys?
Helps React identify changes, additions, or removals in a list.
Improves rendering performance.
12. Refs
Refs provide a way to directly access a DOM element or an instance of a component.
Example:
const inputRef = useRef(null);
function focusInput() {
inputRef.current.focus();
}
<input ref={inputRef} />
<button onClick={focusInput}>Focus Input</button>
Why Refs?
Useful for managing focus, text selection, and media playback.
Bypasses the typical data flow.
13. React Router
React Router is a standard library for routing in React applications.
Example:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
Why React Router?
Enables client-side routing.
Helps build single-page applications.
14. Hooks
Hooks allow functional components to manage state and lifecycle events without converting to class components.
Common Hooks:
useState
– For managing local state.useEffect
– For side effects and lifecycle events.useContext
– For consuming context.useRef
– For accessing DOM elements or persisting values.
15. React Context
Context provides a way to pass data through the component tree without prop drilling.
Example:
const MyContext = React.createContext();
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
Why Context?
- Simplifies state sharing across deeply nested components.
16. Higher-Order Components (HOC)
HOCs are functions that take a component and return a new component with additional props or behavior.
Example:
function withLogger(WrappedComponent) {
return function EnhancedComponent(props) {
console.log('Props:', props);
return <WrappedComponent {...props} />;
};
}
Why HOCs?
Promotes code reuse.
Enhances components with additional behavior.
17. Code Splitting
Code splitting improves performance by loading components only when needed.
Example:
const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
Why Code Splitting?
Reduces initial load time.
Improves user experience.
18. Redux
Redux is a state management library that helps manage global state.
Example:
import { createStore } from 'redux';
const store = createStore(reducer);
Why Redux?
Centralized global state management.
Simplifies state synchronization across components.
19. React Bootstrap
React Bootstrap offers pre-styled components for faster UI development.
Example:
import { Button } from 'react-bootstrap';
<Button variant="primary">Click Me</Button>
Why React Bootstrap?
Provides responsive design.
Reduces custom CSS writing.
20. React with Tailwind CSS
Tailwind CSS is a utility-first CSS framework that enables quick and consistent styling.
Example:
function StyledComponent() {
return <div className="p-4 bg-blue-500 text-white">Hello!</div>;
}
Why Tailwind CSS?
Offers predefined utility classes.
Eliminates CSS file clutter.
21. Unit Testing in React
Unit testing ensures that individual components work as expected.
Example:
import { render, screen } from '@testing-library/react';
render(<Component />);
expect(screen.getByText('Hello')).toBeInTheDocument();
Why Unit Testing?
Ensures reliability of components.
Helps in catching bugs early.
22. Common Utility Libraries
Axios: Simplifies HTTP requests.
React Icons: Provides popular icons.
React Helmet: Manages the document head.
React Paginate: Simplifies pagination.
Final Tips
Practice regularly.
Read official documentation.
Build real-world projects to reinforce learning.
With this detailed cheatsheet, you have all the essential information to become a React.js expert. Keep experimenting, and happy coding!