3. Cài đặt công cụ phát triển React JS

Để cài đặt công cụ phát triển React JS và thực hiện một ví dụ đơn giản, bạn có thể sử dụng Create React App, một công cụ giúp bạn nhanh chóng tạo dự án React mà không cần cấu hình ban đầu phức tạp.

Dưới đây là hướng dẫn cài đặt Create React App và thực hiện ví dụ tạo một ứng dụng đơn giản:

Bước 1: Cài đặt Node.js và npm Nếu bạn đã cài đặt Node.js và npm theo hướng dẫn ở trên, bạn có thể bỏ qua bước này.

Bước 2: Cài đặt Create React App Mở Command Prompt (Windows) hoặc Terminal (macOS, Linux) và chạy lệnh sau để cài đặt Create React App:

bash

npm install -g create-react-app

Bước 3: Tạo một ứng dụng React Chạy lệnh sau để tạo một dự án React mới:

bash

npx create-react-app my-react-app

Ở đây, “my-react-app” là tên bạn muốn đặt cho dự án. Sau khi lệnh hoàn tất, di chuyển vào thư mục dự án bằng lệnh:

bash

cd my-react-app

Bước 4: Chạy ứng dụng React Trong thư mục dự án, chạy lệnh sau để khởi chạy ứng dụng React:

bash

npm start

Lệnh này sẽ khởi chạy máy chủ phát triển và mở trình duyệt với ứng dụng React của bạn. Bạn sẽ thấy ứng dụng mặc định của Create React App được hiển thị trên trình duyệt.

Ví dụ đơn giản Hãy thử thêm một số thay đổi đơn giản vào ứng dụng. Mở tệp src/App.js trong dự án của bạn và sửa nội dung thành:

jsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello React!</h1>
      </header>
    </div>
  );
}

export default App;

Lưu lại và trình duyệt sẽ tự động làm mới, hiển thị chữ “Hello React!” trên trang web.

Đây chỉ là một ví dụ đơn giản để bạn làm quen với việc tạo và chạy một ứng dụng React sử dụng Create React App. Bạn có thể tiếp tục thêm các thành phần và logic phức tạp hơn để xây dựng ứng dụng phức tạp hơn.