React学习一

一.创建webpack 4.x 项目

在本地先安装npm，否则以下命令将执行不成功

1.创建01webpack-base文件夹

1>使用WebStorm打开该文件

执行以下命令：npm init -y，快速初始化项目。

出现以下界面则为成功。此时01webpack-base文件中添加了package.json文件。

2. 在项目跟模具创建src源代码目录和dist产品目录

3.在src目录创建index.js和index.html文件

4.使用npm安装webpack，在01webpack-base文件夹中执行以下命令：npm i webpack -D

安装完后再使用npm安装脚手架，执行以下命令：npm i webpack-cli -D
5. 在index.html中随便输入个div，以便在浏览器中可以查看内容

6.向外暴露一个打包的配置对象。在文件目录中创建webpack.config.js文件，在文件中添加以下代码。

注意：webpack 4.X以上版本提供了约定大于配置的概念，目的是为了减少配置文件的体积（其中development打包时不压缩打包文件，production打包时压缩打包文件）。打包的入口是src->index.js，打包的输出文件是dist->main.js

module.exports={
  mode:'production',//development,production
}

7.在控制台中执行webpack，若执行显示‘webpack’不是内部或外部命令，则执行npx webpack，出现以下界面则为打包成功

以上打包时需要每次改动代码后重新进行打包，代码才能实时同步。

若想实时同步代码，则需要执行以下命令：npm i webpack-dev-server -D

在package.json文件中配置一下信息：

"dev": "webpack-dev-server --open chrome --port 3000"

注意：若执行npm run dev失败则有可能是webpack-cli版本太高不兼容（我当时尝试的webpack版本是5.11.0，webpack-cli版本是4.3.0，两者同时使用会执行命令不成功），可执行命令：npm uninstall webpack-cli，卸载当前版本。执行命令：npm install webpack-cli@3 -D，安装3的版本，再执行npm run dev可执行成功。

查看webpack版本命令：webpack -v，若提示'webpack'不是内部或外部命令，也不是可执行的程序或批处理文件，可尝试使用npx webpack -v查看。

8. 设置项目的index.html为浏览器打开的默认页。

在控制台中执行以下命令：npm i html-webpack-plugin -D，此命令可以把首页生成到内存中去

在webpack.config.js文件中添加如下代码

const path=require("path");
//导入,在内存中自动生成index页面
const  HtmlWebPackPlugin=require("html-webpack-plugin");

//创建一个插件实例对象
const htmlPlugin=new HtmlWebPackPlugin({
  template:path.join(__dirname,'./src/index.html'),//原文件
  filename:'index.html'//生成内存中首页的名称
});

 

二.创建react项目

1. 在控制台中执行命令：npm i react react-dom -S

//1.这两个导入的时候，成员名必须这么写，不能随意更改
//创建组件、虚拟DOM元素、生命周期
import React from 'react'
//把创建好的组件和虚拟DOM放在页面上展示
import ReactDOM from 'react-dom'
//2.参数1：创建元素的类型，字符串，标识元素的名称
//参数2：是一个对象或者null,标识这个DOM元素的属性
//参数3：子节点（包括其它 虚拟DOM 获取 文本子节点）
//参数n:其它子节点
const myh1 = React.createElement('h1', null, '这是一个h1');
const myDiv=React.createElement('div',null,'这是一个元素',myh1);

//3.使用reactDOM渲染到页面
ReactDOM.render(myDiv, document.getElementById('app'));

在index.html代码中

2.使用JSX

配置babel：

执行命令：npm i babel-core babel-loader babel-plugin-transform-runtime -D
安装完执行命令：npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

在webpack.config.js中添加

module: {//所有第三方 模块的配置规则
  rules: [//第三方匹配规则
    {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},//千万别忘了装exclude排除项
  ]
}

在文件根目录下添加.babelrc文件，添加

{
  "presets": ["env","stage-0","react"],
  "plugins": ["transform-runtime"]
}

在index中可以使用jsx语法

若在运行项目的时候报错，查看报错信息可能原因：babel-loader和babel core版本不匹配，按照提示装相应的版本，安装命令npm install babel-loader@7 ，7的位置改成提示的版本.