This website requires JavaScript.
⚡️ CLI & Project Setup
npx create-react-app my-app
npm start
npm run build
npm test
🧩 Component
import React from 'react';

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

// or arrow function
const Hello = ({ name }) => <h1>Hello, {name}!</h1>;
🔄 State & Effect
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
📦 Props
function Welcome({ name }) {
  return <div>Welcome, {name}</div>;
}

<Welcome name="Alice" />
🏗️ List & Keys
const items = ['A', 'B', 'C'];
<ul>
  {items.map((item, idx) => (
    <li key={idx}>{item}</li>
  ))}
</ul>
🛡️ Conditional Rendering
{isLoggedIn ? <Dashboard /> : <Login />}
🧪 Event Handling
<button onClick={() => alert('Clicked!')}>Click Me</button>
🗂️ Form Handling
function Form() {
  const [value, setValue] = useState('');
  return (
    <form onSubmit={e => { e.preventDefault(); alert(value); }}>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}
🎨 Styling
// Inline style
<div style={{ color: 'red' }}>Red Text</div>

// CSS Modules
import styles from './App.module.css';
<div className={styles.header}>Header</div>
🚦 Routing (react-router)
npm i react-router-dom

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

<BrowserRouter>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>
🛠️ Misc
// Fragment
<>
  <h1>Title</h1>
  <p>Paragraph</p>
</>

// Ref
import { useRef } from 'react';
const inputRef = useRef();
<input ref={inputRef} />
Suggest improve•Raise issue
Nuxt
Redis