× Giới thiệu Lịch khai giảng Tin tức Sản phẩm học viên

ReactJS - Tạo ứng dụng React nhanh chóng tối ưu

09/05/2023 02:13

Như chúng ta đã biết 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. Ứng dụng đơn giản thường bao gồm thư viện React trong phần tập lệnh của nó.

Như chúng ta đã biết 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. Ứng dụng đơn giản thường bao gồm thư viện React trong phần tập lệnh của nó. Trong ứng dụng phức tạp, các nhà phát triển phải chia mã thành nhiều tệp và sắp xếp mã thành một cấu trúc tiêu chuẩn. Ở đây, chuỗi công cụ React cung cấp cấu trúc được xác định trước để khởi động ứng dụng. Ngoài ra, các nhà phát triển có thể tự do sử dụng cấu trúc dự án của riêng họ để tổ chức mã.

Hãy để chúng tôi xem cách tạo ứng dụng React đơn giản cũng như phức tạp –

Sử dụng gói Rollup

Rollup là một trong những gói JavaScript nhỏ và nhanh. Chúng ta hãy tìm hiểu cách sử dụng gói tổng số trong chương này.

Mở một thiết bị đầu cuối và đi đế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, tổng số quản lý chi phí và di chuyển đến thư mục mới được tạo. Ngoài ra, hãy mở thư mục trong trình chỉnh sửa hoặc IDE yêu 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 các thư viện React (react và Reac-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 cài sẵn của nó dưới dạng 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 tổng số và các thư viện plugin của nó dưới dạng phần phụ thuộc phát triển.

npm i -D rollup postcss@8.1 @rollup/plugin-babel 
@rollup/plugin-commonjs @rollup/plugin-node-resolve 
@rollup/plugin-replace rollup-plugin-livereload 
rollup-plugin-postcss rollup-plugin-serve postcss@8.1 
postcss-modules@4 rollup-plugin-postcss

Tiếp theo, cài đặt corejs và thời gian chạy bộ tái tạo để lập trình không đồ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 để định 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 tệp rollup.config.js trong thư mục gốc để định cấu hình gói tổng số.

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 package.json và bao gồm điểm vào 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, thư mục này sẽ chứa tất cả mã nguồn của ứng dụng.

Tiếp theo, tạo một thư mục, các thành phần bên dưới 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
|-- rollup.config.js
|-- .babelrc
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |  |-- mycom.js
   |  |-- mycom.css

Hãy để chúng tôi tạo một thành phần mới, HelloWorld để xác nhận rằng thiết lập của chúng tôi đang hoạt động tốt. Tạo một tệp, HelloWorld.js trong thư mục thành phần 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 tôi, index.js trong thư mục src và gọi thành phần mới được tạo của chúng tôi.

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 chung trong thư mục gốc.

Tiếp theo, tạo một tệp html, index.html (trong thư mục chung*), đâ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 :: 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 xây dựng npm sẽ thực thi tổng số và gói ứng dụng của chúng ta vào 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ã bất cứ khi nào mã nguồn bị 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 

waiting for changes...

Tiếp theo, mở trình duyệt và nhập http://localhost:3000 vào thanh địa chỉ và nhấn enter. ứng dụng phục vụ sẽ phục vụ trang web của chúng tôi như hình dưới đây.

Chào thế giới

Sử dụng gói bưu kiện

Bưu kiện là gói nhanh với cấu hình bằng không. Nó chỉ mong đợi điểm đầu vào của ứng dụng và nó sẽ tự giải quyết sự phụ thuộc và đóng gói ứng dụng. Chúng ta hãy tìm hiểu cách sử dụng gói bưu kiện trong chương này.

Đầu tiên, cài đặt gói bưu kiện.

npm install -g parcel-bundler

Mở một thiết bị đầu cuối và đi đế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, người quản lý chi phí-bưu kiện và di chuyển đến thư mục mới được tạo. Ngoài ra, hãy mở thư mục trong trình chỉnh sửa hoặc IDE 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 các thư viện React (react và Reac-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 cài sẵn của nó dưới dạng 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 để định 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 vào của chúng tôi (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, thư mục này sẽ chứa tất cả mã nguồn của ứng dụng.

Tiếp theo, tạo một thư mục, các thành phần bên dưới 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
   |  |-- mycom.js
   |  |-- mycom.css

Hãy để chúng tôi tạo một thành phần mới, HelloWorld để xác nhận rằng thiết lập của chúng tôi đang hoạt động tốt. Tạo một tệp, HelloWorld.js trong thư mục thành phần 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 tôi, index.js trong thư mục src và gọi thành phần mới được tạo của chúng tôi.

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 chung trong thư mục gốc.

Tiếp theo, tạo một tệp html, index.html (trong thư mục chung ), đâ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 :: Parcel version</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="../src/index.js"></script>
   </body>
</html>

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

npm start

Lệnh xây dựng npm sẽ thực thi lệnh bưu kiện. Nó sẽ đóng gói và phục vụ ứng dụng một cách nhanh chóng. Nó biên dịch lại bất cứ khi nào mã nguồn bị thay đổi và cũng tải lại các thay đổi trong trình duyệt.

> expense-manager-parcel@1.0.0 dev /go/to/your/workspace/expense-manager-parcel 
> parcel index.html Server running at http://localhost:1234 
√ Built in 10.41s.

Tiếp theo, mở trình duyệt và nhập http://localhost:1234 vào thanh địa chỉ và nhấn enter.

Chào thế giới

Để tạo gói sản xuất của ứng dụng nhằm triển khai nó trong máy chủ sản xuất, hãy sử dụng lệnh xây dựng . Nó sẽ tạo một tệp index.js với tất cả mã nguồn được đóng gói trong thư mục dist.

npm run build
> expense-manager-parcel@1.0.0 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                 221 B    1.63s

Tin tức cùng chủ đề

Giải mã mọi điều về thuật ngữ chế độ đồng thời trong React
Tìm hiểu về Prop Drilling trong ReactJS
Kiểm thử phần mềm là gì? Tất cả những điều cơ bản bạn cần biết
Giải đáp: Ngôn ngữ lập trình Python được dùng để làm gì?
React Native là gì? Hướng dẫn chi tiết cho năm 2022