Getting Started with React

React · Reference cheat sheet

📋 Overview

React is a JavaScript library for building user interfaces from components — reusable pieces of UI that describe what should appear for a given state. You write components with JSX (HTML-like syntax in JS) and React updates the DOM efficiently.

🔧 Core concepts

Beginners usually start with Vite + React or Next.js, not CDN scripts alone.

💡 Examples

Create a Vite React app:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

A tiny component:

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

export default function App() {
  return (
    <main>
      <Hello />
    </main>
  );
}

Props:

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// <Greeting name="Ada" />

State with useState:

import { useState } from "react";

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

⚠️ Pitfalls

• JSX requires a build step (or a modern toolchain) — browsers don’t run raw JSX.
• Mutating state in place won’t re-render — use the setter (setCount).
• Component names must start with a Capital letter.
• Don’t forget to import React hooks from "react".

🔗 Related

• hello_world.md
• thinking_in_react.md
• conditional_rendering.md
• keys_lists.md