Bài 2: ReactJS - Thiết lập môi trường - Học ReactJS Full Đầy Đủ Nhất

Đăng bởi: Admin | Lượt xem: 7300 | Chuyên mục: Javascript

Trong chương này,mình sẽ hướng dẫn cho bạn cách thiết lập môi trường để phát triển React. Lưu ý rằng có nhiều bước có nhiều bước không liên quan nhưng điều này sẽ giúp tăng tốc quá trình code sau này. Mình sẽ cần dùng NodeJS, vì vậy nếu bạn chưa cài đặt nó, hãy kiểm tra liên kết từ bảng sau.

NodeJS và NPM : NodeJS là nền tảng cần thiết cho sự phát triển ReactJS. Kiểm tra thiết lập môi trường NodeJS

Sau khi cài đặt thành công NodeJS, ta có thể bắt đầu cài đặt React và sử dụng npm. Bạn có thể cài đặt ReactJS theo hai cách :

Sử dụng webpack và babel

Using the create-react-app command.

1. Cài đặt ReactJS sử dụng Weback và Babel :

- Webpack là một gói mô-đun (quản lý và tải các mô-đun độc lập). Nó nhận các mô-đun phụ thuộc và biên dịch chúng thành một gói (tệp) duy nhất. Bạn có thể sử dụng gói này trong khi phát triển ứng dụng bằng dòng lệnh hoặc bằng cách định cấu hình nó bằng tệp webpack.config.

- Babel là một trình biên dịch và trình dịch JavaScript. Nó được sử dụng để chuyển đổi một mã nguồn khác.Khi sử dụng babel, bạn sẽ có thể sử dụng các tính năng ES6 mới trong code của mình, babel chuyển đổi nó thành ES5 cũ đơn giản có thể chạy trên tất cả các trình duyệt.

Bước 1 - Tạo thư mục gốc :

Tạo một thư mục có tên ReacApp trên màn hình nền để cài đặt tất cả các tệp cần thiết, sử dụng lệnh mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Để tạo bất kỳ mô-đun nào, cần phải tạo tệp pack.json. Do đó, sau khi tạo thư mục, chúng ta cần tạo tệp pack.json. Để làm như vậy, bạn cần chạy lệnh npm init .

C:\Users\username\Desktop\reactApp>npm init

Lệnh này hỏi thông tin về mô-đun, chẳng hạn như packagename, mô tả, tác giả, v.v. bạn có thể bỏ qua các tùy chọn này bằng cách enter và bỏ qua :v .

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Bước 2 - cài đặt React và React Dom:

Vì nhiệm vụ chính trong bài hôm nàyi là cài đặt ReactJS và các gói dom của nó, sử dụng các lệnh install Reac và React-dom của npm tương ứng. Bạn có thể thêm các gói mình cài đặt, vào tệp pack.json bằng tùy chọn --save.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Hoặc chỉ cần dùng 1 câu lệnh để cài đặt tất cả :

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Bước 3 : Cài đặt wepack

Vì mình đang sử dụng wepack để cài đặt các gói webpack-dev-server và webpack-cli.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Hoặc có thể dùng 1 dòng code để cài đặt như ở trên :

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

Bước 5 : Tạo file :

Để hoàn tất cài đặt, ta cần tạo một số tệp nhất định là index.html, App.js, main.js, webpack.config.js và, .babelrc. Bạn có thể tạo các tệp này theo cách thủ công hoặc, bằng cách sử dụng dấu nhắc lệnh.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Bước 6 : Cài đặt trình biên dịch, server và trình tải :

Mở tệp webpack-config.js và thêm đoạn code sau .Mình đang đặt điểm nhập webpack thành main.js. Đầu ra là cổng 8001. Bạn có thể chọn bất kỳ cổng nào bạn muốn.

webpack.config.js :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Mở gói .json và xóa "test" "echo \" Lỗi: không có kiểm tra nào được chỉ định \ "&& thoát 1" bên trong đối tượng "scripts". Mình đang xóa dòng này vì mình sẽ không thực hiện thử nghiệm nào trong hướng dẫn này. Bây giờ, bạn hãy thêm các lệnh để bắt đầu và chạy nó

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Bước 7 : index.html

Đây là HTML thông thường.Mình đang đặt div id = "app" làm thành phần gốc cho ứng dụng và thêm tập lệnh index_bundle.js, đây là tệp ứng dụng đi kèm.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Bước 8 : App.jsx và main.jsx

Đây là thành phần React đầu tiên.Mình sẽ giải thích kĩ càng component của React trong một chương tiếp theo. Component này sẽ render Hello World.

App.js :

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Ta cần phải import component này và render với App , kết quả sẽ hiển thị ở trình duyệt :

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

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

Lưu ý - Bất cứ khi nào bạn muốn sử dụng một cái gì đó, bạn cần nhập nó trước. Nếu bạn muốn component có thể sử dụng được trong các component của ứng dụng, bạn cần xuất nó sau khi tạo và nhập nó vào tệp mà bạn muốn sử dụng nó.

Tạo một tệp có tên .babelrc và sao chép nội dung sau vào tệp .

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

Bước 9 : Chạy server

Sau khi cài đặt xong mọi thử, ta có thể thử chạy server bằng dòng lệnh sau :

C:\Users\username\Desktop\reactApp>npm start

Trình duyệt hiển thị với cổng 8001 như dưới :

Bước 10 : Tạo Bundle

Cuối cùng, để tạo gói tacần chạy lệnh build như sau-

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

2. Sử dụng câu lệnh create-react-app :

Thay vì sử dụng weback và babel ta có thể sử dụng câu lệnh create-react-app để tạo

Bước 1 : Cài đặt create-react-app :

Duyệt qua các thư mục và cài đặt Ứng dụng Create React App như sau :

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Như vậy ta đã tạo thành công thư mục có tên my-app và cài đặt tất cả các mục cần thiết ở trong folder

Bước 2 : Xóa tất cả các file nguồn

Duyệt qua thư mục src và xóa tất cả các file như đây :

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Bước 3 : Thêm file :

Thêm file index.css và index.js vào thư mục src :

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

Trong file index.js ta thêm các đoạn code sau :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Bước 4 : Chạy project

Để chạy project ta sử dụng dòng lệnh sau :

npm start

Bài tiếp theo: ReactJS - JSX >>

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!