Giới thiệu React JS

Giới thiệu React JS
access_time 8/24/2016 12:00:00 AM
person Đào Minh Giang

Tài liệu tại trang web chính thức React định nghĩa về React như sau

 

React là một thư viện để xây dựng các thành phần giao diện người dùng. Thông qua việc khuyến khích tạo các thành phần UI dùng chung mà gắn với dữ liệu liên tục thay đổi. Rất nhiều người dùng React như View trong mô hình MVC. React cho phép bạn không cần làm việc với các thành phần trìu tượng của DOM, bằng cách cung cấp một mô hình lập trình đơn giản và hiệu năng tốt hơn. React cũng cho phép sinh nội dung (render) trên server thông qua Node, và nó là thành phần cốt yếu (power) cho ứng dụng native sử dụng React Native. React thực thi phản ứng luồng dữ liệu một chiều để giảm việc soạn sẵn và là lý do dễ dàng hơn mô hình gắn kết dữ liệu truyền thống.

 

Các đặc trưng của React

JSX JSX là sự mở rộng cú pháp JavaScript. Việc sử dụng JSX là không bắt buộc trong phát React, nhưng nó được khuyến cáo các nhà phát triển nên dùng.

Các thành phần (Components) – Mọi thứ React đều là thành phần. Bạn có thể nghĩ rằng mọi thứ là một component. Chúng giúp bạn bảo trì mã code khi làm việc với các dự án lớn.

Luồng dữ liệu một chiều (Unidirectional data flow) và Flux – React thực thi luồng dữ liệu một chiều là lý do phát triển ứng dụng của bạn dễ dàng. Flux là một mẫu phát triển (pattern) trợ giúp việc giữ dữ liệu của bạn theo một chiều.

Giấy phép Giấy phép React được cấp bởi Facebook Inc. Tài liệu được cấp phép bởi CC BY 4.0

 

Các tính năng nâng cao của React

React sử dụng DOM ảo thực chất là đối tượng JavaScript. Điều này làm tăng hiệu năng ứng dụng vì DOM ảo JavaScript xử lý nhanh hơn DOM thông thường.

React có thể được dùng cho cả client và phía server

Mẫu phát triển Component và Dữ liệu cải thiện việc tính dễ đọc mã code giúp ích cho việc bảo trì các ứng dụng lớn

 

Các giới hạn của React

React chỉ bao hàm lớp view của ứng dụng vì thế bạn vẫn cần sử dụng các công nghệ khác để có đầy đủ các công cụ cho việc phát triển.

React chỉ sử dụng mẫu trên dòng (inline templating) và JSX. Điều này có thể làm khó cho một vài nhà phát triển.

 

Cài đặt gói và tạo ứng dụng HelloWorld với React

Trước khi bắt đầu bạn cần chắc chắn rằng máy mình đã được cài đặt NodeJS và NPM.

Bước 1. Cài đặt các gói global

Trong bước này ta cài đặt babelbabel-cli để sử dụng các plugin của babel trong việc phát triển ứng dụng với React. Tại cửa sổ dòng lệnh bạn cần thực hiện chạy lần lượt hai lệnh cài đặt sau thông qua npm:

D:\Demo> npm install -g babel

D:\Demo> npm install –g babel-cli

Bước 2. Tạo thư mục gốc

Bước này bạn cần tạo một thư mục gốc với tên là reactApp chứa ứng dụng React. Trong thư mục vừa tạo, ta sẽ sử dụng npm để tạo file package.json thông qua lệnh npm init như sau:

D:\Demo> mkdir reactApp

D:\Demo> cd reactApp

D:\Demo\reactApp> npm init

Trong lệnh cuối npm sẽ yêu cầu bạn cung cấp một số thông tin về ứng dụng muốn tạo như tên (name), phiên bản (version), mô tả (description), file khởi chạy (entry point), lệnh test (test command), đường dẫn git (git repository), từ khóa (keyword), tác giả (author), bản quyền (license). Nếu muốn bạn có thể nhập thông tin theo ý mình hoặc đơn giản là nhấn Enter để sử dụng theo gợi ý có sẵn.

Bước 3. Cài đặt các thành phần phụ thuộc và babel plugin

Chúng ta sẽ sử dụng gói webpack thông qua việc cài đặt webpackwebpack-dev-server như sau:

D:\Demo\reactApp> npm install webpack --save

D:\Demo\reactApp> npm install webpack-dev-server –save

Dòng lệnh trên sử dụng tham số --save để npm tự bổ xung thông tin gói cài đặt vào file package.json.

Kế đến ta tiếp tục cài đặt react gồm gói reactreac-dom thông qua hai lệnh như sau:

D:\Demo\reactApp> npm install react --save

D:\Demo\reactApp> npm install react-dom --save

Và tiếp tục cài đặt các gói plugin của babel:

D:\Demo\reactApp> npm install babel-core

D:\Demo\reactApp> npm install babel-loader

D:\Demo\reactApp> npm install babel-preset-react

D:\Demo\reactApp> npm install babel-preset-es2015

Bước 4. Thiết lập thành phần biên dịch, Server và bộ nạp

Tạo file webpack.config.js để cấu hình Server cho webpack và bổ xung đoạn mã sau vào:

 

var config = {

   entry: './main.js',

        

   output: {

      path:'./',

      filename: 'index.js',

   },

        

   devServer: {

      inline: true,

      port: 8080

   },

 

   module: {

      loaders: [

         {

            test: /\.jsx?$/,

            exclude: /node_modules/,

            loader: 'babel',

                                  

            query: {

               presets: ['es2015', 'react']

            }

         }

      ]

   }

}

 

module.exports = config;

Trong đoạn mã trên ta thiết lập thành phần khởi động nạp là main.js. Đồng thời cổng server là 8080, nếu muốn bạn có thể đặt một cổng khác. Và cuối cùng, ta thiết lập bộ nạp babel tìm các file jsx để biên dịch với hai thiết lập es2015react.

 

Mở file package.json và xóa dòng mã "test" "echo \"Error: no test specified\" && exit 1"n trong đối tượng “scripts”. Chúng ta xóa dòng này bởi ta không cần thực hiện bất kỳ kiểm thử nào. Sau đó bổ xung lệnh start trong đối tượng scripts như sau:

"start": "webpack-dev-server --hot"

Với việc bổ xung lệnh start này thì ta có thể khởi chạy server bằng lệnh npm start. Tham số --hot có tác dụng khi có sự thay đổi về các file trong ứng dụng thì trình duyệt sẽ tự nạp lại.

Bước 5. Tạo nội dung trang index.html

Chúng ta cần tạo file index.html và thiết lập phần tử div với idapp là phần tử gốc cho ứng dụng của ta, sau đó thêm mã gắn file index.js vào:

 

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>
</html>

Bước 6. Tạo nội dung App.jsx và main.js

Ta tạo component react đầu tiên bằng việc tạo file App.jsx với nội dung như sau:

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Component này sẽ render nội dung thẻ div với text bên trong là Hello World!!!

Kế đến ta cần import component và render nó vào phần tử gốc app với việc tạo file main.js có nội dung như sau :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

Bước 7. Khởi chạy Server

Các bước để tạo ứng dụng đã hoàn thành, lúc này ta có thể khởi chạy server thông qua lệnh npm start. Và khi mở trên trình duyệt địa chỉ http://localhost:8080 chúng ta sẽ nhận được nội dung React render ra là Hello World!!!

 

Bạn cần đăng nhập vào hệ thống mới có quyền download file kèm theo bài viết Đăng ký tài khoản

vertical_align_top
share
Chat...