Khi bạn bắt đầu hành trình trở thành Front-end Developer, chắc chắn bạn sẽ nghe đến cái tên ReactJS – thư viện JavaScript mạnh mẽ do Facebook (Meta) phát triển. ReactJS không chỉ giúp việc xây dựng giao diện người dùng (UI) trở nên dễ dàng, mà còn mang đến hiệu suất cao và khả năng tái sử dụng mã tuyệt vời.

Tuy nhiên, với người mới học, việc tạo dự án ReactJS đầu tiên, hiểu cách quản lý trạng thái với useState, hay truyền dữ liệu giữa các Component thường là bước khiến nhiều bạn bỡ ngỡ.

Bài viết này sẽ hướng dẫn bạn từng bước cụ thể, từ việc tạo một dự án ReactJS đầu tiên, sử dụng hook useState để quản lý dữ liệu động, đến cách truyền dữ liệu giữa các Component cha – con trong React. Đây chính là những kỹ năng nền tảng để bạn xây dựng các ứng dụng web chuyên nghiệp, hiện đại, và có khả năng mở rộng cao.

Cùng bắt đầu với hành trình đầu tiên trong thế giới ReactJS – nơi mọi “phép màu” về UI bắt đầu từ những dòng code đơn giản nhất.

Cài đặt môi trường và tạo dự án ReactJS đầu tiên

Trước khi viết dòng code đầu tiên, bạn cần chuẩn bị môi trường để chạy ứng dụng ReactJS.

1. Cài đặt Node.js và npm

ReactJS cần Node.js để quản lý gói (package) và chạy server cục bộ.

• Truy cập https://nodejs.org

• Tải phiên bản LTS (ổn định nhất)

• Sau khi cài, mở Terminal / CMD và kiểm tra:

  node -v
  npm -v
  

2. Tạo dự án ReactJS đầu tiên

React cung cấp công cụ tạo nhanh dự án bằng Create React App:

npx create-react-app my-first-react
cd my-first-react
npm start

Ngay sau khi chạy lệnh npm start, trình duyệt sẽ tự động mở tại http://localhost:3000/ – chào mừng bạn đến với ứng dụng React đầu tiên của mình!

3. Cấu trúc thư mục trong ReactJS

Khi mở thư mục dự án, bạn sẽ thấy cấu trúc cơ bản:

• src/: Nơi chứa mã nguồn chính (component, style, logic).

• public/: Chứa file index.html – nơi React “render” toàn bộ ứng dụng.

• package.json: Quản lý các gói và script.

💡 Lời khuyên:
Giữ cho cấu trúc thư mục gọn gàng, đặt tên file và component có ý nghĩa rõ ràng để dễ bảo trì sau này.

useState trong ReactJS – Quản lý trạng thái thông minh

Trong ReactJS, dữ liệu hiển thị trên giao diện gọi là state (trạng thái). Khi state thay đổi, giao diện tự động cập nhật – đây là điểm mạnh cốt lõi giúp React trở nên “sống động”.

1. useState là gì?

useState là một Hook trong React (bắt đầu từ phiên bản 16.8), cho phép bạn thêm state vào function component.

Cú pháp:

const [state, setState] = useState(initialValue);

• state: giá trị hiện tại.

• setState: hàm dùng để thay đổi giá trị state.

• initialValue: giá trị khởi tạo.

2. Ví dụ sử dụng useState

import React, { useState } from 'react';

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

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h2>Bộ đếm: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Tăng</button>
      <button onClick={() => setCount(count - 1)}>Giảm</button>
    </div>
  );
}

export default Counter;

3. Giải thích

• useState(0) khởi tạo biến count với giá trị ban đầu là 0.

• Khi người dùng nhấn nút “Tăng”, hàm setCount(count + 1) được gọi, React tự động render lại giao diện với giá trị mới.

• Mỗi lần state thay đổi, React cập nhật phần giao diện liên quan mà không cần reload toàn bộ trang.

💡 Lời khuyên:

• Không thay đổi state trực tiếp (ví dụ count++), luôn dùng hàm setter (setCount).

• Mỗi component có thể có nhiều state khác nhau để lưu dữ liệu riêng biệt.

Truyền dữ liệu giữa các Component trong ReactJS

React được xây dựng dựa trên kiến trúc component-based – nghĩa là giao diện được chia nhỏ thành nhiều phần (component) độc lập. Để các component có thể “nói chuyện” với nhau, ta cần hiểu cách truyền dữ liệu giữa chúng.

1. Truyền dữ liệu từ cha → con (Parent to Child)

Đây là cách phổ biến nhất. Dữ liệu được truyền thông qua props.

Ví dụ:

// Component cha
function App() {
  const message = "Xin chào từ Component Cha!";
  return <ChildComponent text={message} />;
}

// Component con
function ChildComponent(props) {
  return <h3>{props.text}</h3>;
}

Khi chạy, component con sẽ hiển thị:

Xin chào từ Component Cha!

💡 Lời khuyên:
Props trong React là read-only, không nên chỉnh sửa trực tiếp trong component con.

2. Truyền dữ liệu từ con → cha (Child to Parent)

Đôi khi bạn cần gửi dữ liệu ngược lại, ví dụ khi người dùng nhập thông tin trong component con.
Cách làm: truyền hàm từ cha xuống con qua props, rồi gọi hàm đó trong con.

Ví dụ:

function Parent() {
  const handleData = (data) => {
    console.log("Dữ liệu từ con:", data);
  };

  return <Child sendData={handleData} />;
}

function Child({ sendData }) {
  const sendInfo = () => {
    sendData("Xin chào cha!");
  };

  return <button onClick={sendInfo}>Gửi dữ liệu</button>;
}

Khi nhấn nút, console sẽ hiển thị:

Dữ liệu từ con: Xin chào cha!

💡 Mẹo:

• Dùng callback function là cách “chuẩn React” để truyền dữ liệu ngược lại.

• Không nên dùng biến global hoặc trực tiếp sửa state của component cha.

3. Truyền dữ liệu giữa hai component không liên quan

Khi hai component không có quan hệ cha – con, bạn có thể:

• Dùng Context API của React.

• Hoặc dùng thư viện quản lý state như Redux, Zustand, Jotai.

Ví dụ cơ bản với Context API:

import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function Parent() {
  const [user, setUser] = useState("Nguyen Van A");

  return (
    <UserContext.Provider value={user}>
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  const user = useContext(UserContext);
  return <h3>Xin chào {user}</h3>;
}

💡 Lời khuyên:

• Dùng Context API khi dữ liệu cần chia sẻ ở nhiều cấp (ví dụ: thông tin người dùng, theme).

• Đừng lạm dụng Context – nếu dữ liệu thay đổi thường xuyên, hãy xem xét dùng thư viện quản lý state.

Ứng dụng thực tế: Mini project quản lý trạng thái và truyền dữ liệu

Giả sử bạn muốn xây dựng ứng dụng hiển thị thông tin người dùng – nơi bạn có thể nhập tên và hiển thị nó trên màn hình.

import React, { useState } from 'react';

function App() {
  const [userName, setUserName] = useState("");

  const handleInput = (name) => {
    setUserName(name);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <UserInput onSendName={handleInput} />
      <UserDisplay name={userName} />
    </div>
  );
}

function UserInput({ onSendName }) {
  const [name, setName] = useState("");

  return (
    <div>
      <input 
        type="text" 
        placeholder="Nhập tên..." 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
      <button onClick={() => onSendName(name)}>Gửi</button>
    </div>
  );
}

function UserDisplay({ name }) {
  return <h2>{name ? `Xin chào ${name}!` : "Chưa có dữ liệu"}</h2>;
}

export default App;

Phân tích

• Component UserInput quản lý input người dùng.

• Component UserDisplay nhận dữ liệu từ App thông qua props.

• Dữ liệu được truyền từ con → cha → con khác – một ví dụ hoàn chỉnh về luồng dữ liệu React một chiều (One-way Data Flow).

Một số lưu ý khi học ReactJS

1. Nắm chắc khái niệm state và props – đây là “linh hồn” của React.

2. Thực hành liên tục – mỗi ngày viết 1 component nhỏ, như form đăng nhập, bộ đếm, danh sách todo.

3. Học JSX kỹ lưỡng – cú pháp đặc biệt giúp viết HTML trong JavaScript.

4. Đừng nhảy quá nhanh sang Redux – hãy hiểu rõ cách quản lý state bằng hook trước.

5. Tập debug – sử dụng React Developer Tools để xem props, state của từng component.

Kết luận

Qua bài viết này, bạn đã được hướng dẫn chi tiết cách tạo dự án ReactJS đầu tiên, hiểu và áp dụng useState để quản lý trạng thái, cũng như nắm vững cách truyền dữ liệu giữa các Component trong ReactJS. Đây chính là bước khởi đầu quan trọng nhất để bạn tiến xa hơn trong hành trình học React – từ những ứng dụng nhỏ đến những dự án lớn, phức tạp hơn.

Điều quan trọng nhất không phải là bạn học được bao nhiêu khái niệm trong một ngày, mà là bạn thực hành bao nhiêu lần. Hãy thử tạo ứng dụng nhỏ như “bộ đếm”, “todo list” hay “form đăng ký”, áp dụng lại kiến thức về useState và truyền props, bạn sẽ nhận ra React không hề khó như bạn nghĩ.

👉 Hãy mở Visual Studio Code, chạy npx create-react-app my-first-react, và bắt đầu viết dòng code ReactJS đầu tiên của bạn ngay hôm nay.
Đó chính là bước đầu tiên để trở thành Front-end Developer chuyên nghiệp trong tương lai!