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: 6839 | Chuyên mục: Javascript


Trong chương này,mì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 có 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. Mình sẽ cần dù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 và 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 và sử dụng npm. Bạn có thể cài đặt ReactJS theo hai cách :
  • Sử dụng webpack và babel
  • Using the create-react-app command.

1. Cài đặt ReactJS sử dụng Weback và 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ử dụ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 và bỏ 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 bài hôm nà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 mì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 chỉ cần dùng 1 câu lệnh để cài đặt tất cả :
C:\Users\username\Desktop\reactApp>npm install react react-dom --save
Bước 3 : Cài đặt wepack 
Vì mình đang sử dụng wepack để cài đặt các gói webpack-dev-server 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 có thể dùng 1 dòng code để cà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 : Tạ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 : Cài đặt trình biên dịch, server và trình tải :
Mở tệp webpack-config.js và thêm đoạn code sau .Mình đang đặt điểm nhập webpack thành main.js. Đầu ra là 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". Mình đang xóa dòng này vì mình sẽ không thực hiện thử nghiệm nào trong hướng dẫn này.  Bây giờ, bạn hãy thêm các lệnh để bắt đầu và chạy nó
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
Bước 7 : index.html
Đây là HTML thông thường.Mì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 và main.jsx 
Đây là thành phần React đầu tiên.Mình sẽ giải thích kĩ càng component của React trong một chương tiếp theo. Component này sẽ 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 phải import component này và render với App , kết quả sẽ hiển thị ở trì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 : Chạy server
Sau khi cài đặt xong mọi thử, ta có thể thử chạy server bằng dòng lệnh sau :
C:\Users\username\Desktop\reactApp>npm start
Trình duyệt hiển thị với cổng 8001 như dưới :

Bước 10 : Tạ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ử dụng câu lệnh create-react-app :

Thay vì sử dụng weback và babel ta có thể sử dụng câu lệnh create-react-app để tạo
Bước 1 : Cài đặt create-react-app :
Duyệt qua các thư mụ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 đã tạo thành công thư mục có tên my-app và cài đặt tất cả các mục cần thiết ở trong folder
Bước 2 : Xóa tất cả các file nguồn
Duyệt qua thư mục src và xóa tất cả cá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 và index.js vào thư mụ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 các đoạn code sau :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
Bước 4 : Chạy project 
Để chạy project ta sử dụng dòng lệnh sau :
npm start
Bài tiếp theo: ReactJS - JSX >>
vncoder logo

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!