ReactJs - Environment Setup (4h)
- Eden Duong
Tham khảo:
Cài đặt môi trường¶
Đầu tiên các bạn cần cài đặt NodeJS để tạo môi trường chạy React.
Tạo Project¶
Để tạo project ReactJS, chúng ta sẽ sử dụng tool hỗ trợ có sẵn là create-react-app. Chạy lệnh sau để cài đặt:
npm install -g create-react-app
Sau đó, vào thự mục nơi bạn muốn lưu project và chạy lệnh sau để tạo project:
create-react-app my-app
Dòng lệnh trên sẽ tạo cho sẽ tạo cho ta 1 project tên là my-app và install các module và lib cần thiết cho chúng ta.
Note:
Vì các phiên bản react, redux được cập nhật liên tục, nên ta cần cố định 1 số version như sau để tránh gặp lỗi trong quá trình code.
Ngoài ra , ở phạm vi bài học, ta sẽ cài thêm cả redux, react-redux redux-observable phục vụ cho các bài sau.
Các version cố định này không phải version mới nhất nhưng hiện đang dùng cho sản phẩm Magestore và vẫn stable.
Sửa file package.json, cố định 1 số version như sau:
"react": "16.8.6",
"react-dom": "16.8.6",
"react-redux": "5.1.2",
"react-scripts": "1.1.5",
"redux": "3.7.2",
"redux-logger": "3.0.6",
"redux-observable": "0.18.0",
"rxjs": "5.5.12"cập nhật vào
thành
npm install để cập nhật.
Trong thư mục src của project mới tạo sẽ có 3 file chúng ta cần quan tâm:
src/App.js
Đây là React component đầu tiên của chúng ta, chúng ta sẽ tìm hiểu component là gì ở các phần sau, component này là App sẽ render Hello World ra màn hình.
src/index.js
File này sẽ làm nhiệm vụ render component App ở trên vào 1 thẻ html với id "root" ở trong fileindex.html
public/index.html
Đây là file HTML chính của ta, tất cả component sẽ được render ra đây.
Chạy thử project¶
Các bạn mở terminal lên, vào thự mục root của project và gõ lệnh: