Thiết lập môi trường cho React, Phần 4

Trong quá khứ React từng được biết đến là rất khó để bắt đầu tạo ra những ứng ụng, khi bạn phải thực sự hiểu cách tự mình cấu hình các công cụ. Điều này vẫn thế ngay cả trước khi bạn viết một dòng code cho React.

Công cụ create-react-app hỗ trợ vấn đề này rất nhiều vì nó cho phép mọi người tạo ra một ứng dụng React hoạt động tốt mà không cần yêu cầu bất kỳ kiến ​​thức nào về cách cấu hình những công cụ xây dựng. Thực tế là create-react-app sẽ ổn cho đa số ứng dụng, đặc biệt nếu bạn mới làm quen với React.

Khi bạn có nhiều kinh nghiệm hơn với React, bạn có lẽ có những yêu cầu nhất định cho ứng dụng của mình, cần thay đổi cấu hình của cái file cài đặt. Trong trường hợp này, bạn cần có thể tự tay thiết lập công cụ xây dựng của React, khi create-react-app ẩn những thông số này theo mặc định.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thiết lập ứng dụng React bằng cách tự cấu hình công cụ xây dựng theo cách chúng tôi thực hiện. Điều này hy vọng sẽ cho bạn sự tự tin để tiếp tục và thử nghiệm với các thiết lập phức tạp hơn.

Dù có vẻ khá nhọc nhằn lúc đầu, nhưng bạn sẽ tận hưởng những lợi ích của việc kiểm soát toàn diện mỗi thông số cấu hình. Và bạn có thể quyết định chính xác công cụ nào được kèm theo trong ứng dụng của bạn, nó có thể biến đổi qua mỗi dự án. Cách tiếp cận này cũng cho phép bạn dễ dàng kết hợp với những công cụ xây dựng mới khi chúng đi cùng (thường như vậy).

Bạn đã sẵn sàng để tạo một ứng dụng React mới hoàn toàn từ đầu? Làm thôi nào.

Tạo cấu trúc của file App

Để demo cách thiết lập ứng dụng React thông qua tự tay cấu hình của công cụ xây dựng, chúng ta sẽ xây dựng cùng ứng dụng đơn giản giống với các bài hướng dẫn trước trong loạt bài này.

Bắt đầu bằng cách tạo một thư mục được gọi là my-first-components-build, và sau đó mở một cửa sổ command-line ngay tại thư mục này.

Gõ npm init để tạo một file package.json. File này sẽ chứa tất cả thông tin về các công cụ được sử dụng để tạo ứng dụng của bạn, kèm theo những thiết lập tương tác. Chấp nhận tất cả cài đặt mặc định và tiếp tục nhấn Enter (khoảng mười lần) cho đến khi hoàn tất.

Nếu bạn chấp nhận tất cả các thiết lập mặc định, package.json sẽ trông như sau:

1

{

2

  "name": "my-first-components-build",

3

  "version": "1.0.0",

4

  "description": "",

5

  "main": "index.js",

6

  "scripts": {

7

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

8

  },

9

  "author": "",

10

  "license": "ISC"

11

}

Giờ chúng ta cần thêm vào mã React và ReactDOM vào dự án. Chúng ta thực hiện chúng qua npm, gói quản lý package cho Node.js

Trong cùng một thư mục command-line, hãy nhập:

1

npm install --save react react-dom

Nó sẽ cài đặt cả React và ReactDom, cộng với bất kỳ dependencies nào được hai module này yêu cầu. Bạn sẽ nhận thấy chúng ta bây giờ có một thư mục mới tên node_modules là nơi các module được thêm vào.

Nếu bạn xem file package.json, một thuộc tính phụ thuộc mới đã được thêm vào có chứa thông tin về các module của node mà chúng tôi vừa cài đặt.

1

"dependencies": {

2

  "react": "^15.6.1",

3

  "react-dom": "^15.6.1"

4

}

Điều này là kết quả khi chúng tôi đã chỉ định --save option trong lệnh cài đặt NPM của chúng tôi. Nó thông báo với npm rằng chúng tôi muốn theo dõi các dependencies đã được cài đặt cho dự án. Điều này rất quan trọng nếu chúng ta muốn chia sẻ dự án này.

Về cơ bản, vì thư mục node_modules quá lớn, bạn không muốn cố gắng chia sẻ trực tiếp. Thay vào đó, bạn chia sẻ dự án của bạn ở trạng thái không có thư mục node_modules. Sau đó, khi ai đó tải xuống dự án của bạn, tất cả những gì họ phải làm là gõ npm install để sao chép thiết lập trực tiếp từ package.json.

Lưu ý: Trong phiên bản npm 5.x, các module được cài đặt sẽ tự động lưu vào package.json. Bạn không còn phải tự định rõ --save option.

Bên trong thư mục my-first-components-build, tạo thư mục src mới, và thêm một tệp index.js vào nó. Chúng tôi sẽ quay lại sau khi chúng tôi bắt đầu tạo ứng dụng Phản hồi của chúng tôi, khi chúng tôi đã định cấu hình các tệp thiết lập dự án.

Thêm file index.html bên trong cùng thư mục với đoạn code dưới đây:

1

<!DOCTYPE html>

2

<html lang="en">

3

    <head>

4

        <meta charset="UTF-8">

5

        <title>Creating a React App Manually, Using Build Tools</title>

6

    </head>

7

    <body>

8

        <div id="app"></div>

9

    </body>

10

</html>

Chúng tôi muốn có thể biên dịch ứng dụng của chúng tôi sang một file JavaScript duy nhất và cũng sử dụng các class và module JSX và ES6. Để làm được điều này, chúng ta cần phải cài đặt các module Webpack và Babel thông qua npm.

Hãy cài đặt Babel trước tiên. Gõ dòng lệnh sau vào cửa sổ command-line:

1

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Phần này sẽ cài đặt tất cả các module cần thiết cho Babel để biên dịch code ES6 và JSX về chuẩn JavaScript.

Bây giờ, hãy cài đặt Webpack, một lần nữa thông qua command-line:

1

npm install --save-dev html-webpack-plugin webpack webpack-dev-server

Cài đặt này sẽ cài đặt tất cả các mô-đun cần thiết cho Webpack, một máy chủ web cục bộ và cho phép chúng tôi điều hướng Webpack để tạo file index.html động trong thư mục public dựa trên file chúng tôi đã thêm vào thư mục src. Chúng tôi cũng có thể bổ sung một tham chiếu vào file JavaScript kèm theo bên trong file HTML mỗi khi ứng dụng được dựng lại.

Sau khi các module mới này đã được cài đặt, file package.json của bạn sẽ giống như vậy:

1

"dependencies": {

2

  "react": "^15.6.1",

3

  "react-dom": "^15.6.1"

4

},

5

"devDependencies": {

6

  "babel-core": "^6.25.0",

7

  "babel-loader": "^7.1.0",

8

  "babel-preset-env": "^1.5.2",

9

  "babel-preset-react": "^6.24.1",

10

  "html-webpack-plugin": "^2.28.0",

11

  "webpack": "^3.0.0",

12

  "webpack-dev-server": "^2.5.0"

13

}

Tuy nhiên, lần này, gói Webpack và phần dependency Babel được lưu vào package.json dưới dạng dev dependencies.

Điều này có nghĩa là những module cụ thể này cần thiết trong giai đoạn phát triển (xây dựng) của ứng dụng. Mặt khác, những dependencies (như React và ReactDOM) được yêu cầu trong khi thực thi và do đó sẽ được kèm theo cùng với phần code thay đổi của ứng dụng.

Cấu hình của Webpack

Để Webpack xây dựng ứng dụng của chúng tôi và gộp nó vào một file duy nhất, chúng tôi cần phải xét cấu hình cài đặt. Trong thư mục ứng dụng gốc của bạn, tạo file webpack.config.js, được dùng để lưu thiết lập cụ thể của Webpack.

Chúng tôi cần Webpack để làm 3 việc:

• Biên dịch ES6/JSX thành JavaScript (thông qua Babel).
• Xây dựng ứng dụng, và đóng gói vào một file JavaScript duy nhất.
• Tạo file index.html, và trong nội dung thêm một tham chiếu đến file JavaScript đã đóng gói của chúng tôi.

Bên trong file webpack.config.js, bổ sung:

1

var path = require('path');

2

var HtmlWebpackPlugin = require( 'html-webpack-plugin' );

3

4

module.exports = {

5

  entry: './src/index.js',

6

  output: {

7

    path: path.resolve(__dirname, 'public'),

8

    filename: 'build.js'

9

  },

10

  module: {

11

    rules: [

12

      { test: /\.(js)$/, use: 'babel-loader' }

13

    ]

14

  },

15

  plugins: [new HtmlWebpackPlugin({

16

    template: 'src/index.html'

17

  })]

18

}

Đừng lo lắng quá nhiều về cú pháp được sử dụng ở đây; chỉ cần hiểu tổng quan về những điều đang diễn ra.

Tất cả những gì chúng tôi đang làm là xuất ra một đối tượng JavaScript với một số thuộc tính để kiểm soát cách Webpack xây dựng ứng dụng của chúng tôi. Thuộc tính entry xác định điểm xuất phát của ứng dụng React của chúng tôi, đó là index.js. Tiếp theo, thuộc tính output định nghĩa đường dẫn của kết quả, và filename, tên của file JavaScript đi kèm.

Về chính quá trình xây dựng, chúng tôi muốn Webpack vượt qua tất cả các file JavaScript thông qua trình biên dịch Babel để chuyển đổi JSX / ES6 về JavaScript chuẩn mực. Chúng tôi làm điều này thông qua các thuộc tính module. Nó đơn giản chỉ định một biểu thức chính quy chạy phần biến đổi Babel chỉ dành cho các file JavaScript.

Để hoàn tất việc cài đặt Babel, chúng ta cần thêm một mục nhập vào tệp package.json để xác định phần nào của chuyển đổi Babel mà chúng tôi muốn thực hiện trên các file JavaScript của chúng tôi. Mở gói package.json và thêm thuộc tính babel:

1

"babel": {

2

    "presets": [ "env", "react" ]

3

},

Điều này sẽ chạy hai phần chuyển đổi trên mỗi file JavaScript trong dự án của chúng tôi. Chuyển đổi env sẽ chuyển ES6 JavaScript thành JavaScript chuẩn để tương thích với tất cả các trình duyệt: Và chuyển đổi react sẽ biên dịch mã JSX sang các hàm gọi createElement(), đó là mã JavaScript hoàn toàn hợp lệ.

Giờ trở lại file webpack.onconfig.js

Thuộc tính cuối cùng chúng ta có là plugins, chứa bất kỳ vận hành đặc biệt nào chúng ta muốn thực hiện trong quá trình xây dựng. Trong trường hợp của chúng tôi, chúng tôi cần Webpack để tạo ra một file index.html bao gồm một tham chiếu đến file JavaScript đã đóng gói. Chúng tôi cũng chỉ ra một file index.html đang có (được tạo ra trước đó) để sử dụng làm template để tạo file index.html sau cùng đã được đóng gói.

Build (thành file thực thi) và Kiểm tra

Hãy bổ sung thuộc tính script vào package.json. Nhân tiện, bạn có thể thêm bất kể bao nhiều scripts theo ý muốn, để thực hiện các nhiệm vụ khác nhau. Bây giờ, chúng ta chỉ muốn có thể chạy Webpack, vì vậy trong package.json xóa script "test" và thay thế bằng:

1

"scripts": {

2

  "build": "webpack",

3

},

Trước khi kiểm tra quá trình build, chúng ta hãy thêm một React component vào index.js để chúng ta có cái để render.

1

import React, { Component } from 'react';

2

import ReactDOM from 'react-dom';

3

4

class App extends Component {

5

    render() {

6

        return (

7

            <div>

8

                <h2>Hello World!</h2>

9

            </div>

10

        )

11

    }

12

}

13

14

ReactDOM.render( <App />, document.querySelector( '#app' ) );

Điều này sẽ rất quen thuộc nếu bạn đã theo dõi các hướng dẫn trước đây trong loạt bài này.

Từ command-line, chạy:

1

npm run build

Sau một thời gian ngắn, bạn sẽ thấy một thư mục public được tạo bên trong thự mục my-first-components-build, chứa index.html và index.js. Mở index.html để xem kết quả của phần test của ứng dụng React.

Lưu ý rằng file JavaScript đóng gói đã được bổ sung vào cho chúng tôi và thành phần test đã hiển thị thành phần tử DOM chính xác.

Tự động hoá quá trình biên dịch

Khi bạn bắt đầu thực hiện nhiều thay đổi cho ứng dụng của mình, bạn sẽ sớm biết được rằng thật là tẻ nhạt khi phải tự mình chỉnh sửa file, lưu nó lại, chạy lệnh build và reload (nạp lại) cửa sổ trình duyệt để xem các thay đổi.

May mắn thay, chúng ta có thể sử dụng máy chủ mini từ Webpack mà chúng tôi đã cài đặt trước đó để tự động hóa quá trình này. Thêm đoạn script thứ hai vào package.json để thuộc tính 'scripts' trông như sau:

1

"scripts": {

2

  "build": "webpack",

3

  "dev": "webpack-dev-server --open"

4

},

Giờ chạy lệnh:

1

npm run dev

Sau vài giây, bạn sẽ thấy một tab trình duyệt mới được mở với ứng dụng web của bạn đang chạy. URL hiện đang trỏ đến một máy chủ cục bộ thay vì dẫn đến một file cục bộ cụ thể. Thực hiện một thay đổi nhỏ cho index.js trong thư mục src và lưu lại. Lưu ý rằng ứng dụng của bạn tự động cập nhật trong trình duyệt gần như ngay lập tức để hiển thị những thay đổi mới.

Webpack sẽ theo dõi các file trong ứng dụng của bạn để nhận biết các thay đổi. Khi có thay đổi nào được thực hiện và được lưu lại, Webpack sẽ biên dịch lại ứng dụng của bạn và tự động nạp lại cửa sổ trình duyệt với các phần cập nhật mới.

Lưu ý: Máy chủ Webpack sẽ không build lại ứng dụng của bạn - thay vào đó lưu các thay đổi trong bộ nhớ cache, điều đó lý giải vì sao nó có thể cập nhật cho trình duyệt một cách nhanh chóng. Điều này có nghĩa là bạn sẽ không thấy các bản cập nhật trong thư mục public. Trên thực tế, bạn có thể xoá hoàn toàn thư mục này khi sử dụng máy chủ Webpack.

Khi bạn cần xây dựng ứng dụng của mình, bạn chỉ cần chạy npm run build để tạo lại thư mục public (nếu cần) và xuất các file ứng dụng của bạn, sẵn sàng để phân phối.

Hoàn tất ứng dụng của chúng ta

Để hoàn thành, hãy thêm hai component đơn giản mà chúng tôi đã sử dụng trong những bài dẫn trước.

Thêm hai file mới trong thư mục gốc của dự án MyFirstComponent.js và MySecondComponent.js vào thư mục chính app. Trong MyFirstComponent.js, thêm mã sau:

1

import React, { Component } from 'react';

2

3

class MyFirstComponent extends Component {

4

    render() {

5

        return (

6

            <p>{this.props.number}: Hello from React!</p>

7

        )

8

    }

9

}

10

11

export default MyFirstComponent;

Và trong file MySecondComponent.js, thêm vào:

1

import React, { Component } from 'react';

2

3

class MySecondComponent extends Component {

4

    render() {

5

        return (

6

            <p>{this.props.number}: My Second React Component.</p>

7

        )

8

    }

9

}

10

11

export default MySecondComponent;

Để sử dụng những components này trong ứng dụng của chúng ta, cập nhật file index.js thành như sau:

1

import React, { Component } from 'react';

2

import ReactDOM from 'react-dom';

3

import MyFirstComponent from './MyFirstComponent';

4

import MySecondComponent from './MySecondComponent';

5

6

class App extends Component {

7

    render() {

8

        return (

9

            <div>

10

                <h2>My First React Components!</h2>

11

                <MyFirstComponent number="1st" />

12

                <MySecondComponent number="2nd" />

13

            </div>

14

        )

15

    }

16

}

17

18

ReactDOM.render( <App />, document.querySelector( '#app' ) );

Điều này dẫn đến kết quả tương tự như chúng ta đã thấy trước đây, ngoại trừ là lần này chúng tự tay thực hiện 100% thiết lập cho ứng dụng React.

Những template có thể dùng lại của thiết lập cho React

Một khi bạn đã trải qua quá trình tự tay cài đặt này một lần và đã tạo các file thiết lập cấu hình, thì đây sẽ là lần duy nhất bạn làm việc này từ đầu. Với các dự án trong tương lai, bạn có thể sử dụng lại một hoặc nhiều file cài đặt hiện có của mình, làm cho việc thiết lập các dự án React tiếp theo nhanh hơn nhiều.

Thậm chí bạn thậm chí có thể tạo ra bộ sưu tập những template React được build theo mục đích (purpose-built) và lưu chúng trên GitHub. Sau đó sẽ rất đơn giản để clone một dự án khởi động và chạy npm init để cài đặt các module Node.js theo yêu cầu.

Tải về và Cài Đặt Dự Án

Dự án React cho bài hướng dẫn này có sẵn để tải về, vì thế bạn có thể khám phá nó hoặc dùng nó như template cho một dự án mới.

Nhấp vào liên kết Download Attachment ở sidebar bên phải để truy cập vào file .zip dự án. Sau khi tải về, hãy giải nén và mở cửa sổ command-line. Đảm bảo rằng bạn đang ở vị trí thư mục my-first-components-build.

Gõ vào những lệnh sau để cài đặt và biên dịch ứng dụng React:

1

npm install

2

npm run dev

Lệnh đầu tiên sẽ tải tất cả các module Node.js cần thiết cho dự án, mất một hoặc hai phút. Lệnh thứ hai sẽ biên dịch ứng dụng React và chạy máy chủ web, hiển thị nó trong trình duyệt.

Hãy thử thực hiện một số thay đổi đối với ứng dụng React của bạn. Mỗi lần bạn lưu thay đổi, ứng dụng của bạn sẽ được biên dịch lại và cửa sổ trình duyệt sẽ tự động cập nhật để hiển thị phiên bản ứng dụng mới của bạn.

Khi bạn muốn build dự án để phân phối, chỉ cần chạy lênh sau đây:

1

npm run build

Tổng kết

Trong loạt hướng dẫn này, chúng tôi đã xem qua một số cách bạn có thể tiếp cận cách thiết lập những ứng dụng React, mỗi cái đòi hỏi trước nhiều nhiệm vụ thiết lập. Nhưng lợi ích lâu dài là bạn có nhiều quyền kiểm soát và tính linh hoạt hơn qua việc dự án được thiết lập một cách chính xác.

Một khi đã thuần thục việc thiết lập ứng dụng React, tôi nghĩ bạn sẽ tìm thấy niềm vui khi phát triển ứng dụng. Tôi sẽ rất muốn thấy phần bình luận của bạn. Hãy cho tôi biết bạn dự đình xây dựng gì tiếp theo với React!