React.js Cheatsheet for Beginners to Experts

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:

1. Functional Components: Preferred for simplicity and using hooks.

2. 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

---

8. Component Lifecycle

Lifecycle methods allow class components to run code at specific times during a component’s lifecycle.

Phases:

1. Mounting: Component is created and inserted into the DOM.

   • constructor()

   • componentDidMount()

2. Updating: Component is re-rendered due to state or prop changes.

   • componentDidUpdate()

3. 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!