React Cheatsheet

JSX

JSX lets you write HTML-like code inside JavaScript. React uses JSX to describe what the UI should look like. Remember: you must return one root element.

const element = <h1>Hello, world!</h1>;

Components

Components are reusable pieces of UI. A component is just a function (or class) that returns JSX. Functions are the modern way to create components.

function Welcome() {
  return <h1>Hello React</h1>;
}

Props

Props are inputs to components. They make components reusable by passing data. Think of props like “arguments” to functions.

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

<Welcome name="Alice" />

State

State is data that changes over time. React’s useState hook lets components “remember” values between renders.

import { useState } from "react";

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

Events

You can handle events (like clicks or input changes) in React by attaching functions. Use camelCase (e.g., onClick).

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

Conditional Rendering

Use conditions to show different UI. You can use if/else or the&& operator.

{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in</p>}

Lists & Keys

Use map() to render lists. Always give each element a unique key for better performance.

const items = ["A", "B", "C"];
<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

useEffect

The useEffect hook runs side effects like fetching data or updating the document title.

import { useEffect } from "react";

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

Context API

Context lets you share data across components without passing props manually at every level.

const UserContext = React.createContext();

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

function Profile() {
  const user = React.useContext(UserContext);
  return <h1>Hello {user}</h1>;
}

useRef

useRef stores a mutable value that persists between renders. Often used to access DOM elements directly.

const inputRef = useRef();

<input ref={inputRef} />

How to use this page

1. Start with JSX and learn how to build components.
2. Understand props and state to manage data flow.
3. Practice handling events and conditional rendering.
4. Explore hooks like useState and useEffect.
5. Use Context to share data across components.