React ✦ Thuong Truong's blog

Bookmark

⚡️ 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

Want to update?

Subscribe to my blog to receive the latest updates from us.

Monthly articles

New articles will be created every month.

No spam

All notifications are notified to you, not spam or advertising.