Tạo Ứng Dụng React Hello World Và Các Thành Phần Cơ Bản

Khi mới bắt đầu học lập trình frontend, mình từng nghe nói rất nhiều về React. Nhưng phải đến khi viết được dòng chữ Hello World bằng React đầu tiên, mình mới thật sự hiểu cách mà thư viện này hoạt động. Trong bài viết này, TruongDevs sẽ hướng dẫn bạn cách tạo một ứng dụng React cơ bản, đồng thời giải thích các khái niệm quan trọng như JSX, component, props, và state.

Tự tay viết Hello World với React từ con số 0

React là gì?

React là một thư viện JavaScript dùng để xây dựng giao diện người dùng. Nó được phát triển bởi Facebook và hiện là công nghệ phổ biến nhất trong lập trình frontend. React hoạt động dựa trên khái niệm component – tức là chia nhỏ giao diện thành các phần nhỏ, dễ quản lý và tái sử dụng.

Cách tạo ứng dụng React Hello World

Cài đặt môi trường

Để tạo ứng dụng React, bạn cần cài sẵn Node.js và một trong hai công cụ sau:

Với npx:

npx create-react-app hello-world

Hoặc với yarn:

yarn create react-app hello-world

Sau khi chạy xong, bạn sẽ có một thư mục hello-world chứa toàn bộ cấu trúc của một ứng dụng React cơ bản.

Chạy ứng dụng React

Di chuyển vào thư mục dự án và khởi động server:

cd hello-world
npm start

hoặc:

yarn start

Trình duyệt sẽ mở trang http://localhost:3000 với ứng dụng React mặc định.

Viết chương trình Hello World

Mở file src/App.js và thay nội dung thành:

function App() {
  return (
    <div>
      <h1>Hello World from React!</h1>
    </div>
  );
}

Lưu lại và bạn sẽ thấy dòng chữ Hello World from React! hiển thị trên trình duyệt. Chúc mừng bạn đã tạo xong ứng dụng React đầu tiên.

Giải thích các thành phần cơ bản trong React

JSX là gì?

JSX (JavaScript XML) là cú pháp cho phép bạn viết HTML trong JavaScript. JSX giúp code dễ đọc, dễ viết hơn khi xây dựng giao diện. Ví dụ ở trên chính là một đoạn JSX quen thuộc trong React.

Component là gì?

Component là đơn vị xây dựng giao diện trong React. Mỗi component có thể hiểu là một "viên gạch" có thể tái sử dụng. Trong ví dụ Hello World, App chính là một component.

Props là gì?

Props là cách truyền dữ liệu từ component cha xuống component con.

function Welcome(props) {
  return <h2>Xin chào, {props.name}!</h2>;
}

function App() {
  return (
    <div>
      <Welcome name="TruongDevs" />
    </div>
  );
}

State là gì?

State dùng để quản lý dữ liệu thay đổi bên trong component. Khi state thay đổi, giao diện sẽ tự động cập nhật lại.

import { useState } from 'react';

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

  return (
    <div>
      <p>Bạn đã bấm {count} lần</p>
      <button onClick={() => setCount(count + 1)}>Bấm tôi</button>
    </div>
  );
}

Hướng dẫn từng bước tạo ứng dụng Hello World bằng React

Nếu bạn muốn xem trực quan cách tạo ứng dụng React đầu tiên, video dưới đây sẽ hướng dẫn bạn từng bước — từ cài đặt môi trường đến viết component Hello World bằng JSX. Phù hợp với người mới bắt đầu và sinh viên IT.

Kết luận

Qua bài viết này, bạn đã học cách tạo ứng dụng Hello World bằng React và hiểu sơ lược về JSX, component, props và state. Đây là những nền tảng đầu tiên để bước vào thế giới lập trình frontend hiện đại.

Trong bài tiếp theo, mình sẽ chia sẻ chi tiết hơn về Component trong React – cách tạo, phân loại và sử dụng component hiệu quả. Hãy đón đọc trên blog nhé!