Technical reference

React Cheatsheet

Programming | css

Getting Started

Hello World Component

Basic functional component in React.

import React from 'react';

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

export default App;

JSX Syntax

JSX lets you write HTML inside JavaScript.

const element = <h1 className="title">Welcome</h1>;

Props & State

Passing Props

Props are passed from parent to child components.

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

useState Hook

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

useEffect Hook

Basic useEffect

import { useEffect } from 'react';

useEffect(() => {
  console.log('Component mounted');
}, []);

Effect with Cleanup

useEffect(() => {
  const id = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(id);
}, []);

Event Handling

Click Event

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

Form Submit

function Form() {
  const handleSubmit = e => {
    e.preventDefault();
    alert('Form submitted');
  };
  return <form onSubmit={handleSubmit}><button type="submit">Submit</button></form>;
}

Conditional Rendering

Ternary Operator

const isLoggedIn = true;
return <div>{isLoggedIn ? 'Welcome!' : 'Please sign in'}</div>;

Logical AND

const messages = [];
return <div>{messages.length > 0 && 'You have messages'}</div>;

Lists & Keys

Rendering Lists

const items = ['a', 'b', 'c'];
return <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;

Custom Components & Props

Reusable Button

function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

useRef Hook

Accessing DOM Elements

import { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef();
  useEffect(() => inputRef.current.focus(), []);
  return <input ref={inputRef} />;
}

React Router (v6+)

Basic Routing

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Context API

Create & Use Context

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Consume Context

const theme = useContext(ThemeContext);
return <div>Theme is {theme}</div>;