Cài đặt React App
Làm thế nào để cài đặt và xây dựng một dự án Web React App?
Bài này chúng tôi sẽ hướng dẫn cách cài đặt React và các phần mềm cần thiết để để xây dựng Web App React.
Để bắt đầu xây dựng một dự án React và lập trình với Web React App bạn cần phải chuẩn bị và cài đặt các phần mềm sau đây:
- Cài đặt Node.JS
- Cài Đặt React.JS và tạo React App
- Cài Đặt Phần Mềm Visual Studio Code
1.Cài đặt Node.JS
Download Nodejs tại trang web : https://nodejs.org/en/download
Sau khi Download Nodejs xong bạn tiến hành cài đặt Nodejs.
2.Cài Đặt React.JS và tạo React App.
Cài đặt và tạo React App là rất đơn giản.
Để tạo một App mới bạn sử dụng lệnh npx như sau:
npx create-react-app my-app
Sau khi chạy lệnh npx create-react-app my-app ở trên,nó sẽ tạo một thư mục có tên my-app bên trong thư mục hiện tại. Bên trong thư mục đó, nó sẽ tạo mã nguồn source code cho dự án.
Ví dụ : Giả sử chúng ta cần tạo mới một app trong thư mục:
D:\Ihoclaptrinh.com\React-Learning\React_App_Demo
Lệnh để tạo dự án mới React App như sau:
Nhập lệnh npx create-react-app my-app và sau đó nhấn Enter để bắt đầu tạo mới App.
Việc tạo mới React App cần cài đặt các gói (Install Packages) do đó bạn cần phải chờ một lát để quá trình cài đặt hoàn tất.
Quá trình cài đặt thành công như hình dưới đây.
Để xem thư mục mã nguồn dự án React App bạn vào thư mục my-app
-Bước tiếp theo bắt đầu chạy start App.
Sử dụng lệnh : cd my-app
Sau đó gõ lệnh: npm start
Sau khi start App thành công bạn có thể xem app trong trình duyệt web :
Local: http://localhost:3000
Hoặc IP: http://192.168.1.10:3000
3.Cài Đặt Phần Mềm Visual Studio Code
Để viết code và phát triển React App bạn cần cài đặt phần mềm Visual Studio Code.
Tải Download phần mềm Visual Studio Code tại trang web:
https://code.visualstudio.com/download
Sau khi tải xong bạn tiến hành cài đặt phần mềm Visual Studio Code trên máy tính của bạn.
Sau khi cài đặt thành công bạn mở phần mềm Visual Studio Code.
Mở dự án my-app Web React APP bằng Visual Studio Code
Chọn File/Open Folder.. Sau đó chọn đến thư mục my-app.
Bây giờ bạn có thể bắt đầu viết code và phát triển app theo cách của bạn.Bài sau chúng tôi sẽ hướng dẫn các bạn tạo một chương trình Hello Wold trong React App.