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

FeatureStateProps
DefinitionInternal data storageExternal data passed to component
MutabilityMutableImmutable
UsageFor dynamic behaviorFor passing static information

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!

Did you find this article valuable?

Support Rudraksh.tech by becoming a sponsor. Any amount is appreciated!

Â