React là một thư viện Javascript, bởi Facebook, thường được sử dụng để xây dựng giao diện người dùng. Nó cung cấp nhiều lợi ích nhưng một trong những điểm yếu nhất là khó khăn trong việc học và tiếp cận ban đầu. Khi tôi bắt đầu với React, một trong những điều khiến tôi hơi buồn là hầu hết các hướng dẫn đều bỏ qua cách thiết lập môi trường React

Do đó, bài viết này sẽ hướng dẫn cho những người mới bắt đầu học React cách thiết lập môi trường React từ đầu. Tôi sẽ cố gắng viết bài hướng dẫn này một cách đơn giản và dễ hiểu. Chúng ta sẽ sử dụng:

1. Webpack – Một module bundler
2. Babel – Một Javascript Compiler
3. ES6 – chuẩn mới Javascript
4. Yarn – Quản lý Package
5. React

Khi kết thúc bài hướng dẫn này, chúng ta sẽ có một thiết lập cho môi trường React và chúng ta sẽ có một trang web đơn giản hiển thị Hello World

Yêu cầu trước tiên

Chúng tôi yêu cầu cài đặt Yarn và Node trước tiên trên máy tính của bạn trước khi chúng ta bắt đầu.

Như đã nói ở trên, chúng ta sẽ sử dụng Yarn để quản lý các Package. Nó hơi giống npm và có hầu hết các câu lệnh được cung cấp bởi npm. Nó cũng đi kèm nhiều tính năng mà npm không cung cấp. Để giúp cho bạn hiểu, đây là những lý do chính chúng ta sử dụng yarn trong bài viết này:

1. Nếu bạn đã cài đặt một package trước đây, bạn có thể cài đặt lại nó mà không cần kết nối internet. Ngoài việc bạn có thể cài đặt các gói offline, nó cũng giúp cải thiện tốc độ cài đặt các package của bạn.
2. Nó đảm bảo cho việc bạn cài đặt trên tất cả các máy là giống nhau. Các dependency được cài đặt giống nhau và chính xác trên bất kỳ máy nào

Để hiểu rõ hơn thì bạn có thể đọc các tài liệu của Yarn

Đối với người dùng Mac OS, thì câu lệnh bên dưới đây là đủ để cài yarn và tương tự bạn có thể vào trang của Yarn để xem hướng dẫn giúp bạn cài đặt Yarn trên OS của bạn

> brew update
> brew install yarn

Bắt đầu

Mở terminal và tạo một thư mục mới. Bạn có thể đặt tên của project mà bạn muốn. Chuyển vào bên trong thư mục và thiết lập cho dự án bằng cách chạy yarn init

yarn init giống như npm init sẽ đưa ra các gợi ý, bạn chỉ việc bầm enter cho đến khi kết thúc hoặc thiết lập như bạn mong muốn:

> mkdir hello-world-react
> cd hello-world-react
> yarn init

Khi yarn init chạy xong thì bạn sẽ nhận được thông báo.Trong thư mục ‘hello-world-react’, bạn sẽ có một file mới là package.json giống như khi bạn chạy npm init

Cấu hình và cài đặt Webpack

Tiếp theo, chúng ta sẽ cài đặt Webpack và các Dependency

> yarn add webpack webpack-dev-server path

bên trong ‘hello-world-react’, một file mới yarn.lock được tạo.  Yarn sử dụng file này để xác định (lock) chính xác các Dependency cần sử dụng trên các máy khác, bạn thực sự không cần quan tâm đến file này bởi vì nó sẽ được sinh ra một cách tự động.

Chúng ta đã cài đặt xong Webpack, nên chúng ta cần một file cấu hình để chỉ dẫn cho nó những việc cần làm. Tạo một file mới, webpack.config.jstrên thư mục project và mở nó bằng text editor mà bạn thích

> touch webpack.config.js

Chúng ta sau đấy có thể cập nhập cấu hình file như sau:

/*
    ./webpack.config.js
*/
const path = require('path');
module.exports = {
  entry: './client/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }, {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
}

Về cơ bản, để chạy được một instace của webpack, chúng ta cần chỉ định cho entry và output

• entry: Chỉ định file đầu vào nơi mà bundler bắt đầu quá trình đóng gói
• output: Chỉ đinh nơi mà các javascript code đóng gói sẽ được lưu

Tuy nhiên, chúng ta cũng có các loader. Đây là những cái cần thiết bởi vì chúng ta muốn trình duyệt chúng ta sử dụng có thể thông dịch, chạy JSX code (cho React) và code được viết sử dụng ES6

• loader: Chúng là các chuyển đổi mà được áp dụng trên một file trong ứng dụng

Thuộc tính key loader thu nhận một mảng của các loaders. Cho thiết lập cơ bản, chúng ta chỉ định rằng babel-loader đi qua và chuyển đổi tất cả các file với đuôi tận cùng là .js hoặc .jsx,  trừ các file trong thư mục node_modules. Bạn cũng có thể thêm các loaders khác khi cần. Ví dụ, nếu bạn có các style sheet riêng biệt trong project, bạn sẽ cần phải có một CSS loader. Tất cả các loader, chúng ta có thể tìm trong tài liệu của Webpack.

Thiết lập babel

Trong cấu hình webpack, chúng ta đã chỉ định dùng một babel-loader.  babel-loader này bạn đang yêu cầu đến từ đâu? chúng ta cần cài đặt nó và sau đó thiết lập một vài cấu hình.

> yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

Đây là tất cả những dependency chúng ta cần cho Babel. Để ý rằng chúng ta đã cài đặt babel-preset-es2015 và  babel-preset-react, preset là các Babel plugin mà  đơn giản nói với Babel những gì cần tìm và biến đổi hoàn toàn thành javascript, vanilla javascript.

Chúng ta sau đó phải cấu hình babel, chúng ta có thể làm việc này trong một file mới với tên là .babelrc

> touch .babelrc

Sau đó chúng ta cập nhập file thành

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

Xong rồi. Bây giờ khi babel-loader được gọi trong file cấu hình của webpack, nó biết phải làm gì.

Thiết lập các thành phần của React

Cho đến giờ cấu trúc file của chúng ta trông như thế này:

.
|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

Chúng ta sẽ tạo một thư mục client mới và thêm một file index.js và index.html

> mkdir client
> cd client
> touch index.js
> touch index.html
> cd ..

Bây giờ thì chúng ta có

.
|-- client
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

Tiếp theo chúng ta sẽ thêm một vài đoạn code. Chúng ta sẽ bắt đầu với một đoạn đơn giản với mục đích kiểm tra xem các bước của chúng ta đễn giờ vẫn hoạt động tốt

Mở file index.js và thêm vào:

/*
    ./client/index.js
    which is the webpack entry file
*/
console.log('Hey guys and ladies!!')

Cập nhập file index.html thành:

/*
    ./client/index.html
    basic html skeleton
*/
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root">

    </div>
  </body> 
</html>

index.html là trang web hiện thời chứa các React Component của chúng ta trên trình duyệt. Như tôi đã nói ở trước đấy chúng ta cần babel mục đích để biên dịch code của chúng ta thành cú pháp mà trình duyệt hỗ trợ.  Chúng ta code các Component của React sử dụng JSX và trong trường hợp của chúng ta, chúng ta cũng dùng cả ES6. Cú pháp của 2 module này đều không được hỗ trợ bởi hầu hết các trình duyệt vì thế, chúng ta phải chạy code này thông qua babel loaders và nhờ vậy mà kết quả đầu ra được đóng gói là những gì mà chúng ta chỉ định được hiển thị trên index.html

Có một cách để chúng ta thêm file được đóng gói vào HTML là thêm một đoạn thẻ  script và truyền vào đường dẫn đến file được đóng gói vào trong thẻ script. Một cách khác tốt hơn để làm điều này là sử dụng package tiện ích này html-webpack-plugin.  Nó cung cấp một cách đơn giản nhất để tạo toàn bộ HTML giúp bạn. Tất cả những gì bạn cần là một bộ khung HTML chuẩn. Nó sẽ đảm nhiệm viêc chèn các script của bạn chỉ với một vài cấu hình. Hãy làm điều đó tiếp theo đây.

Html-webpack-plugin

Đầu tiên, chúng ta sẽ cài đặt plugin. Hãy đảm bảo rằng terminal của bạn đang đọc trong thư mục gốc của dự án, hello-world-react, sau đó gõ câu lệnh sau đây.

> yarn add html-webpack-plugin

Sau đó mở file webpack.config.js và thêm vào đó một vài cấu hình

/* 
    ./webpack.config.js
*/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {

...

module: {
    rules: [
        ...
    ]
},
// add this line
plugins: [HtmlWebpackPluginConfig]
}

Cấu hình trông khá đẹp và dễ hiểu. Chúng ta require một html-webpack-pluginvà sau đó tạo một instance mới cho nó và đặt bộ khung html như một template. filename chính là tên của file html mà plugin sẽ tạo ra. inject 'body' yêu cầu plugin thêm bất kỳ Javascript nào vào cuối web, ngay trước thẻ đóng </body>

Chạy thôi!

Chúng ta đang tiến đến gần đích rồi. Hãy thử chạy thiết lập của chúng ta. Mở file package.json và thêm một start script

*
    ./package.json
*/
{
  "name": "hello-world-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",

  // add the scripts key to your package.json

  "scripts": {
    "start": "webpack-dev-server"
  },

  "dependencies": {
  ...
  },
  "devDependencies": {
  ...
  }
}

Tiếp theo hãy mở terminal và chạy câu lệnh sau:

> yarn start

Hãy mở trình duyệt và truy cập địa chỉ sau http://localhost:8080/Nếu bạn kiểm tra console của trình duyệt thì bạn sẽ nhìn thấy thông báo sao Hey guys and ladies!!Lý do mà chúng ta sử dụng localhost:8080 là vì webpack-dev-serverchạy các file của chúng ta trên port 8080. Để ý rằng webpack-dev-serverđược chạy khi chúng ta thực hiện start script

Tiếp theo, chúng ta sẽ thêm một React Component và xem kết quả thế nào

React

Chúng ta sẽ tạo một React Component đơn giản, Hello World. Trước tiên, chúng ta cần cài đặt các Dependency của React

> yarn add react react-dom

Tiếp theo trong thư mục client tạo một thư mục với tên là components và tạo một file là App.jsx

> cd client
> mkdir components 
> cd components
> touch App.jsx
> cd ../..

Do đó cấu trúc file thư mục của chúng ta bây giờ trông như thế này

.
|-- client
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

Trong khi quy ước, tên Component file trong React là PascalCase đó là lý do tại sao tên file của chúng ta lại bắt đầu bằng ký tự in hoa. Kiểu file thường là .jsx hoặc .js. Nhưng tôi nghĩ tốt hơn hết chúng ta nên đặt kiểu file rõ ràng dùng .jsx, nó thể hiện rõ mục đích các file sử dụng cú pháp JSX

Tiếp theo chúng ta sẽ cập nhập file App.jsx

/*
    ./client/components/App.jsx
*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}

Cuối cùng, chúng ta sẽ render Component của chúng ta trong start file, index.js. Chúng ta sẽ thay thế đoạn console.log() thành:

/* 
    ./client/index.js
*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

Mở Terminal và  chạy lại project. Nên nhớ rằng terminal đang đọc trong thư mục gốc của project.

> yarn start

Như vậy là xong. Chúng ta đã hoàn thành xong việc thiết lập cho project dùng React, Webpack và Babel