React 入門第一步：環境搭建
作者： 西嶺老濕
React 具有聲明式、組件化、一次學習，隨處編寫等特點，使用 React 可以將一些簡短、獨立的代碼片段組合成復雜的 UI 界面，這些代碼片段被稱作“組件”。
React 是 facebook 推出的用于構建用戶界面的前端 Javascript 庫，中文官方地址為：https://react.docschina.org/。
React 具有聲明式、組件化、一次學習，隨處編寫等特點，使用 React 可以將一些簡短、獨立的代碼片段組合成復雜的 UI 界面，這些代碼片段被稱作“組件”。
環境搭建
官方文檔中創建新的 React 應用：https://react.docschina.org/docs/create-a-new-react-app.html
手動搭建 webpack
創建項目目錄并安裝開發依賴：
- $ mkdirwebpack-react-project
- $ cd webpack-react-project/
- $ npm init -y
- npm install -D @babel/core@7.13.8@babel/preset-env@7.13.9 @babel/preset-react@7.12.13 babel-loader@8.2.2html-webpack-plugin@4.5.2 react@17.0.1 react-dom@17.0.1 webpack@4.46.0webpack-cli@3.3.12 webpack-dev-server@3.11.2
- + react@17.0.1
- + babel-loader@8.2.2
- + @babel/preset-env@7.13.9
- + webpack-dev-server@3.11.2
- + @babel/core@7.13.8
- + html-webpack-plugin@4.5.2
- + webpack-cli@3.3.12
- + @babel/preset-react@7.12.13
- + react-dom@17.0.1
- + webpack@4.46.0
項目創建完成，開發依賴安裝成功后，package.json 內容如下：
- {
- "name":"webpack-react-project",
- "version":"1.0.0",
- "description":"",
- "main":"index.js",
- "scripts":{
- "test":"echo \"Error: no test specified\" && exit 1"
- },
- "keywords":[],
- "author":"",
- "license":"ISC",
- "devDependencies":{
- "@babel/core":"^7.13.8",
- "@babel/preset-env":"^7.13.9",
- "@babel/preset-react":"^7.12.13",
- "babel-loader":"^8.2.2",
- "html-webpack-plugin":"^4.5.2",
- "react":"^17.0.1",
- "react-dom":"^17.0.1",
- "webpack":"^4.46.0",
- "webpack-cli":"^3.3.12",
- "webpack-dev-server":"^3.11.2"
- }
- }
因為是自己進行手動安裝配置，因此需要在項目根路徑下手動創建 \webpack.config.js 文件，并做如下配置：
- const path =require('path')
- const HtmlWebpackPlugin =require('html-webpack-plugin')
- module.exports= {
- mode:'development',
- devtool:'none',
- entry:'./src/index.js',
- output: {
- filename:'main.js',
- path: path.resolve('dist')
- },
- devServer: {
- port:3000,
- hot:true
- },
- module: {
- rules: [
- {
- test:/\.js|jsx$/,
- exclude:/node_modules/,
- use: [
- {
- loader:'babel-loader',
- options: {
- presets: ['@babel/preset-env','@babel/preset-react']
- }
- }
- ]
- }
- ]
- },
- plugins: [
- newHtmlWebpackPlugin({
- template:'./src/index.html'
- })
- ]
- }
配置入口 \src\index.html
- <body>
- <divid="root"></div>
- </body>
配置入口 \src\index.js
- import React from'react'
- import { render } from'react-dom'
- // 自定義組件
- functionApp() {
- return<div>React</div>
- }
- render(<App />,document.getElementById('root'))
然后在 package.json 中添加配置選項：
- "scripts":{
- "test":"echo \"Error: no test specified\" && exit 1",
- "dev":"webpack-dev-server"
- },
然后在命令行中執行 npm run dev 就可以啟動項目了。
使用官方腳手架create-react-app
官方腳手架 create-react-app 基于 webpack 進行打包構建。
腳手架構架項目：npx create-react-appmy-app
- > cd my-app
- > npm start
使用通用構建工具 Vite
Vite 本身就是一個構建工具，開發環境下不打包，生成環境使用 Rollup 進行打包。
執行命令 npm init vite@latest
- √ Project name: ...my-project
- ? Select a framework: » - Use arrow-keys. Return tosubmit.
- vanilla
- vue
- > react
- preact
- lit-element
- svelte
- ? Select a variant: » - Use arrow-keys. Return tosubmit.
- > react
- react-ts
- Scaffolding project in xxxxxxxxxxxxxx
- Done. Now run:
- cdvite-project
- npm install
- npm run dev
責任編輯：武曉燕
來源：
勾勾的前端世界
