[React.js trong thực tiễn] Part2. Tạo một project bắt đầu bằng create-react-app
Từ part này, chúng ta sẽ cùng xem những gì cần thiết đặt để bắt đầu lập trình React và cấu trúc folder/code cơ bản của app React..
1. Thiết lập môi trường
1.1. Cài đặt Node
Node.js cần cho package manager npm/yarn của node - cần thiết để dễ dàng cài đặt các library liên quan đến React.
https://nodejs.org/en/
1.2. Cài đặt Yarn/npm
Yarn là npm phiên bản cải tiến hơn.
Mỗi loại đều có ưu và nhược điểm, hãy chọn package manager bạn muốn.
* Guide này dựa trên yarn package manager.
// git bash
brew install yarn
1.3. Cài đặt và sử dụng create-react-app
create-react-app là công cụ tạo app React.
yarn -g add create-react-app // Install create-react-app
create-react-app --version // Version Check
create-react-app Folder name // Create project folder
cd Folder name // Move to the created folder
yarn start // Execution
Khi hình thành project folder và chạy app React, local page sẽ tự động load trong trình duyệt Chrome và màn hình sau xuất hiện.
1.4. Trường hợp tham gia vào giữa dự án / sử dụng git (commit / push / build)
Nếu phải tham gia vào một dự án không phải là dự án xây dựng, ta sẽ bắt đầu bằng cách nhận pull từ nơi lưu trữ đã được React build.
// Copy project repository and create folder (example)
git clone https://github.com/hivelab/my-project.git react-itemlist
yarn
yarn start
commit và push trong khi tiến hành dự án
git add --all // The entire history I modified
git commit -m "Commit message" // Commit
git push origin master
Github build
Trong thứ tự sau chỉ cần setting bước 2~4 cho lần publish đầu tiên.
-
Giả sử đã hoàn thành phát triển dự án, ta sẽ di chuyển từ terminal đến React App Root Folder và nhập yarn build.
yarn build -
Thiết lập gh-pages bằng
yarn add --dev gh-pagesyarn add --dev gh-pages -
Thêm homepage vào package.json
"homepage" : "http://myname.github.io/myapp" // GitHub Path -
Thêm đoạn sau vào phần “scripts” trong cùng một file package.json.
//... "predeploy": "npm run build", "deploy": "gh-pages -d build", -
Nhập yarn run deploy rồi publish.
yarn run deloy
2. Cấu trúc folder được tạo
react-itemlist/ // Project name created
README.md
node_modules/
package.json
public/
index.html // This file shows the actual screen.
favicon.ico
src/ // This folder contains JavaScript code.
App.css
App.js
App.test.js // Delete
index.css
index.js
logo.svg // Delete
Tại đây, có thể xoá các file App.test.js, logo.svg và css nếu không cần thiết. (Không cần thiết trong bài thực hành này nên ta sẽ xoá đi)
Ta hãy cùng xem base code của các file chủ yếu sẽ xử lý trong bài thực hành này..
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';// Content 1
ReactDOM.render(<App />, document.getElementById('root')); // 2.
- Gọi Component App
- Thiết lập để rendering Component App trong yếu tố bên dưới root của giá trị ID trong Index.html.
import là một lệnh gọi file bên ngoài, và gọi React & Component từ library react để sử dụng React.
import React, { Component } from 'react';
Class của React tên là Component nhận kế thừa.
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code>
</p>
</div>
);
}
}
export default App; // Export to import from external
App.js sẽ là Component trung tâm quản lý giá trị state của dự án phát triển trong tương lai. Bạn cần biết props sẽ chuyển như thế nào, các event sẽ nhận như thế nào trong App.js.
Trong Part sau, tôi sẽ đề cập đến quá trình gọi data item và hiển thị trên màn hình dưới dạng list, và control list theo cài đặt..
URL tham khảo
Thông tin series
- [React.js trong thực tiễn] Part1. Hiểu khái niệm
- [React.js trong thực tiễn] Part2. Bắt đầu một project
- [React.js trong thực tiễn] Part3. Tạo list
- [React.js trong thực tiễn] Part4. Biểu hiện Filter, sort
- [React.js trong thực tiễn] Part5. Cho vào giỏ
Comments
Post a Comment