React

React

React là thư viện JavaScript phổ biến nhất để xây dựng user interfaces.

Components

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

// Usage
<Welcome name="Phi" />;

JSX

const element = (
  <div className="container">
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

// JavaScript expressions in JSX
const name = "Phi";
const greeting = <h1>Hello, {name}!</h1>;

Props

function UserCard({ user }) {
  return (
    <div className="card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Usage
<UserCard user={{ name: "Phi", email: "phi@example.com" }} />;

State

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Conditional Rendering

function Greeting({ isLoggedIn }) {
  return <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}</div>;
}

Lists

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Events

function Button() {
  const handleClick = (e) => {
    console.log("Clicked!", e);
  };

  return <button onClick={handleClick}>Click me</button>;
}

Forms

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}

Next Steps

• 👉 React Hooks - useState, useEffect, custom hooks
• 📚 Performance - Optimization techniques