ReactJS Cheatsheet — The Complete Developer Reference

ReactJS is one of the most powerful JavaScript libraries for building dynamic, high-performance user interfaces. Created by Facebook, it revolutionized frontend development by introducing a component-based architecture and virtual DOM.

This ReactJS Cheatsheet is designed to give developers a quick, structured, and easy-to-understand reference for all key features, including JSX, Components, Props, State, Hooks, and Routing.

What is ReactJS?

ReactJS is an open-source JavaScript library used to build interactive UIs for single-page and complex web applications. It allows developers to manage views efficiently by breaking the UI into reusable components.

✅ Key Features of ReactJS:

• Component-based architecture
• Virtual DOM for performance optimization
• Unidirectional data flow
• Support for JSX (JavaScript XML)
• Powerful hooks for managing state and side effects

ReactJS Basic Syntax

Creating Your First React Component

import React from 'react';

function Welcome() {
  return <h1>Hello, World!</h1>;
}

export default Welcome;

Render in index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

ReactDOM.render(<Welcome />, document.getElementById('root'));

ReactJS JSX Syntax Explained

JSX allows you to write HTML-like syntax directly in JavaScript.

const element = <h2>React is Amazing!</h2>;

You can embed JavaScript expressions using {}:

const user = "Alice";
return <h3>Welcome, {user}!</h3>;

React Components — Functional and Class

Functional Component:

function Greeting() {
  return <h2>Hello React Functional Component!</h2>;
}

Class Component:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h2>Hello React Class Component!</h2>;
  }
}

React Props (Passing Data Between Components)

Props are used to pass data from a parent component to a child component.

function Welcome(props) {
  return <h3>Welcome, {props.name}</h3>;
}

function App() {
  return <Welcome name="John Doe" />;
}

React State (useState Hook)

State is used to manage dynamic data that can change during the app lifecycle.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

React useEffect Hook (Side Effects)

The useEffect() hook lets you handle side effects, such as fetching data or updating the DOM.

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data.length} posts fetched</div>;
}

React Event Handling

function ClickButton() {
  const handleClick = () => alert("Button Clicked!");
  return <button onClick={handleClick}>Click Me</button>;
}

React Conditional Rendering

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>;
}

React Lists and Keys

function NameList() {
  const names = ["Alice", "Bob", "Charlie"];
  return (
    <ul>
      {names.map((name, index) => <li key={index}>{name}</li>)}
    </ul>
  );
}

React Forms and Controlled Components

function FormExample() {
  const [value, setValue] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

React Router Cheatsheet

Install:

npm install react-router-dom

Example:

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

React Lifecycle Methods (Class Components)

reactjs cheatsheet, react hooks reference, react components guide, react state management, jsx syntax, react lifecycle methods, react router, react functional components, react useEffect example, react useState tutorial

React Context API

Used for state management without prop drilling.

const UserContext = React.createContext();

function App() {
  return (
    <UserContext.Provider value="John">
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = React.useContext(UserContext);
  return <h2>User: {user}</h2>;
}

React Performance Optimization Tips

• Use React.memo() to prevent unnecessary re-renders.
• Apply key props properly in lists.
• Lazy load components using React.lazy and Suspense.
• Keep components small and focused.
• Use PureComponent for class components.

Popular React Developer Tools

FAQ — ReactJS Cheatsheet

Q1: What is ReactJS used for?
React is used to build fast, reusable, and dynamic user interfaces for web and mobile apps.

Q2: Is ReactJS a library or framework?
ReactJS is a library, not a full-fledged framework like Angular.

Q3: What are hooks in React?
Hooks like useState and useEffect let you manage state and side effects in functional components.

Q4: How does React improve performance?
React uses a Virtual DOM to minimize direct DOM manipulation and re-rendering.

Q5: Can React work with backend technologies like PHP or Node.js?
Yes, React can easily integrate with APIs built in PHP, Node.js, or Python.