Để có một cái nhìn tổng quan về React là cái gì, bạn có thể viết React code trực tiếp trong HTML.
Nhưng để sử dụng React trong quá trình sản xuất, bạn cần phải có npm và Node.js được cài đặt trên máy tính của mình.
Viết React trực tiếp trong HTML
Cách nhanh nhất để bắt đầu học React là viết React trực tiếp trong các tập tin HTML của bạn.
Bắt đầu bằng cách chèn ba script, hai script đầu tiên cho phép chúng ta viết React code trong JavaScript của mình, và script thứ ba, Babel, cho phép chúng ta viết cú pháp JSX và ES6 trên các trình duyệt cũ hơn.
Bạn sẽ tìm hiểu thêm về JSX trong chương React JSX.
Ví dụ:
Cách sử dụng React này có thể phù hợp với mục đích thử nghiệm, nhưng đối với quá trình sản xuất bạn sẽ cần phải cài đặt môi trường React.
Cài đặt môi trường React
Nếu như bạn có npx và Node.js đã được cài đặt trên máy tính của mình, bạn có thể tạo ra một ứng dụng React bằng cách sử dụng lệnh create-react-app.
Nếu như trước đó bạn đã cài đặt create-react-app trên toàn cầu, chúng tôi khuyên bạn rằng bạn nên gỡ cài đặt package đó để bảo đảm npx luôn luôn sử dụng phiên bản mới nhất của create-react-app.
Để gỡ cài đặt, hãy chạy lệnh sau: npm uninstall -g create-react-app.
Hãy chạy lệnh sau để tạo ra một ứng dụng React có tên là my-react-app:
Lệnh create-react-app sẽ cài đặt mọi thứ mà bạn cần để chạy một ứng dụng React.
Chạy ứng dụng React
Bây giờ bạn đã sẵn sàng để chạy ứng dụng React thực tế đầu tiên của bạn!
Hãy chạy dòng lệnh sau để di chuyển tới thư mục my-react-app:
Hãy chạy dòng lệnh sau để chạy ứng dụng React my-react-app:
Một cửa sổ trình duyệt mới sẽ bật lên với ứng dụng React mới được tạo ra của bạn! Nếu không thì, bạn mở trình duyệt của mình và nhập localhost:3000 vào thanh địa chỉ.
Sửa đổi ứng dụng React
Mọi việc đã thành công, nhưng tôi thay đổi nội dung như thế nào?
Nhìn vào thư mục my-react-app, và bạn sẽ thấy một thư mục src. Bên trong thư mục src có một tập tin được gọi là App.js, bạn hãy mở nó ra và nó sẽ trông như sau:
Hãy thử thay đổi nội dung HTML và lưu lại tập tin.
Ví dụ: Hãy thay thế tất cả nội dung bên trong <div className="App"> bằng một phần tử <h1>.
Hãy xem các thay đổi trên trình duyệt khi bạn click Save.
Lưu ý rằng chúng ta đã loại bỏ các import mà chúng ta không cần thiết (logo.svg và App.css).
Kết quả trả về:
Tiếp theo là cái gì?
Bây giờ thì bạn đã có một môi trường React trên máy tính của mình, và bạn đã sẵn sàng để tìm hiểu thêm về React.
Trong phần còn lại của tutorial này chúng tôi sẽ sử dụng công cụ "Show React" của mình để giải thích các khía cạnh khác nhau của React, và cách chúng được hiển thị trên trình duyệt.
Nếu như bạn muốn làm theo các bước tương tự trên máy tính của mình, hãy bắt đầu bằng cách loại bỏ thư mục src để chỉ chứa một tập tin duy nhất: index.js. Bạn cũng nên loại bỏ bất kỳ dòng code nào không cần thiết bên trong tập tin index.js để làm cho chúng trông giống như ví dụ trong công cụ "Show React" bên dưới:
Nội dung của tập tin index.js:
