学习React笔记之实战角度

一.创建基本的webpack项目

建议大家参考黑马免费视频学习react
此处仅做笔记记录

1.运行npm init -y 快速初始化项目

npm init -y 

2.建立文件夹src，存放所有项目源代码

3.建立文件夹dist，用于发布产品

4.src目录下创建index.html index.js(打包入口)

5.安装webpack 我使用的是全局安装 cnpm install -g webpack-cli 局部安装一直失败

cnpm install -g webpack-cli 

6.webpack 4.x 提供了约定大于配置的概念，目的是为了减少配置文件的体积
打包的入口：src->index.js
打包输出文件：dist->main.js
webpack-cli 4.x与webpack-dev-server3.11.0会有冲突 需要对webpack-cli进行降级

7.配置实时打包编译
执行cnpm i webpack-dev-server -D（-g全局安装 -D局部安装）

cnpm i webpack-dev-server -D

8.将html放入内存中 引入插件 html-webpack-plugin
最后webpack.config.js文件内容如下：

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入内存中自动生成index页面的插件

const htmlWebPackPlugin = new HtmlWebPackPlugin({
			template : path.join(__dirname,'./src/index.html'),//源文件
			filename : 'index.html' //生成内存中首页的名称的
})

module.exports = {
			mode: 'development',
			plugins:[
				htmlWebPackPlugin
			]
}

二、在项目中运用react

运行 cnpm i react react-dom -S 命令安装
react：专门用于创建组件和虚拟dom，同时组件的生命周期都在这个包里
react-dom：专门进行dom操作。最主要的应用场景，就是ReactDOM.render()
第一步：导包

import React from 'react' //创建组件/虚拟DOM元素,生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟dom放到页面展示

第二步：创建虚拟DOM元素

const mydev = React.createElement('div',{id:'mydiv',title:'div aaa'},'这是一个div元素')

第三步：调用render函数渲染

ReactDOM.render(mydiv,document.getElementById('app'))

第四步：创建页面容器

<div id="app"></div>

三、使用babel转换js中标签，在js中混合写入类似于html的语法，叫做JSX语法，符合XML规范的js

1、如何启用jsx语法？
安装babel插件
运行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D //插件、转换类
运行 cnpm i babel-preset-env babel-preset-stage-0 -D //语法类

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D

安装能够识别转换jsx语法的包
运行cnpm i babel-preset-react -D

cnpm i babel-preset-react -D

添加 .babelrc 配置文件，否则报错

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

四、在jsx中书写代码

//导入
import React from 'react' //创建组件/虚拟DOM元素,生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟dom放到页面展示

const h1 = React.createElement('h1',null,'This is a H1')

const arry = ['马里奥','马冬梅','马小跳','马云','马化腾','马保国']

const g = arry.map(item=>{
			return item + '~~'
})

arry.forEach(item => {
			const temp = <h5 key={item}>{item}</h5>
			console.log(temp)
})

ReactDOM.render(
			arry.map(item=>(<h1 key={item}>{item}</h1>))
,document.getElementById('w'))

通过class关键字创建组件

class 组件名称 extends React.Component{
	render(){
		return <div>这是class创建的组件</div>
	}
}

通过class创建组件与function创建组件区别

class创建的组件有自己的私有数据(this.state可读可写) 和 生命周期函数；有状态组件
但是使用function创建的组件。只有props，没有自己的私有数据 和 生命周期函数；无状态组件

注意：在自定义构造器中，只要继承了 React.Component这个父类，必须调用super()，否则不允许使用this关键字

react贵在灵活运用，组件化开发极大地提高了工作效率

学习到这里发现前端的东西 五彩纷呈 无穷无尽

学习永无止境