React环境搭建

使用套件搭建环境

React可以直接下载使用，在页面中引入React提供的js库即可

我们引入三个库：react.min.js、react-dom.min.js和babel.min.js；

• react.min.js React的核心库
• react-dom.min.js 提供与DOM相关的功能
• babel.min.js 是浏览器支持babel可以将ES6代码转为ES5代码，这样我们就能在目前不支持ES6浏览器上执行React代码。Babel内嵌了对JSX的支持。

使用create-react-app构建react开发环境（脚手架）

使用该工具，一键就可以把React环境搭建好。

• create-react-app是由于Facebook，通过该命令我们无需配置就能快速构建React开发环境
• create-react-app自动创建的项目是基于Webpack+ES6

执行以下命令创建项目

• npm install -g create-react-app
  全局安装
• create-react-app my-app
  创建项目my-app自动创建目录（不能包含大写字母），执行该命令，就相当于webpack的基本环境都搭建好了，react的所有环境也都搭建好了
• cd my-app
  切换到选项目录

一键安装之后，终端会提示以下四个命令：

• npm start
  作用：运行目录，使用这个命令相当于开启了实时刷新，基本用来测试开发模式
• npm run build
  作用：它是生产模式打包
• npm run eject
  作用：让webpack.config.js文件显示出来
• cd web77 作用：的作用是切换文件夹

使用webpack搭建环境

大多数网站都是一个html，跳转页面是通过路由在切换组件。

使用webpack搭建环境（手动安装）

全局安装

1. 首先要安装Node.js，Node.js自带了软件包管理npm，Webpack需要Node.jsv0.6以上支持建议使用最新版Node.js。
2. 使用npm安装全局webpack npm i webpack -g
3. 此时Webpack已经安装到了全局环境下，可以通过命令行webpack -h试试
4. 手动创建一个webpack项目
5. 创建一个package.json文件，用于保存项目版本、依赖关系等（使用npm init -y直接初始化该文件）
6. 在当前目录下安装局部webpack 命令：cnpm i webpack -D
7. 安装项目依赖

npm install依赖模块
//babel的相关模块，利用Babel让webpack能够解析ES6和babel支持jsx。
安装babel-loader命令：npm i babel-loader @babel/core @babel/preset-env @babel/preset-react
//react相关的模块
命令：npm i react react-dom -save-dev
//css相关模块
cnpm install css-loader style-loader -D

8. webpack.config.js中添加babel-loader设置

注意：不管是输出文件还是引入文件，都需要引入react，如果有虚拟DOM的js文件中，还要引入react-dom文件，如下代码：

import React from "react"
import ReactDOM from "react-dom"