EN VI
Series: Tìm hiểu học ReactJS trong 1 nốt nhạc

ReactJS - Tạo một ứng dụng React như thế nào?

2023-05-26 23:23:36

Như chúng ta đã học trước đó, thư viện React có thể được sử dụng trong cả ứng dụng đơn giản và phức tạp. Trong ứng dụng đơn giản, thư viện React thường được bao gồm trong phần mã script của trang web. Trong ứng dụng phức tạp, nhà phát triển phải chia mã thành nhiều tệp và tổ chức mã vào một cấu trúc chuẩn. Ở đây, công cụ React toolchain cung cấp cấu trúc được định nghĩa trước để khởi động ứng dụng. Ngoài ra, các nhà phát triển cũng có thể sử dụng cấu trúc dự án của riêng họ để tổ chức mã.

Hãy xem cách tạo ứng dụng React đơn giản và phức tạp như thế nào:

  • Ứng dụng đơn giản sử dụng CDN
  • Ứng dụng phức tạpcó thể được tạo bằng cách sử dụng React Create App cli
  • Ứng dụng phức tạp có thể được tạo bằng phương pháp tùy chỉnh.

Sử dụng trình đóng gói Rollup (Rollup bundler)

Rollup là một trong các trình đóng gói JavaScript nhỏ và nhanh. Hãy tìm hiểu cách sử dụng trình đóng gói Rollup trong chương này.

Mở một cửa sổ terminal và di chuyển đến vị trí làm việc của bạn.

cd /go/to/your/workspace

Tiếp theo, tạo một thư mục mới có tên là "expense-manager-rollup" và di chuyển đến thư mục vừa tạo. Bạn cũng có thể mở thư mục này trong trình soạn thảo hoặc IDE ưa thích của bạn.

mkdir expense-manager-rollup
cd expense-manager-rollup

Tiếp theo, tạo và khởi tạo dự án.

npm init -y

Tiếp theo, cài đặt thư viện React (react và react-dom).

npm install react@^17.0.0 react-dom@^17.0.0 --save

Tiếp theo, cài đặt babel và các thư viện preset của nó như là sự phụ thuộc phát triển.

npm install @babel/preset-env @babel/preset-react 
@babel/core @babel/plugin-proposal-class-properties -D

Tiếp theo, cài đặt rollup và các thư viện plugin của nó như là sự phụ thuộc phát triển.

npm i -D rollup [email protected] @rollup/plugin-babel 
@rollup/plugin-commonjs @rollup/plugin-node-resolve 
@rollup/plugin-replace rollup-plugin-livereload 
rollup-plugin-postcss rollup-plugin-serve [email protected] 
postcss-modules@4 rollup-plugin-postcss

Tiếp theo, cài đặt corejs và regenerator runtime để sử dụng cho lập trình bất đồng bộ.

npm i regenerator-runtime core-js

Tiếp theo, tạo một tệp cấu hình babel, .babelrc trong thư mục gốc để cấu hình trình biên dịch babel.

{
   "presets": [
      [
         "@babel/preset-env",
         {
            "useBuiltIns": "usage",
            "corejs": 3,
            "targets": "> 0.25%, not dead"
         }
      ],
      "@babel/preset-react"
   ],
   "plugins": [
      "@babel/plugin-proposal-class-properties"
   ]
}

Tiếp theo, tạo một tệp cấu hình rollup, rollup.config.js trong thư mục gốc để cấu hình trình đóng gói Rollup. Nội dung của tệp này như sau:

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss'

export default {
   input: 'src/index.js',
   output: {
      file: 'public/index.js',
      format: 'iife',
   },
   plugins: [
      commonjs({
         include: [
            'node_modules/**',
         ],
         exclude: [
            'node_modules/process-es6/**',
         ],
      }),
      resolve(),
      babel({
         exclude: 'node_modules/**'
      }),
      replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      postcss({
         autoModules: true
      }),
      livereload('public'),
      serve({
         contentBase: 'public',
         port: 3000,
         open: true,
      }), // index.html should be in root of project
   ]
}

Tiếp theo, cập nhật tệp package.json và bao gồm điểm nhập của chúng tôi (public/index.js và public/styles.css) và lệnh để xây dựng và chạy ứng dụng.

...
"main": "public/index.js",
"style": "public/styles.css",
"files": [
   "public"
],
"scripts": {
   "start": "rollup -c -w",
   "build": "rollup"
},
...

Tiếp theo, tạo một thư mục src trong thư mục gốc của ứng dụng, chứa mã nguồn của ứng dụng.

Tiếp theo, tạo một thư mục components trong thư mục src để bao gồm các thành phần React của chúng tôi. Ý tưởng là tạo hai tệp, <component.js> để viết mã logic của thành phần và <component.css> để bao gồm các kiểu cụ thể cho thành phần.

Cấu trúc cuối cùng của ứng dụng sẽ như sau:

|-- package-lock.json
|-- package.json
|-- rollup.config.js
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

Hãy tạo một thành phần mới, HelloWorld để xác nhận cài đặt của chúng ta hoạt động bình thường. Tạo một tệp, HelloWorld.js trong thư mục components và viết một thành phần đơn giản để phát ra thông báo Hello World.

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

Tiếp theo, tạo tệp chính của chúng ta, index.js trong thư mục src và gọi thành phần mới được tạo.

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
   <React.StrictMode>
      <HelloWorld />
   </React.StrictMode>,
   document.getElementById('root')
);

Tiếp theo, tạo một thư mục public trong thư mục gốc.

Tiếp theo, tạo một tệp html, index.html (trong thư mục public), đó sẽ là điểm nhập của ứng dụng.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager :: Rollup version</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

Tiếp theo, xây dựng và chạy ứng dụng.

npm start

Lệnh npm build sẽ thực thi rollup và đóng gói ứng dụng của chúng tôi thành một tệp duy nhất, tệp dist/index.js và bắt đầu phục vụ ứng dụng. Lệnh dev sẽ biên dịch lại mã nguồn mỗi khi mã nguồn được thay đổi và cũng tải lại các thay đổi trong trình duyệt.

> expense-manager-rollup@1.0.0 build /path/to/your/workspace/expense-manager-rollup 
> rollup -c 
rollup v2.36.1 
bundles src/index.js → dist\index.js... 
LiveReload enabled 
http://localhost:10001 -> /path/to/your/workspace/expense-manager-rollup/dist 
created dist\index.js in 4.7s 
...

Cuối cùng, mở trình duyệt và nhập http://localhost:3000 vào thanh địa chỉ và nhấn enter. Ứng dụng serve sẽ hiển thị "Hello World!" lên trình duyệt của bạn.


Sử dụng trình đóng gói Parcel (Parcel bundler)

Parcel là một trình đóng gói nhanh chóng với không cần cấu hình. Nó chỉ mong đợi điểm nhập của ứng dụng và nó sẽ tự động giải quyết phụ thuộc và đóng gói ứng dụng. Hãy tìm hiểu cách sử dụng trình đóng gói Parcel trong chương này.

Đầu tiên, cài đặt trình đóng gói Parcel.

npm install -g parcel-bundler

Mở một cửa sổ terminal và di chuyển đến không gian làm việc của bạn.

cd /go/to/your/workspace

Tiếp theo, tạo một thư mục expense-manager-parcel và chuyển đến thư mục mới được tạo. Bạn cũng có thể mở thư mục trong trình biên tập hoặc môi trường phát triển yêu thích của bạn.

mkdir expense-manager-parcel 
cd expense-manager-parcel

Tiếp theo, tạo và khởi tạo dự án.

npm init -y

Tiếp theo, cài đặt thư viện React (react và react-dom).

npm install react@^17.0.0 react-dom@^17.0.0 --save

Tiếp theo, cài đặt babel và các thư viện preset của nó như một phụ thuộc phát triển.

npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D

Tiếp theo, tạo một tệp cấu hình babel, .babelrc trong thư mục gốc để cấu hình trình biên dịch babel.

{
   "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
   ],
   "plugins": [
      "@babel/plugin-proposal-class-properties"
   ]
}

Tiếp theo, cập nhật package.json và bao gồm điểm nhập của chúng ta (src/index.js) và các lệnh để xây dựng và chạy ứng dụng.

... 
"main": "src/index.js", 
"scripts": {
   "start": "parcel public/index.html",
   "build": "parcel build public/index.html --out-dir dist" 
},

Tiếp theo, tạo một thư mục src trong thư mục gốc của ứng dụng, chứa toàn bộ mã nguồn của ứng dụng.

Tiếp theo, tạo một thư mục components trong src để bao gồm các thành phần React của chúng ta. Ý tưởng là tạo hai tệp, <component.js> để viết logic thành phần và <component.css> để bao gồm các kiểu cụ thể của thành phần.

Cấu trúc cuối cùng của ứng dụng sẽ như sau:

|-- package-lock.json
|-- package.json
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
  |-- package-lock.json
|-- package.json
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

Hãy tạo một thành phần mới, HelloWorld để xác nhận cài đặt của chúng ta hoạt động bình thường. Tạo một tệp HelloWorld.js trong thư mục components và viết một thành phần đơn giản để phát ra thông báo Hello World.

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

Sau đó, chúng ta sẽ tạo file chính index.js trong thư mục src và gọi component HelloWorld vừa tạo.

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
   <React.StrictMode>
      <HelloWorld />
   </React.StrictMode>,
   document.getElementById('root')
);

Tiếp theo, ta sẽ tạo một thư mụcpublic trong thư mục gốc của ứng dụng.

Sau đó, ta sẽ tạo một file html là index.html (trong thư mục public), đây sẽ là điểm vào của ứng dụng.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense Manager :: Phiên bản Parcel</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="../src/index.js"></script>
   </body>
</html>

Tiếp theo, ta sẽ build và chạy ứng dụng bằng lệnh npm start. Lệnh này sẽ thực thi lệnh parcel để build và chạy ứng dụng. Parcel sẽ bundle và phục vụ ứng dụng trên fly, tức là sẽ tự động biên dịch lại mã nguồn khi có sự thay đổi và tải lại trang web để cập nhật những thay đổi đó.

[email protected] dev /go/to/your/workspace/expense-manager-parcel
parcel index.html Server running at http://localhost:1234
√ Built in 10.41s.

Sau đó, chúng ta sẽ mở trình duyệt và nhập địa chỉ http://localhost:1234 vào thanh địa chỉ và nhấn Enter.

Để tạo bundle sản phẩm của ứng dụng để triển khai trên máy chủ sản phẩm, chúng ta sử dụng lệnh build. Lệnh này sẽ tạo một file index.js chứa toàn bộ mã nguồn đã được bundle, trong thư mục dist.

npm run build

> [email protected] build /go/to/your/workspace/expense-manager-parcel
> parcel build index.html --out-dir dist

√ Built in 6.42s.

dist\src.80621d09.js.map    270.23 KB     79ms
dist\src.80621d09.js        131.49 KB    4.67s
dist\index.html 2

Sau khi chạy lệnh, chúng ta sẽ có một thư mục dist chứa file index.js và các file khác cần thiết để chạy ứng dụng.

Rating: 10 (1 Votes)
ReactJS - Kiến trúc (Architecture)
ReactJS - JSX là gì? và JSX hoạt động như thế nào?
Tags
Hướng dẫn
Tự học lập trình
Guide
Reactjs
Pinned Posts
Top 5 Best High CPM Ads Networks For Publishers In 2023
Tags: ads,  Publishers,  Ads Networks
2022-05-24 10:11:32
HawkHost Coupon 2023 – Hawk Hosting Discount Code Up to 40% Lifetime Update Every Day
Tags: Server,  host,  cloud
2022-04-15 16:23:09
Author
Avatar
1206dev
Admin Lv 11
Join Date: 2022-04-12
Keyword
ReactJS - Tạo một ứng dụng React như thế nào?, Hướng dẫn, Tự học lập trình, Tutorial, Guide, ReactJS
Comment

Login

Forgot Your Password?

Create Account

Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login