MERN (7) - Chương trình React đầu tiên

Bài trước: MERN (6) - JSX và Babel
-----

2.6       NPX

Đọc thêm về npx ở đây: https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b

Nhắc lại, NPM là chương trình quản lý thư viện trong môi trường Nodejs. NPM gồm hai thành phần: một là kho chứa các thư viện, hay các gói (package) (https://www.npmjs.com/), hai là chương trình chạy ở chế độ dòng lệnh.

Các package trong kho chứa được quản lý bằng cơ sở dữ liệu trực tuyến có tên là npm registry.

Chương trình chạy ở chế độ dòng lệnh dùng để tương tác với kho chứa nhằm cài đặt các package, quản lý phiên bản, quản lý các dependency.

Trong Node, mỗi mô-đun chứa trong một tập tin. Ví dụ các mô-đun Circle, Rectangle và Square chứa trong các tập tin sau: Circle.js, Rectangle.js, Square.js.

Package là một thư viện (hay gói), chứa một hoặc nhiều mô-đun. Ví dụ package Shapes sẽ chứa ba mô-đun là Circle, Rectangle và Square.

Nhiều trường hợp thường dùng lẫn lộn giữa mô-đun và package.

Để tải, cài đặt và chạy một package bằng NPM thì cần phải thực hiện một số bước. Ví dụ:

(tham khảo thêm: https://www.youtube.com/watch?v=GNR5iY0N26U&list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoyp&index=3)

– Để tải, cài đặt package có tên là create-react-app, gõ lệnh sau (tham số -g có nghĩa là global, giúp chạy được lệnh create-react-app ở mọi vị trí trong máy tính):

npm install -g create-react-app

– Sau khi cài đặt được package create-react-app, để tạo một dự án mới có tên my-react-app1, gõ lệnh sau:

create-react-app my-react-app1

Lệnh trên sẽ tải, cài đặt các package cần thiết khác (ví dụ: react, react-dom, react-scripts), các dependence, để tạo ra dự án react có tên là my-react-app1, mở thư mục my-react-app1 để xem các thư mục, tập tin đã được tạo ra.

[Kết quả - nội dung của thư mục my-react-app1]

my-react-app1/

– .git/

– node_modules/

– public/

– src/

– .gitignore

– package.json

– package-lock.json

– README.md

Vậy có cách nào đơn giản hơn để có chạy một package không? NPX đã được tạo ra để đáp ứng yêu cầu này.

NPX (Node Package Execute): cũng giống như NPM, NPX là công cụ dùng để cài đặt và quản lý các package trong môi trường Node.

NPX được đóng gói sẵn trong công cụ NPM từ phiên bản 5.2 trở đi. NPX sẽ chạy các package, dù là package đó đã được cài đặt trong nội bộ dự án, chưa được cài đặt hoặc đoạn mã đang đặt trên Github.

Như vậy NPX sẽ tìm các package đã có sẵn trong dự án, hoặc các package đã được khai báo trong biến môi trường $PATH để chạy. Trong trường hợp không tìm thấy package, NPX sẽ tải và cài đặt tạm thời package để chạy.

Vậy khi nào nên sử dụng NPM, khi nào thì nên sử dụng NPX?

https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm#:~:text=npx%20is%20a%20npm%20package,it%20in%20a%20single%20step.

– Những package nào chỉ cần chạy một lần trong dự án thì nên sử dụng NPX

– Những package nào cần chạy nhiều lần trong dự án thì nên sử dụng NPM

Ví dụ,

Sử dụng package create-react-app để tạo ra một dự án react, thay vì dùng 2 lệnh (npm để cài đặt, và create-react-app để tạo dự án), thì bạn có thể sử dụng duy nhất một lệnh NPX theo cú pháp sau:

npx create-react-app my-react-app1

2.7       Chương trình react đầu tiên

Nhắc lại, React là một thư viện JavaScript được sử dụng để xây dựng phần giao diện người dùng cho một ứng dụng web.

Để xây dựng phần giao diện web bằng React, bạn cần nhúng thư viện React vào dự án. Vì thư viện React gồm nhiều thành phần, nếu nhúng thủ công sẽ phức tạp và mất thời gian.

Thay vì vậy, bạn sẽ sử dụng package có tên là create-react-app để nhúng React vào dự án.

Muốn sử dụng package create-react-app, bạn cần tải và cài đặt package này bằng công cụ NPM hoặc NPX.

Ví dụ,

– Tạo một thư mục mới (ví dụ: learnReact)

– Mở chương trình dòng lệnh (cmd), chuyển vào thư mục learnReact

– Gõ lệnh npx create-react-app my-react-app1 để tải, cài đặt package create-react-app, và tạo dự án có tên my-react-app1

– Chuyển vào thư mục my-react-app1, gõ lệnh npm start để chạy ứng dụng web đã nhúng React. Nếu chạy thành công, bạn sẽ thấy một trang web trên trình duyệt, với đường dẫn mặc định (ví dụ: http://localhost:3000/), nội dung trang web đơn giản chỉ có dòng chữ “Edit src/App.js and save to reload. Learn React”.

– Bạn có thể đổi cổng mặc định (từ 3000) thành một cổng khác (8000), bằng cách sửa nội dung trong tập tin package.json. Trong tập tin package.json, thay thế dòng ["start": "react-scripts start"] thành ["start": "set port=8000 && react-scripts start"]

– Vào cửa sổ dòng lệnh để dừng ứng dụng web đang chạy trước đó bằng lệnh Ctrl + C, sau đó chạy lại ứng dụng bằng lệnh npm start, xem đường dẫn trên trình duyệt để kiểm tra cổng đã được đổi.

Lab 1. Tạo một dự án web có sử dụng React, cấu hình để có thể truy cập bằng cổng 8888.

Các thành phần chính của một dự án có sử dụng React:

Xem thêm [view]

– .git, .gitignore, README.md: là các thành phần của phần mềm Git, dùng để quản lý phiên bản (không liên quan đến React)

– package.json: chứa các khai báo của dự án, như tên dự án, các thư viện, các dependencies, các package dự án đang sử dụng, các đoạn script thực thi

– node_modules: nơi chứa các package của dự án

– public: chứa tập tin index.html, là tập tin được chạy đầu tiên của ứng dụng (website); và các tài nguyên khác

– src: chứa các tập tin mã nguồn

Lưu ý: ở đây bạn mới học cách sử dụng React để xây dựng (develop) giao diện trang web, tuy nhiên để có giao diện sản phẩm, thì bạn phải thực hiện kết xuất ra trang web sản phầm (build).

Thứ tự thực thi các tập tin trong một ứng dụng React: bắt đầu từ index.html > src/index.js > App.js

Làm giao diện bằng React là tạo ra các component, rồi ghép các component này lại với nhau theo mục đích sử dụng.

Lab 2. Tạo trang “Chào bác Tèo”.

[Hướng dẫn]

– Tạo component ChaoBacTeo: trong thư mục src, tạo mới tập tin ChaoBacTeo.js

[ChaoBacTeo.js]

import React from 'react';

 

function ChaoBacTeo() {

    return (

        <div>

            <h1>Chào bác Tèo teo teo!</h1>

            <p>Đây là component đầu tiên</p>

        </div>

    );

}

 

export default ChaoBacTeo;

– Vào tập tin index.js để nhúng component ChaoBacTeo

Nhúng component ChaoBacTeo:

import ChaoBacTeo from './ChaoBacTeo';

Đổ component ChaoBacTeo vào vị trí id= “root”, tại trang index.html,

ReactDOM.render(

  <React.StrictMode>

    <ChaoBacTeo />

  </React.StrictMode>,

  document.getElementById('root')

)

[index.js]

import React from 'react';

import ReactDOM from 'react-dom';

import ChaoBacTeo from './ChaoBacTeo';

import * as serviceWorker from './serviceWorker';

 

ReactDOM.render(

  <React.StrictMode>

    <ChaoBacTeo />

  </React.StrictMode>,

  document.getElementById('root')

);

 

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

 

– Mở chương trình cửa sổ dòng lệnh, chuyển vào thư mục dự án, gõ lệnh “npm start” để xem kết quả.

D:\Code_react\codes\react\myproject\my-react-app1>npm start

– Vì Create React App luôn lấy trình duyệt mặc định của hệ điều hành để chạy, nên muốn xem kết quả trên trình duyệt nào, thì chỉ cần cấu hình lại trình duyệt mặc định của hệ điều hành. Cách làm: bấm phím “cửa sổ” trên bàn phím > gõ Settings > trong cửa sổ Settings gõ default > chọn Choose a default web browser > bấm chuột trái vào mục Web browser, chọn trình duyệt mong muốn.

[Kết quả: http://localhost:8000/]

Chào bác Tèo teo teo!

Đây là component đầu tiên

-----

Cập nhật: [09/07/2020]

-----

Xem thêm: MERN (8) -
Xem thêm: Danh sách bài học

MERN (6) - JSX và Babel

Bài trước: MERN (5) - Tổng quan React và component
-----

1.6.4       JSX và Babel

JSX là viết tắt của JavaScript XML, là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML.

Vậy JSX = JavaScript + XML.

Nhờ có JSX, lập trình viên có thể lập trình với React bằng cú pháp của XML thay vì cú pháp của JavaScript.

Cụ thể, thay vì viết hàm React.createElement() để tạo ra một phần tử DOM bằng JavaScript thì có thể viết bằng cú pháp của XML.

Nhưng trình duyệt thì lại chỉ làm việc được với JavaScript, nên phải “dịch” lại đoạn mã JSX ra mã JavaScript, để làm việc này cần dùng tới công cụ (thư viện) Babel.

Để rõ hơn các ý ở trên, cùng quan sát một số ví dụ sau đây.

Trở lại ví dụ trước, trong tập tin [like_button.js], có khai báo một biến để tham chiếu tới hàm “tạo một phần tử HTML” của React có tên là createElement.

const e = React.createElement;

Sau đó gọi hàm createElement thông qua biến “e” để tạo nút Like, với ba tham số truyền vào:

return e(

      'button',

      { onClick: () => this.setState({ liked: true }) },

      'Like'

    );

Hiểu nôm na, hàm trên sẽ tạo một nút có kiểu là “button”, gắn một hàm xử lý sự kiện bấm chuột (onClick) cho nút này, nút có tên là “Like”.

Xem định nghĩa của hàm React.createElement tại đây: 

https://unpkg.com/react@16.13.1/umd/react.development.js

function createElement(type, config, children) {}

Ngoài việc tạo nút Like bằng cách gọi hàm của React viết bằng JavaScript như trên, cũng có thể tạo nút Like bằng cú pháp JSX (hay XML) như sau:

// tạo nút Like theo cú pháp JSX

return (

  <button onClick={() => this.setState({ liked: true })}>

    Like

  </button>

);

Tạo nút Like có sử dụng JSX và Babel

Phần này sẽ hướng dẫn từng bước để tạo một nút Like bằng JSX và Babel, tuy nhiên đây chỉ là ví dụ minh họa để hiểu cách làm việc của JSX và Babel, trong các dự án thực tế không làm theo cách này, vì nó làm ứng dụng chạy rất chậm.

– Trong tập tin component.html, tạo một phần tử HTML để chứa nút Like (tạo container)

<div id="like_button_container"></div>

– Trong tập tin like_button.js, tạo nút Like bằng cú pháp JSX, đoạn mã sau trả về một React element

 <button onClick={() => this.setState({ liked: true })}>

    Like

  </button>

– Gọi hàm render() của ReactDOM để chuyển một React element thành một nút trong cây DOM (xuất nút Like lên trang HTML), hàm render() cần truyền vào hai tham số: một là React element, hai là container (nút Like sẽ được xuất ở đâu trên trang HTML).

(đọc thêm:  https://reactjs.org/docs/react-dom.html)

ReactDOM.render(

  <button onClick={() => this.setState({ liked: true })}>

    Like

  </button>,

  document.getElementById('like_button_container')

);

– Gọi thư viện Babel để biên dịch mã JSX thành mã JavaScript (thực tế là dịch ra hàm React.createElement)

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

– Biên dịch mã JSX thành JavaScript bằng thư viện Babel

<script type="text/babel" src="like_button.js"></script>

Đoạn mã đầy đủ:

[component.html]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- hiển thị một nút like ở đây -->

    <div id="like_button_container"></div>

    <!-- tải React từ trên mạng về trình duyệt -->

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Gọi thư viện Babel để biên dịch mã JSX -->

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- tải đoạn mã tạo nút Like bằng JSX -->

    <script type="text/babel" src="like_button.js"></script>

</body>

</html>

[like_button.js]

ReactDOM.render(

  <button onClick={() => this.setState({ liked: true })}>

    Like

  </button>,

  document.getElementById('like_button_container')

);

– Mở tập tin component.html bằng giao thức http để xem kết quả (chạy bằng giao thức file sẽ bị lỗi liên quan đến XMLHttpRequest)

http://localhost:8080/jsx/component.html

– Nút Like sẽ xuất hiện trên cửa sổ trình duyệt.

Tham khảo thêm việc chuyển mã từ JSX sang JavaScript (cụ thể là chuyển đoạn mã tạo một phần tử HTML từ JSX sang hàm React.createElement) tại trang web này.

1.6.5       JSX preprocessor

Như đã trình bày ở phần trên, việc tải thư viện Babel về trình duyệt, sau đó dùng Babel để chuyển mã JSX sang hàm React.createElemment sẽ làm cho ứng dụng chạy chậm. Vậy có cách nào để khắc phục điều này không. Giải pháp là chuyển đổi JSX sang hàm React.createElement ngay lúc lập trình.

JSX preprocessor là chương trình giúp chuyển đổi mã JSX sang hàm React.createElement ngay lúc lập trình. Phần sau sẽ hướng dẫn cách cài đặt và chạy chương trình JSX preprocessor.

Cài đặt JSX preprocessor vào dự án

– Tạo thư mục dự án, ví dụ jsxpreprocessor

– Mở chương trình cửa sổ dòng lệnh (cmd), di chuyển tới thư mục jsxpreprocessor, nhập dòng lệnh sau, mục đích là dùng npm để tạo ra tập tin package.json nhằm quản lý các package.

npm init –y

Ví dụ:

D:\Liv\TuHoc\IT\ChuyenNganh\CNPM\MERN\codes\react\jsxpreprocessor>npm init -y

Wrote to D:\Liv\TuHoc\IT\ChuyenNganh\CNPM\MERN\codes\react\jsxpreprocessor\package.json:

{

  "name": "jsxpreprocessor",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

– Dùng npm để cài hai chương trình (gói, hay package) babel-cli và babel-preset-react-app vào dự án

Chương trình babel-cli dùng để chạy lệnh babel trên cửa sổ dòng lệnh, đọc thêm về babel-cli ở đây (https://babeljs.io/docs/en/babel-cli)

Chương trình babel-preset-react-app là bộ quy tắc định sẵn (preset) dùng để chuyển JSX thành JavaScript

Tại cửa sổ dòng lệnh, gõ tiếp lệnh sau,

npm install babel-cli@6 babel-preset-react-app@3

Ví dụ,

D:\Liv\TuHoc\IT\ChuyenNganh\CNPM\MERN\codes\react\jsxpreprocessor>npm install babel-cli@6 babel-preset-react-app@3

…

…

+ babel-cli@6.26.0

+ babel-preset-react-app@3.1.2

added 308 packages from 135 contributors and audited 3622 packages in 41.521s

Quá trình cài đặt trên sẽ cập nhật thông tin trong tập tin package.json, tạo thêm tập tin package-lock.json, tạo thêm thư mục node_modules cùng nội dung bên trong.

– Chạy JSX preprocessor

Trong dự án, tạo thêm thư mục src, trong cửa sổ dòng lệnh, chạy tiếp lệnh sau,

npx babel --watch src --out-dir . --presets react-app/prod

Ví dụ,

D:\Liv\TuHoc\IT\ChuyenNganh\CNPM\MERN\codes\react\jsxpreprocessor>npx babel --watch src --out-dir . --presets react-app/prod

Sẽ tìm hiểu về lệnh npx ở phần sau. Chỉ cần biết là lệnh npx sẽ khởi chạy chương trình tiền xử lý JSX (JSX preprocessor) để chuyển tập tin mã nguồn dạng JSX về dạng JavaScript, cửa sổ dòng lệnh sẽ luôn ở trạng thái chờ.

Trong thư mục src, bạn thử tạo tập tin like_button.js với nội dung sau (viết mã dạng JSX):

[src/like_button.js]

ReactDOM.render(

  <button onClick={() => this.setState({ liked: true })}>

    Like

  </button>,

  document.getElementById('like_button_container')

);

JSX preprocessor sẽ tự động tạo ra tập tin like_button.js trong thư mục jsxpreprocessor với mã nguồn dạng JavaScript. Trình duyệt đã có thể dịch và thực thi được đoạn mã JavaScript này mà không cần phải dùng tới thư viện Babel. Nếu bạn chỉnh sửa tập tin trong [src/like_button.js], nội dung trong [jsxpreprocessor/ like_button.js] cũng sẽ được cập nhật.

[jsxpreprocessor/ like_button.js]

var _this = this;

ReactDOM.render(React.createElement(

  'button',

  { onClick: function onClick() {

      return _this.setState({ liked: true });

    } },

  'Like'

), document.getElementById('like_button_container'));

-----

Cập nhật: [27/04/2020]

-----

Xem thêm: MERN (7) - Chương trình React đầu tiên
Xem thêm: Danh sách bài học