images
08/04/2021 03:51 am

Giới thiệu về ReactJS

ReactJS là một thư viện Javascript mã nguồn mở được phát triển bởi Facebook, để xây dựng các UI components một cách dễ dàng.

1. Giới thiệu chung

ReactJS là một thư viện Javascript mã nguồn mở được phát triển bởi Facebook, để xây dựng các UI components một cách dễ dàng. ReactJS là một Single-Page Applications, nghĩa là trang web sẽ không phải load lại khi có sự thay đổi giữa các component.


2. Kiến trúc của ReactJS


Một dự án React cơ bản bao gồm:

Component: React chia trang web thành các thành phần nhỏ khác nhau. Các phần nhỏ này được gọi là component. Nó hoạt động giống như các hàm và trả về các thành phần HTML thông qua hàm render.


RealDOM: là tên viết tắt của Document Object Model. Là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác tới các thành phần HTML của trang web bằng các ngôn ngữ lập trình thông dịch (scripting language).

Virtual DOM: là đại diện của DOM trên trang được lưu trong bộ nhớ và được đồng bộ hóa với DOM thật bởi thư viện ReactDOM. Sau khi các thành phần sẵn sàng hiển thị, các thay đổi trạng thái sẽ được ghi lại. React sẽ so sánh các DOM ảo này với DOM ảo trước đó để phân tích sự khác biệt. Các thay đổi sẽ được áp dụng cho giao diện người dùng.

UI: là viết tắt của User Interface. Là giao diện người dùng bao gồm tất cả những gì người dùng có thể nhìn thấy như màu sắc, font chữ, bố cục web sắp xếp như thế nào, hình ảnh có hấp dẫn không,… Người dùng sẽ thao tác với trang web bằng các sự kiện và dispatch chúng tới data store.

Reducer: có nhiệm vụ xử lý các sự kiện và action được gửi đến, xác định state sẽ thay đổi như thế nào, sau đó trả về một state mới và lưu nó vào Store.

Server: hay máy chủ là một phần của máy tính mà cung cấp những chức năng cho các chương trình khác hoặc cho các thiết bị, được gọi là client. Máy chủ có thể cung cấp những dịch vụ khác nhau, chẳng hạn như chia sẻ dữ liệu hoặc các tài nguyên giữa nhiều máy khách.


3. Cách setup một project React đơn giản

Trước khi bắt đầu setup, phải đảm bảo rằng máy bạn đã cài đặt sẵn môi trường Javascript (Nodejs), nếu chưa có bạn có thể download Nodejs tại đây.

Để kiểm tra, mở Command Prompt trên Windows và nhập lệnh:


node --version

v14.16.0

npm --version

6.14.11


Khi có xuất hiện version, nghĩa là máy bạn đã cài đặt thành công Nodejs.

3.1. Cài đặt tự động với create-react-app

Cách tốt nhất là sử dụng create-react-app để cài đặt. Nó đã bao gồm việc cài đặt sẵn một số thư viện như webpack, babel,… một cách tự động. 

Bây giờ, mở cmd lên và chạy một số lệnh sau:


npx create-react-app demo-react-app

cd demo-react-app

npm start


Trình duyệt sẽ tự động mở http://localhost:3000/ và xem kết quả.

3.2. Cài đặt thủ công

Việc cài đặt này sẽ phức tạp hơn, vì bạn phải chọn những thư viện nào cần thiết cho việc cài đặt cho ứng dụng của mình.

Tạo thư mục mới:


mkdir demo-react-app

cd demo-react-app


Tạo file mới package.json:


npm init -y


Và cấu hình file package.json với một số thông tin cơ bản và các thư viện cài thêm:


{

  "name""demo-react-app",

  "version""1.0.0",

  "description""",

  "main""index.js",

  "scripts": {

    "start""node_modules/.bin/webpack-dev-server --mode development --open --hot --port 3000"

  },

  "keywords": [],

  "author""",

  "license""ISC",

  "devDependencies": {

    "babel-core""^5.8.*",

    "babel-loader""^5.3.*",

    "webpack""^1.12.*",

    "webpack-dev-server""^1.10.*"

  },

  "dependencies": {

    "react""^0.13.*"

  }

}

 


Chạy lệnh sau sẽ sinh ra thư mục node_mules chứa tất cả các thư viện đã cài.


npm install


Tạo file mới webpack.config.js và cấu hình như sau:


module.exports = {

    entry: [

        "./index.js"

    ],

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [{

        test: /\.jsx?$/,

        loader: "babel"

        }]

    }

};


Tiếp theo là tạo file mới index.js:


import React from "react";

 

class Hello extends React.Component {

    render() {

        return (

            <h1>Hello, World!</h1>

        );

    }

}

 

React.render(<Hello />document.getElementById("root"));


Sau đó là tạo file mới index.html:


<!DOCTYPE html>

<html>

     <head>

         <title>Demo React App</title>

     </head>

     

     <body>

         <div id="root"></div>

         <script type="text/javascript" src="bundle.js"></script>

     </body>

</html>


Cuối cùng là khởi chạy server:

npm start


Trình duyệt sẽ tự động mở http://localhost:3000/webpack-dev-server/  và thu được kết quả sau:

Cre: TVĐ

- Tech Zone -

Thư giãn chút nào!!!

Bài viết liên quan