Tự học React JS trọn bộ kiến thức cơ bản – phần 1

React là một thư viện front-end được phát triển bởi Facebook. Nó được sử dụng để xử lý layer cho các ứng dụng web và di động. ReactJS cho phép chúng ta tạo các componet UI và có thể tái sử dụng. Hiện là một trong những thư viện JavaScript phổ biến nhất và cộng đồng lớn.


1065

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/nodejs

Sau 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 init

Lệ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 -y

Bướ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 --save

Bướ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 --save

Bướ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-dev

Bướ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 start

Nó 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:

react

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:

react

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 /src

Bướ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
react

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;
React JSX Wrapper

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;
React JSX Inline Javascript

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ư classfor đượ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.


Like it? Share with your friends!

1065