React 学习

一、搭建webpack4.x环境

1.创建工程文件夹（ReactDemo）

2.在工程文件夹下，快速初始化项目

npm init -y        // 创建一个package.json文件

3.在工程文件夹下，创建源码文件夹（src）和编译打包文件夹（dist）

4.在源码文件夹下，创建index.html和入口index.js文件

5.在工程文件夹下，安装webpack

npm i webpack webpack-cli -D

6.在工程文件夹下，创建webpack.config.js文件

// 向外暴露一个配置对象
module.exports = {mode: 'development' // development：打包文件不压缩   production：打包文件压缩
}

7.配置package.json文件

{"name": "ReactDemo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^4.39.3","webpack-cli": "^3.3.8"}
}

8.在工程文件夹下，执行打包，会在dist文件夹下生成main.js

npm run dev

二、工具使用

1.配置实时打包

npm i webpack-dev-server -D

{"name": "ReactDemo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --port 3000 --hot"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^4.39.3","webpack-cli": "^3.3.8","webpack-dev-server": "^3.8.0"}
}

注：--open：自动打开浏览器（谷歌），--port：指定端口，--hot：热打包，--host：指定地址

2.配置将html页面加载到内存中

npm i html-webpack-plugin -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),  // 源文件路径filename: 'index.html'                               // 生成内存中首页的名称
})// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// 那些 特性 Node 支持呢？Node是基于Chrome V8引擎实现的Javascript运行环境，如果 chrome 浏览器支持哪些，则 Node 就支持哪些；
module.exports = {mode: 'development', // development   production
    plugins: [htmlPlugin]
}

三、配置React

1.引入包，react用于创建虚拟DOM和生命周期，react-dom用于将虚拟DOM渲染到页面

npm i react react-dom -S

2.配置index.js文件

import React from 'react'
import ReactDOM from 'react-dom'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈')// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(h1, document.getElementById('app'))

3.配置识别JSX。安装babel，添加.babelrc配置文件，配置webpack.config.js，修改index.js

npm i babel-core@6.26.3 babel-loader@7.1.2 babel-plugin-transform-runtime@6.26.0 -D
npm i babel-preset-env@1.7.0 babel-preset-stage-0@6.24.1 -D
npm i babel-preset-react@6.24.1 -D

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

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),  // 源文件路径filename: 'index.html'                               // 生成内存中首页的名称
})// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {mode: 'development', // development   production
    plugins: [htmlPlugin],// 所有第三方模块的配置规则
    module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}]}
}
// 以下的写法不行，这是ES6中向外导出模块的API，与之对应的是import ** from '标识符'
// export default {}

import React from 'react'
import ReactDOM from 'react-dom'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
const divJsx = <div>欢迎JSX</div>// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div, divJsx)// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(divJsx, document.getElementById('app'))

4.React语法之引用变量

import React from 'react'
import ReactDOM from 'react-dom'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)const a = "欢迎JSX"
const divJsx = <div>{a}</div>// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(divJsx, document.getElementById('app'))

5.React语法之引用变量数组使用map

import React from 'react'
import ReactDOM from 'react-dom'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)const a = "欢迎JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const divJsx = <div>{a}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(divJsx, document.getElementById('app'))

5.React语法之注意事项

• 属性：使用className替代class，使用htmlFor替代label的for
• jsx注释：{ /* 这是注释 */ }
• 虚拟DOM：在jsx创建DOM时，所有节点必须有唯一的根节点包裹
• 标签：须成对出现（必须紫自闭合）
• 事件：属性名须小驼峰onClick

6.React语法之创建组件

import React from 'react'
import ReactDOM from 'react-dom'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']// 创建组件方式一
function Hello() {return (<div className="container">{a}<hr />{"创建组件方式一"}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>)
}// 创建组件方式二
class He extends React.Component{render() {return (<div className="container">{a}<hr />{"创建组件方式二"}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>)}
}// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(<div className="continer"><Hello /><hr /><He /></div>, document.getElementById('app'))

7.React语法之给主键传值（只读）

import React from 'react'
import ReactDOM from 'react-dom'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {name: 'pascall',age: 20,sex: 'man'
}// 创建组件方式一
function Hello(props) {return (<div className="container">{a}<hr />{"创建组件方式一: 接收值（只读）：{name=" + props.name + ",age=" + props.age + ",sex=" + props.sex + "}"}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>)
}// 创建组件方式二
class He extends React.Component{render() {return (<div className="container">{a}<hr />{"创建组件方式二: 接收值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>)
    }
}// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(<div className="continer"><Hello {...c} /><hr /> <He  {...c} /></div>, document.getElementById('app'))

8.React语法之组件内部属性state创建和获取

import React from 'react'export default class Hi extends React.Component{// 构造器
    constructor(props) {super(props)this.state = {name: 'god'}}render() {return (<div className="container">{"创建组件方式二"}<br />{"获取props值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}{"获取state值（读写）：" + this.state.name}</div>)
    }
}

9.React语法之组件内部属性state修改

import React from 'react'export default class Hi extends React.Component{// 构造器
    constructor(props) {super(props)this.state = {name: 'god',seg: 0}}handleClink() {this.setState({seg: this.state.seg + 1,name: this.state.name.substring(0, 3) + this.state.seg})}render() {return (<div className="container">{"创建组件方式二"}<br />{"获取props值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}{"获取state值（读写）：" + this.state.name}<br /><button onClick={this.handleClink.bind(this)}>修改state值</button></div>)
    }
}

10.React语法之组件内部css样式

• 方式一：行内样式

import React from 'react'export default class Hi extends React.Component{// 构造器
    constructor(props) {super(props)this.state = {name: 'god',seg: 0}}handleClink() {this.setState({seg: this.state.seg + 1,name: this.state.name.substring(0, 3) + this.state.seg})}render() {return (<div className="container-style-2">{"创建组件方式二"}<br />{"获取props值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}{"获取state值（读写）：" + this.state.name}<br /><button onClick={this.handleClink.bind(this)} style={{color: 'red'}}>修改state值</button></div>)
    }
}

• 方式二：外联样式(css, less)

npm i style-loader css-loader less less-loader sass-loader node-loader -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),  // 源文件路径filename: 'index.html'                               // 生成内存中首页的名称
})// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {mode: 'development', // development   production
    plugins: [htmlPlugin],// 所有第三方模块的配置规则
    module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/},{test: /\.css$/, use: ['style-loader', 'css-loader']},{test: /\.scss$/, use: ['style-loader', {loader: 'css-loader',options: {modules: {localIdentName: '[path][name]-[local]-[hash:base64:5]',},},},'sass-loader'],exclude: /node_modules/},{test: /\.less$/, use: [ 'style-loader', {loader: 'css-loader',options: {modules: {localIdentName: '[path][name]-[local]-[hash:base64:5]',},},},'less-loader'],exclude: /node_modules/}]},// 配置省略后缀名和路径别名
    resolve: {// 默认.js, .jsonextensions: [".js", ".jsx", ".json"],alias: {'@': path.join(__dirname, "./src")}}
}

import React from 'react'
import hi from '@/css/hi.less'export default class Hi extends React.Component{// 构造器
    constructor(props) {super(props)this.state = {name: 'god',seg: 0}}handleClink() {this.setState({seg: this.state.seg + 1,name: this.state.name.substring(0, 3) + this.state.seg})}render() {return (<div className={hi.containerStyle2}>{"创建组件方式二"}<br />{"获取props值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className={hi.content}>{"获取state值（读写）：" + this.state.name}</div><br /><button onClick={this.handleClink.bind(this)}>修改state值</button></div>)
    }
}

.containerStyle2{.content{color: red}
}

• 样式作用域（默认全局）（配置局部）普通样式模块化局部或全局

// hi.less
// :local：会被模块化，隐式使用，所以不用显示使用
// :local(.containerStyle2)与.containerStyle2效果一致
// :global：不会被模块化
:local(.containerStyle2){:global(.content){color: red}
}

import React from 'react'
import hi from '@/css/hi.less'export default class Hi extends React.Component{// 构造器
    constructor(props) {super(props)this.state = {name: 'god',seg: 0}}handleClink() {this.setState({seg: this.state.seg + 1,name: this.state.name.substring(0, 3) + this.state.seg})}render() {return (<div className={hi.containerStyle2}>{"创建组件方式二"}<br />{"获取props值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className='content'>{"获取state值（读写）：" + this.state.name}</div><br /><button onClick={this.handleClink.bind(this)}>修改state值</button></div>)
    }
}

• 使用外部样式bootstrap@3.3.7

npm i bootstrap@3.4.1 -S

npm i url-loader file-loader -D

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),  // 源文件路径filename: 'index.html'                               // 生成内存中首页的名称
})// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {mode: 'development', // development   production
    plugins: [htmlPlugin],// 所有第三方模块的配置规则
    module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/},{test: /\.ttf|woff|woff2|eot|svg|jpg|png|gif$/, use: ['url-loader']},{test: /\.css$/, use: ['style-loader', 'css-loader']},{test: /\.scss$/, use: ['style-loader', {loader: 'css-loader',options: {modules: {localIdentName: '[path][name]-[local]-[hash:base64:5]',},},},'sass-loader'],exclude: /node_modules/},{test: /\.less$/, use: [ 'style-loader', {loader: 'css-loader',options: {modules: {localIdentName: '[path][name]-[local]-[hash:base64:5]',},},},'less-loader'],exclude: /node_modules/}]},// 配置省略后缀名和路径别名
    resolve: {// 默认.js, .jsonextensions: [".js", ".jsx", ".json"],alias: {'@': path.join(__dirname, "./src")}}

import React from 'react'
import hi from '@/css/hi.less'
import 'bootstrap/dist/css/bootstrap.css'export default class Hi extends React.Component{// 构造器
    constructor(props) {super(props)this.state = {name: 'god',seg: 0}}handleClink() {this.setState({seg: this.state.seg + 1,name: this.state.name.substring(0, 3) + this.state.seg})}render() {return (<div className={hi.containerStyle2}>{"创建组件方式二"}<br />{"获取props值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className='content'>{"获取state值（读写）：" + this.state.name}</div><br /><button onClick={this.handleClink.bind(this)} className="btn btn-primary">修改state值</button></div>)
    }
}

11.React语法之组件事件

import React from 'react'
import hi from '@/css/hi.less'
import 'bootstrap/dist/css/bootstrap.css'export default class Hi extends React.Component{// 构造器
    constructor(props) {super(props)this.state = {name: 'god',seg: 0,nickName: [{id: 1, name: 'sa'},{id: 2, name: 'da'}, {id: 3, name: 'adac'},{id: 4, name: 'asx'}]}}handleClink() {console.log(this)this.setState({seg: this.state.seg + 1,name: this.state.name.substring(0, 3) + this.state.seg})}handleClinkNickName(item) {console.log("state nickName: {id=" + item.id + ",name=" + item.name + "}")}render() {return (<div className={hi.containerStyle2}>{"创建组件方式二"}<hr />{"获取props值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className='content'>{"获取state值（读写）：" + this.state.name}</div><hr /><button onClick={this.handleClink.bind(this)} className="btn btn-primary">修改state值</button><hr />{this.state.nickName.map(item =>{return (<div key={item.id}>{item.name}<button onClick={this.handleClinkNickName.bind(this, item)} className="btn btn-primary">获取本item值</button></div>)
        })}</div>)
    }
}

12.webpack语法之组件抽离成独立文件，在src下创建hello文件夹，并在其下创建Hello.jsx和Hi.jsx文件，修改index.js

// Hello.jsx
import React from 'react'// 创建组件方式一
export default function Hello(props) {return (<div className="container">{"创建组件方式一: 接收值（只读）：{name=" + props.name + ",age=" + props.age + ",sex=" + props.sex + "}"}</div>)
}

// Hi.jsx
import React from 'react'export default class Hi extends React.Component{render() {return (<div className="container">{"创建组件方式二: 接收值（只读）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}</div>)
    }
}

import React from 'react'
import ReactDOM from 'react-dom'// 创建组件方式一二
import Hello from './hello/Hello.jsx'
import Hi from './hello/Hi.jsx'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {name: 'pascall',age: 20,sex: 'man'
}// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(<div className="continer"><Hello {...c} /><hr /><Hi  {...c} /></div>, document.getElementById('app'))

13.webpack语法之配置省略后缀名（webpack.config.js）

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),  // 源文件路径filename: 'index.html'                               // 生成内存中首页的名称
})// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {mode: 'development', // development   production
    plugins: [htmlPlugin],// 所有第三方模块的配置规则
    module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}]},// 配置省略后缀名
    resolve: {// 默认.js, .jsonextensions: [".js", ".jsx", ".json"]}
}

import React from 'react'
import ReactDOM from 'react-dom'// 创建组件方式一二
import Hello from './hello/Hello'
import Hi from './hello/Hi'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {name: 'pascall',age: 20,sex: 'man'
}// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(<div className="continer"><Hello {...c} /><hr /><Hi  {...c} /></div>, document.getElementById('app'))

14.webpack语法之配置路径别名

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 创建一个插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),  // 源文件路径filename: 'index.html'                               // 生成内存中首页的名称
})// 向外暴露一个配置对象
// 因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack默认只能处理.js后缀名的文件，需要配置规则
module.exports = {mode: 'development', // development   production
    plugins: [htmlPlugin],// 所有第三方模块的配置规则
    module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}]},// 配置省略后缀名和路径别名
    resolve: {// 默认.js, .jsonextensions: [".js", ".jsx", ".json"],alias: {'@': path.join(__dirname, "./src")}}
}

import React from 'react'
import ReactDOM from 'react-dom'// 创建组件方式一二
import Hello from '@/hello/Hello'
import Hi from '@/hello/Hi'// 1.创建虚拟DOM元素
// parm1：字符串，元素名称
// parm2：对象或null，元素属性
// parm3：子节点（虚拟DOM或文本节点）
// ...
// parmn：子节点
// <div>欢迎</div>
const div = React.createElement('div', null, '欢迎')
// <h1 id="header">首页</h1>
const h1 = React.createElement('h1', {id: 'header'}, '首页，哈哈', div)const a = "欢迎来到JSX"
const b = ['sad', 'da', 'daszc', 'dafc']
const c = {name: 'pascall',age: 20,sex: 'man'
}// 2.渲染虚拟DOM
// parm1：虚拟DOM
// parm2：挂在节点
ReactDOM.render(<div className="continer"><Hello {...c} /><hr /><Hi  {...c} /></div>, document.getElementById('app'))

github.com-ReactDemo源码