ReactJS - การตั้งค่าสภาพแวดล้อม

ในบทนี้เราจะแสดงวิธีจัดสภาพแวดล้อมเพื่อให้การพัฒนา React ประสบความสำเร็จ สังเกตว่ามีหลายขั้นตอนที่เกี่ยวข้อง แต่จะช่วยเร่งกระบวนการพัฒนาในภายหลัง เราจะต้องNodeJSดังนั้นหากคุณยังไม่ได้ติดตั้งให้ตรวจสอบลิงก์จากตารางต่อไปนี้

ซีเนียร์	ซอฟต์แวร์และคำอธิบาย
1	NodeJS and NPM NodeJS เป็นแพลตฟอร์มที่จำเป็นสำหรับการพัฒนา ReactJS กร้าของเราติดตั้ง NodeJS สิ่งแวดล้อม

หลังจากติดตั้ง NodeJS สำเร็จเราสามารถเริ่มติดตั้ง React ได้โดยใช้ npm คุณสามารถติดตั้ง ReactJS ได้สองวิธี

• ใช้ webpack และ babel

• ใช้ create-react-app คำสั่ง

การติดตั้ง ReactJS โดยใช้ webpack และ babel

Webpackเป็นโมดูลบันเดิลเลอร์ (จัดการและโหลดโมดูลอิสระ) ต้องใช้โมดูลที่ขึ้นต่อกันและรวบรวมไว้ในบันเดิล (ไฟล์) เดียว คุณสามารถใช้บันเดิลนี้ขณะพัฒนาแอพโดยใช้บรรทัดคำสั่งหรือโดยกำหนดค่าโดยใช้ไฟล์ webpack.config

Babel เป็นคอมไพเลอร์ JavaScript และ Transpiler ใช้เพื่อแปลงซอร์สโค้ดหนึ่งไปเป็นอีกอัน เมื่อใช้สิ่งนี้คุณจะสามารถใช้คุณสมบัติ ES6 ใหม่ในโค้ดของคุณโดยที่ babel จะแปลงเป็น ES5 แบบเก่าธรรมดาซึ่งสามารถทำงานได้บนเบราว์เซอร์ทั้งหมด

ขั้นตอนที่ 1 - สร้างโฟลเดอร์รูท

สร้างโฟลเดอร์ที่มีชื่อ reactApp บนเดสก์ท็อปเพื่อติดตั้งไฟล์ที่ต้องการทั้งหมดโดยใช้คำสั่ง mkdir

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

ในการสร้างโมดูลใด ๆ จำเป็นต้องสร้างไฟล์ package.jsonไฟล์. ดังนั้นหลังจากสร้างโฟลเดอร์แล้วเราจำเป็นต้องสร้างไฟล์package.jsonไฟล์. ในการทำเช่นนั้นคุณต้องเรียกใช้ไฟล์npm init คำสั่งจากพรอมต์คำสั่ง

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

คำสั่งนี้ถามข้อมูลเกี่ยวกับโมดูลเช่นชื่อแพ็กเกจคำอธิบายผู้แต่ง ฯลฯ คุณสามารถข้ามสิ่งเหล่านี้ได้โดยใช้ตัวเลือก –y

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"
}

ขั้นตอนที่ 2 - ติดตั้ง React และ react dom

เนื่องจากงานหลักของเราคือการติดตั้ง ReactJS ให้ติดตั้งและแพ็คเกจ dom โดยใช้ install react และ react-domคำสั่งของ npm ตามลำดับ คุณสามารถเพิ่มแพ็คเกจที่เราติดตั้งลงในpackage.json ไฟล์โดยใช้ไฟล์ --save ตัวเลือก

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

หรือคุณสามารถติดตั้งทั้งหมดในคำสั่งเดียวเป็น -

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

ขั้นตอนที่ 3 - ติดตั้ง webpack

เนื่องจากเราใช้ webpack เพื่อสร้างบันเดิลเลอร์ติดตั้ง webpack, 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

หรือคุณสามารถติดตั้งทั้งหมดในคำสั่งเดียวเป็น -

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

ขั้นตอนที่ 4 - ติดตั้ง Babel

ติดตั้ง babel และปลั๊กอิน babel-core, babel-loader, babel-preset-env, babel-preset-react และ, html-webpack-plugin

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

หรือคุณสามารถติดตั้งทั้งหมดในคำสั่งเดียวเป็น -

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

ขั้นตอนที่ 5 - สร้างไฟล์

ในการติดตั้งให้เสร็จสมบูรณ์เราจำเป็นต้องสร้างไฟล์บางไฟล์ ได้แก่ index.html, App.js, main.js, webpack.config.js และ,.babelrc. คุณสามารถสร้างไฟล์เหล่านี้ด้วยตนเองหรือโดยใช้ไฟล์command prompt.

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

ขั้นตอนที่ 6 - ตั้งค่าคอมไพเลอร์เซิร์ฟเวอร์และตัวโหลด

เปิด webpack-config.jsไฟล์และเพิ่มรหัสต่อไปนี้ เรากำลังตั้งค่าจุดเข้า webpack ให้เป็น main.js เส้นทางเอาต์พุตคือสถานที่ที่จะให้บริการแอปที่แถมมา เรากำลังตั้งค่าเซิร์ฟเวอร์การพัฒนาเป็น8001ท่าเรือ. คุณสามารถเลือกพอร์ตใดก็ได้ที่คุณต้องการ

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'
      })
   ]
}

เปิด package.json และลบ "test" "echo \"Error: no test specified\" && exit 1" ข้างใน "scripts"วัตถุ. เรากำลังลบบรรทัดนี้เนื่องจากเราจะไม่ทำการทดสอบใด ๆ ในบทช่วยสอนนี้ เพิ่มไฟล์start และ build คำสั่งแทน

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

ขั้นตอนที่ 7 - index.html

นี่เป็นเพียง HTML ปกติ เรากำลังตั้งค่าdiv id = "app" เป็นองค์ประกอบหลักสำหรับแอปของเราและเพิ่ม index_bundle.js สคริปต์ซึ่งเป็นไฟล์แอพที่รวมมาของเรา

<!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>

ขั้นตอนที่ 8 - App.jsx และ main.js

นี่คือส่วนประกอบ React แรก เราจะอธิบายองค์ประกอบของปฏิกิริยาเชิงลึกในบทต่อไป ส่วนประกอบนี้จะแสดงผลHello World.

App.js

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

เราจำเป็นต้องนำเข้าส่วนประกอบนี้และแสดงผลไปยังรูทของเรา App ดังนั้นเราจึงเห็นได้ในเบราว์เซอร์

main.js

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

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

Note - เมื่อใดก็ตามที่คุณต้องการใช้บางสิ่งคุณจำเป็นต้องทำ importมันก่อน. หากคุณต้องการให้ส่วนประกอบใช้งานได้ในส่วนอื่น ๆ ของแอพคุณต้องexport หลังจากสร้างและนำเข้าในไฟล์ที่คุณต้องการใช้

สร้างไฟล์ที่มีชื่อ .babelrc และคัดลอกเนื้อหาต่อไปนี้ไป

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

ขั้นตอนที่ 9 - เรียกใช้เซิร์ฟเวอร์

การตั้งค่าเสร็จสมบูรณ์และเราสามารถเริ่มต้นเซิร์ฟเวอร์ได้โดยเรียกใช้คำสั่งต่อไปนี้

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

มันจะแสดงพอร์ตที่เราต้องเปิดในเบราว์เซอร์ ในกรณีของเราก็คือhttp://localhost:8001/. หลังจากเปิดแล้วเราจะเห็นผลลัพธ์ต่อไปนี้

ขั้นตอนที่ 10 - การสร้างบันเดิล

สุดท้ายในการสร้างบันเดิลคุณต้องรันคำสั่ง build ใน command prompt เป็น -

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

สิ่งนี้จะสร้างบันเดิลในโฟลเดอร์ปัจจุบันดังที่แสดงด้านล่าง

ใช้คำสั่ง create-react-app

แทนที่จะใช้ webpack และ babel คุณสามารถติดตั้ง ReactJS ได้ง่ายขึ้นเพียงแค่ติดตั้ง create-react-app.

ขั้นตอนที่ 1 - ติดตั้ง create-react-app

เรียกดูเดสก์ท็อปและติดตั้งแอป Create React โดยใช้ command prompt ดังที่แสดงด้านล่าง -

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

สิ่งนี้จะสร้างโฟลเดอร์ชื่อ my-app บนเดสก์ท็อปและติดตั้งไฟล์ที่จำเป็นทั้งหมดในนั้น

ขั้นตอนที่ 2 - ลบไฟล์ต้นฉบับทั้งหมด

เรียกดูโฟลเดอร์ src ในโฟลเดอร์ my-app ที่สร้างขึ้นและลบไฟล์ทั้งหมดในโฟลเดอร์ดังที่แสดงด้านล่าง -

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

ขั้นตอนที่ 3 - เพิ่มไฟล์

เพิ่มไฟล์ที่มีชื่อ index.css และ index.js ในโฟลเดอร์ src เป็น -

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

ในไฟล์ index.js ให้เพิ่มรหัสต่อไปนี้

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

ขั้นตอนที่ 4 - เรียกใช้โครงการ

สุดท้ายรันโปรเจ็กต์โดยใช้คำสั่ง start

npm start