React 入門(mén)第一步：環(huán)境搭建
React 是 facebook 推出的用于構(gòu)建用戶(hù)界面的前端 Javascript 庫(kù)，中文官方地址為：https://react.docschina.org/。
React 具有聲明式、組件化、一次學(xué)習(xí)，隨處編寫(xiě)等特點(diǎn)，使用 React 可以將一些簡(jiǎn)短、獨(dú)立的代碼片段組合成復(fù)雜的 UI 界面，這些代碼片段被稱(chēng)作“組件”。
環(huán)境搭建
官方文檔中創(chuàng)建新的 React 應(yīng)用：https://react.docschina.org/docs/create-a-new-react-app.html
手動(dòng)搭建 webpack
創(chuàng)建項(xiàng)目目錄并安裝開(kāi)發(fā)依賴(lài)：
- $ 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
項(xiàng)目創(chuàng)建完成，開(kāi)發(fā)依賴(lài)安裝成功后，package.json 內(nèi)容如下：
- {
- "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"
- }
- }
因?yàn)槭亲约哼M(jìn)行手動(dòng)安裝配置，因此需要在項(xiàng)目根路徑下手動(dòng)創(chuàng)建 \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 中添加配置選項(xiàng)：
- "scripts":{
- "test":"echo \"Error: no test specified\" && exit 1",
- "dev":"webpack-dev-server"
- },
然后在命令行中執(zhí)行 npm run dev 就可以啟動(dòng)項(xiàng)目了。
使用官方腳手架create-react-app
官方腳手架 create-react-app 基于 webpack 進(jìn)行打包構(gòu)建。
腳手架構(gòu)架項(xiàng)目：npx create-react-appmy-app
- > cd my-app
- > npm start
使用通用構(gòu)建工具 Vite
Vite 本身就是一個(gè)構(gòu)建工具，開(kāi)發(fā)環(huán)境下不打包，生成環(huán)境使用 Rollup 進(jìn)行打包。
執(zhí)行命令 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
