Khóa học Frontend NextJS + React

import React, { useState } from 'react';

function Counter() {
  // TypeScript suy luận 'count' là kiểu 'number'
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Tăng</button>
      <button onClick={decrement}>Giảm</button>
    </div>
  );
}

import React, { useState } from 'react';

function Greeting() {
  // TypeScript suy luận 'name' là kiểu 'string'
  const [name, setName] = useState('');

  // TypeScript suy luận 'isActive' là kiểu 'boolean'
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <p>Hello, {name || 'Guest'}!</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
      <button onClick={() => setIsActive(!isActive)}>Toggle Status</button>
    </div>
  );
}

const [stateVariable, setStateVariable] = useState<Type>(initialValue);

import React, { useState, useEffect } from 'react';

// Định nghĩa interface cho dữ liệu người dùng
interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile() {
  // State có thể là User hoặc null
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Giả lập tải dữ liệu
    setTimeout(() => {
      setUser({ id: 1, name: 'Alice', email: 'alice@example.com' });
      setIsLoading(false);
    }, 1000);
  }, []);

  if (isLoading) {
    return <p>Đang tải thông tin người dùng...</p>;
  }

  // Nhờ TypeScript, chúng ta biết user không null ở đây (nếu logic đúng)
  // Tuy nhiên, khi truy cập user, bạn vẫn cần kiểm tra null hoặc sử dụng optional chaining (?)
  return (
    <div>
      <h2>Thông tin người dùng</h2>
      {user ? ( // Kiểm tra user không null trước khi truy cập thuộc tính
        <>
          <p>ID: {user.id}</p>
          <p>Tên: {user.name}</p>
          <p>Email: {user.email}</p>
        </>
      ) : (
        <p>Không tìm thấy người dùng.</p> // Trường hợp tải thất bại hoặc user vẫn là null
      )}
    </div>
  );
}

import React, { useState } from 'react';

function TodoList() {
  // Định nghĩa interface cho mỗi công việc (Todo item)
  interface Todo {
    id: number;
    text: string;
    isCompleted: boolean;
  }

  // State là một mảng các đối tượng Todo, khởi tạo là mảng rỗng
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTask, setNewTask] = useState('');

  const addTodo = () => {
    if (newTask.trim()) {
      const newTodo: Todo = { // Đảm bảo đối tượng mới đúng kiểu Todo
        id: Date.now(), // Sử dụng timestamp làm ID đơn giản
        text: newTask,
        isCompleted: false,
      };
      setTodos([...todos, newTodo]); // Thêm đối tượng Todo mới vào mảng
      setNewTask('');
    }
  };

  const toggleComplete = (id: number) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo
    ));
  };

  return (
    <div>
      <h2>Danh sách công việc</h2>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Thêm công việc mới"
      />
      <button onClick={addTodo}>Thêm</button>
      <ul>
        {todos.map(todo => ( // Duyệt qua mảng các đối tượng Todo
          <li
            key={todo.id}
            style={{ textDecoration: todo.isCompleted ? 'line-through' : 'none' }}
            onClick={() => toggleComplete(todo.id)}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

import React, { useState } from 'react';

// Định nghĩa interface cho cài đặt cấu hình
interface Settings {
  theme: 'light' | 'dark'; // Sử dụng Union Type
  fontSize: number;
  notificationsEnabled: boolean;
}

function UserSettings() {
  // State là một đối tượng Settings, khởi tạo với giá trị mặc định
  const [settings, setSettings] = useState<Settings>({
    theme: 'light',
    fontSize: 16,
    notificationsEnabled: true,
  });

  const toggleTheme = () => {
    setSettings({
      ...settings, // Giữ lại các thuộc tính khác
      theme: settings.theme === 'light' ? 'dark' : 'light', // Cập nhật thuộc tính 'theme'
    });
  };

  const changeFontSize = (size: number) => {
     setSettings({
      ...settings,
      fontSize: size, // Cập nhật thuộc tính 'fontSize'
    });
  }

  return (
    <div>
      <h2>Cài đặt người dùng</h2>
      <p>Chủ đề: {settings.theme}</p>
      <button onClick={toggleTheme}>Chuyển đổi chủ đề</button>

      <p>Cỡ chữ: {settings.fontSize}</p>
      <button onClick={() => changeFontSize(settings.fontSize + 2)}>Tăng cỡ chữ</button>

      <p>Thông báo: {settings.notificationsEnabled ? 'Đã bật' : 'Đã tắt'}</p>
       {/* Thêm nút toggle thông báo nếu cần */}
    </div>
  );
}