React 入门第一步：环境搭建

2023-02-27

html npm dev

React是facebook推出的用于构建用户界面的前端Javascript库，中文官方地址为：https://react.docschina.org/。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 
1.
2.
3.
4.
5.
6.
7.

+ 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 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

项目创建完成，开发依赖安装成功后，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" 
  } 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

因为是自己进行手动安装配置，因此需要在项目根路径下手动创建 \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' 
    }) 
  ] 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

配置入口 \src\index.html

<body> 
  <divid="root"></div> 
</body> 
1.
2.
3.

配置入口 \src\index.js

import React from'react' 
import { render } from'react-dom' 
 
// 自定义组件 
functionApp() { 
  return<div>React</div> 
} 
 
render(<App />,document.getElementById('root')) 
1.
2.
3.
4.
5.
6.
7.
8.
9.

然后在 package.json 中添加配置选项：

"scripts":{ 
    "test":"echo \"Error: no test specified\" && exit 1", 
    "dev":"webpack-dev-server" 
  }, 
1.
2.
3.
4.

然后在命令行中执行 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 
  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.