Tổng quan
Tính năng của React
- JSX – JSX là phần mở rộng cú pháp JavaScript. Không nhất thiết phải sử dụng JSX trong React, nhưng khuyến khích nên sử dụng.
- Component – Tất cả React có là component. Bạn cần nghĩ về mọi thứ như component. Điều này sẽ giúp bạn duy trì code khi làm việc trên các dự án quy mô lớn hơn.
- Luồng dữ liệu đơn hướng và Flux(thông lượng) – React thực hiện luồng dữ liệu một chiều. Flux là một mô hình giúp giữ cho dữ liệu của bạn một chiều.
- License (Chứng chỉ) – React được cấp phép Facebook Inc và dựa trên CC BY 4.0.
Ưu điểm của React
- Sử dụng DOM ảo là một đối tượng JavaScript. Điều này sẽ cải thiện hiệu suất ứng dụng, vì DOM ảo nhanh hơn DOM thông thường.
- Có thể được sử dụng ở phía client(máy khách) và máy chủ cũng như với các framework khác.
- Các component và dữ liệu cải thiện khả năng đọc, giúp duy trì các ứng dụng lớn hơn.
Hạn chế của React
- Chỉ bao gồm layers của ứng dụng, do đó bạn vẫn cần chọn các công nghệ khác để có bộ công cụ hoàn chỉnh để phát triển.
- Sử dụng template inline và JSX, điều này có vẻ khó xử với một số developer.
Setup enviroment(môi trường)
Trong phần này, chúng ta sẽ biết cách setup enviroment react chuẩn nhất. Lưu ý rằng có nhiều bước khác nhau nhưng điều này sẽ giúp tăng tốc quá trình phát triển sau này. Chúng ta cần NodeJS, vì vậy cài đặt nó như sau :
cd /tmp
wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz
tar xvfz node-v6.3.1-linux-x64.tar.gz
mkdir -p /usr/local/nodejs
mv node-v6.3.1-linux-x64/* /usr/local/nodejsSau khi cài đặt thành công NodeJS, chúng ta có thể bắt đầu cài đặt React khi sử dụng npm. Bạn có thể cài đặt React theo hai cách sau:
- Sử dụng webpack và babel.
- Sử dụng lệnh create-react-app
Cài đặt React bằng webpack và babel
Webpack là một gói module (quản lý và tải các module độc lập). Nó nhận các module phụ thuộc và biên dịch chúng thành một gói (tệp) duy nhất. Bạn có thể sử dụng gói này trong khi phát triển ứng dụng bằng dòng lệnh hoặc bằng cách cấu hình nó bằng tệp webpack.config.
Babel là một trình biên dịch và trình dịch code JavaScript. Nó được sử dụng để chuyển đổi một mã nguồn khác.
Bước 1 – Tạo thư mục
Tạo một thư mục có tên ReacApp để cài đặt tất cả các tệp cần thiết, sử dụng lệnh mkdir.
mkdir reactApp
cd reactAppĐể tạo bất kỳ module nào, cần phải tạo file package.json. Do đó, sau khi tạo thư mục, chúng ta cần tạo file package.json.
npm initLệnh này hỏi thông tin về module, chẳng hạn như packagename, mô tả, tác giả, v.v. bạn có thể bỏ qua các tùy chọn này bằng cách sử dụng tùy chọn -y.
npm init -yBước 2 – Cài đặt React và React DOM
Vì nhiệm vụ chính của chúng ta là cài đặt React và các gói dom của nó, sử dụng các lệnh install React và Reac-dom của npm tương ứng. Bạn có thể thêm các package cài đặt, vào tệp package.json bằng tùy chọn –save.
npm install react react-dom --saveBước 3 – Cài đặt webpack
Vì chúng tađang sử dụng webpack để tạo gói cài đặt webpack, webpack-dev-server và webpack-cli.
npm install webpack webpack-dev-server webpack-cli --saveBước 4 – Cài đặt babel
Cài đặt babel và các plugin của nó babel-core, babel-loader, babel-preset-env, babel-preset-react và, html-webpack-plugin
npm install babel-core babel-loader babel-preset-env
babel-preset-react html-webpack-plugin --save-devBước 5 – Tạo trang chủ và liên quan
Để hoàn tất cài đặt, chúng ta cần tạo một số tệp nhất định là index.html, App.js, main.js, webpack.config.js và, .babelrc. Bạn có thể tạo các tệp này theo cách thủ công hoặc, bằng lệnh
touch index.html App.js main.js webpack.config.js .babelrc
Bước 6 – Cài đặt Compiler(Trình biên dịch), Máy chủ và Loaders(Trình tải)
Mở file webpack-config.js và thêm code sau đây. Ở đây chúng ta set môi trường local port:8001. Có thể chọn port khác theo ý bạn.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}Mở file package.json và xóa “test” “echo \”Error: no test specified\” && exit 1” bên trong “scripts”. Chúng ta xóa dòng này vì không thực hiện bất kỳ test nào trong hướng dẫn này. Thay vào đó, hãy thêm các lệnh start và build.
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"Step 7 – index.html
Đây chỉ là file HTML thông thường. Chúng ta đang đặt div id = “app” làm component gốc cho ứng dụng và thêm tập lệnh index_bundle.js, đây là tệp ứng dụng đi kèm.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>Bước 8 – App.jsx và main.js
Đây là component react đầu tiên. Chúng ta giải thích các component react theo chiều sâu trong phần tiếp theo. Component này sẽ in ra Hello World.
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;Chúng ta cần import component này và render nó với phần tử react App gốc, vì vậy chúng ta có thể thấy nó trong trình duyệt.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));Lưu ý – Bất cứ khi nào bạn muốn sử dụng một cái gì đó, bạn cần import nó trước. Nếu bạn muốn làm cho component có thể sử dụng được trong các phần khác của ứng dụng, bạn cần xuất nó sau khi tạo và import nó vào tệp mà bạn muốn sử dụng nó.
Tạo file .babelrc và thêm đoạn code sau vào
{
"presets":["env", "react"]
}Bước 9 – Chạy máy chủ
Quá trình thiết lập hoàn tất và chúng ta có thể khởi động máy chủ bằng cách chạy lệnh sau.
npm startNó sẽ hiển thị cổng chúng ta cần mở trong trình duyệt. Trong trường hợp của chúng ta, đó là http://localhost: 8001/. Sau khi chúng ta mở nó, sẽ thấy như thế này:
Bước 10 – Tạo bundle
Cuối cùng, để tạo bundle bạn cần chạy lệnh build
npm run buildĐiều này sẽ tạo ra bundle trong thư mục hiện tại như dưới đây:
Và thế là hoàn tất
Sử dụng lệnh create-react-app
Thay vì sử dụng webpack và babel, bạn có thể cài đặt React đơn giản hơn bằng lệnh create-react-app
Bước 1 – Cài đặt create-react-app
Bằng cách chạy câu lệnh sau
npx create-react-app my-appĐiều này sẽ tạo một thư mục có tên my-app trên máy tính và cài đặt tất cả các file cần thiết trong đó.
Bước 2 – Xóa tất cả các tệp nguồn
Xóa tất cả bằng câu lệnh như sau:
rm -rf /srcBước 3 – Thêm tệp
Thêm tệp có tên index.css và index.js trong thư mục src như sau
touch index.css index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';Bước 4 – Chạy dự án
Cuối cùng, chạy dự án bằng lệnh start.
npm start
Sử dụng JSX
JSX trông giống như HTML thông thường trong hầu hết các trường hợp. Chúng ta đã sử dụng nó trong phần setup enviroment. Nhìn vào code từ file App.jsx return div.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;Mặc dù nó tương tự như HTML, nhưng có một vài điều chúng ta cần ghi nhớ khi làm việc với JSX.
Elements lồng vào nhau
Nếu chúng ta muốn trả về nhiều phần tử hơn, chúng ta cần bọc nó bằng một phần tử container. Lưu ý cách chúng ta đang sử dụng div bao bọc cho các phần tử h1, h2 và p.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
);
}
}
export default App;
Attributes(Thuộc tính)
Chúng ta có thể sử dụng các thuộc tính tùy chỉnh của riêng mình bên ngoài các thuộc tính HTML thông thường. Khi chúng ta muốn thêm thuộc tính tùy chỉnh, chúng ta cần sử dụng data- prefix(tiền tố dữ liệu). Trong ví dụ sau, chúng tađã thêm dữ liệu-data-myattribute làm thuộc tính của phần tử p
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
</div>
);
}
}
export default App;Biểu thức JavaScript
Các biểu thức JavaScript có thể được sử dụng bên trong JSX. Chúng ta chỉ cần bọc nó bằng dấu ngoặc nhọn {}. Ví dụ sau sẽ hiển thị 2.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
}
export default App;
Chúng ta không thể sử dụng if else bên trong JSX, thay vào đó chúng ta có thể sử dụng các biểu thức có điều kiện (ternary). Trong ví dụ sau, biến i = 1 nên trình duyệt sẽ hiển thị đúng, Nếu chúng ta thay đổi nó thành một giá trị khác, nó sẽ hiển thị sai.
import React from 'react';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
);
}
}
export default App;
Styling
React khuyên bạn nên sử dụng kiểu inline. Khi chúng ta muốn set kiểu inline, chúng ta cần sử dụng cú pháp camelCase. React cũng sẽ tự động nối thêm px sau giá trị số trên các phần tử cụ thể. Ví dụ sau đây cho thấy cách thêm inline myStyle vào phần tử h1.
import React from 'react';
class App extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}
export default App;
Comments
Khi viết bình luận, chúng ta cần đặt dấu ngoặc nhọn {} khi viết bình luận trong phần con của thẻ. Đó là một cách thực hành tốt để luôn sử dụng {} khi viết nhận xét, vì chúng ta muốn nhất quán khi viết ứng dụng
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
}
export default App;Quy ước đặt tên
Thẻ HTML luôn sử dụng tên thẻ chữ thường, trong khi các thành phần React bắt đầu bằng Uppercase.
Phần giải thích của trang chủ như sau
Vì JSX là JavaScript, các mã định danh như class và for được khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM mong đợi các tên thuộc tính DOM như className và htmlFor, tương ứng.
Kết luận
Qua bài viết chúng ta đã biết cách cài đặt và setup react bằng 2 cách khác nhau. Mỗi cách có những ưu nhược điểm khác nhau tùy cách. Và hiểu về JSX, cách đặt tên theo chuẩn React.
Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.
Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.
