React 学习
一、搭建webpack4.x環(huán)境
1.創(chuàng)建工程文件夾（ReactDemo）
2.在工程文件夾下，快速初始化項(xiàng)目
npm init -y // 創(chuàng)建一個(gè)package.json文件
3.在工程文件夾下，創(chuàng)建源碼文件夾（src）和編譯打包文件夾（dist）
4.在源碼文件夾下，創(chuàng)建index.html和入口index.js文件
5.在工程文件夾下，安裝webpack
npm i webpack webpack-cli -D
6.在工程文件夾下，創(chuàng)建webpack.config.js文件
// 向外暴露一個(gè)配置對(duì)象 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.在工程文件夾下，執(zhí)行打包，會(huì)在dist文件夾下生成main.js
npm run dev
二、工具使用
1.配置實(shí)時(shí)打包
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：自動(dòng)打開(kāi)瀏覽器（谷歌），--port：指定端口，--hot：熱打包，--host：指定地址
2.配置將html頁(yè)面加載到內(nèi)存中
npm i html-webpack-plugin -D
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')// 創(chuàng)建一個(gè)插件實(shí)例對(duì)象 const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 源文件路徑filename: 'index.html' // 生成內(nèi)存中首頁(yè)的名稱(chēng) })// 向外暴露一個(gè)配置對(duì)象 // 因?yàn)?webpack 是基于Node構(gòu)建的；所以 webpack 支持所有Node API 和語(yǔ)法 // 那些 特性 Node 支持呢？Node是基于Chrome V8引擎實(shí)現(xiàn)的Javascript運(yùn)行環(huán)境，如果 chrome 瀏覽器支持哪些，則 Node 就支持哪些； module.exports = {mode: 'development', // development production plugins: [htmlPlugin] }
三、配置React
1.引入包，react用于創(chuàng)建虛擬DOM和生命周期，react-dom用于將虛擬DOM渲染到頁(yè)面
npm i react react-dom -S
2.配置index.js文件
import React from 'react' import ReactDOM from 'react-dom'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈')// 2.渲染虛擬DOM // parm1：虛擬DOM // parm2：掛在節(jié)點(diǎn) ReactDOM.render(h1, document.getElementById('app'))
3.配置識(shí)別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')// 創(chuàng)建一個(gè)插件實(shí)例對(duì)象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 源文件路徑filename: 'index.html' // 生成內(nèi)存中首頁(yè)的名稱(chēng)
})// 向外暴露一個(gè)配置對(duì)象
// 因?yàn)?webpack 是基于Node構(gòu)建的；所以 webpack 支持所有Node API 和語(yǔ)法
// webpack默認(rèn)只能處理.js后綴名的文件，需要配置規(guī)則
module.exports = {mode: 'development', // development production
plugins: [htmlPlugin],// 所有第三方模塊的配置規(guī)則
module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}]}
}
// 以下的寫(xiě)法不行，這是ES6中向外導(dǎo)出模塊的API，與之對(duì)應(yīng)的是import ** from '標(biāo)識(shí)符'
// export default {} import React from 'react' import ReactDOM from 'react-dom'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') const divJsx = <div>歡迎JSX</div>// <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', div, divJsx)// 2.渲染虛擬DOM // parm1：虛擬DOM // parm2：掛在節(jié)點(diǎn) ReactDOM.render(divJsx, document.getElementById('app'))
4.React語(yǔ)法之引用變量
import React from 'react' import ReactDOM from 'react-dom'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', div)const a = "歡迎JSX" const divJsx = <div>{a}</div>// 2.渲染虛擬DOM // parm1：虛擬DOM // parm2：掛在節(jié)點(diǎn) ReactDOM.render(divJsx, document.getElementById('app'))
5.React語(yǔ)法之引用變量數(shù)組使用map
import React from 'react' import ReactDOM from 'react-dom'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', 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：掛在節(jié)點(diǎn) ReactDOM.render(divJsx, document.getElementById('app'))
5.React語(yǔ)法之注意事項(xiàng)
- 屬性：使用className替代class，使用htmlFor替代label的for
- jsx注釋：{ /* 這是注釋 */ }
- 虛擬DOM：在jsx創(chuàng)建DOM時(shí)，所有節(jié)點(diǎn)必須有唯一的根節(jié)點(diǎn)包裹
- 標(biāo)簽：須成對(duì)出現(xiàn)（必須紫自閉合）
- 事件：屬性名須小駝峰onClick
6.React語(yǔ)法之創(chuàng)建組件
import React from 'react' import ReactDOM from 'react-dom'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', div)const a = "歡迎來(lái)到JSX" const b = ['sad', 'da', 'daszc', 'dafc']// 創(chuàng)建組件方式一 function Hello() {return (<div className="container">{a}<hr />{"創(chuàng)建組件方式一"}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>) }// 創(chuàng)建組件方式二 class He extends React.Component{render() {return (<div className="container">{a}<hr />{"創(chuàng)建組件方式二"}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>)} }// 2.渲染虛擬DOM // parm1：虛擬DOM // parm2：掛在節(jié)點(diǎn) ReactDOM.render(<div className="continer"><Hello /><hr /><He /></div>, document.getElementById('app'))
7.React語(yǔ)法之給主鍵傳值（只讀）
import React from 'react' import ReactDOM from 'react-dom'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', div)const a = "歡迎來(lái)到JSX" const b = ['sad', 'da', 'daszc', 'dafc'] const c = {name: 'pascall',age: 20,sex: 'man' }// 創(chuàng)建組件方式一 function Hello(props) {return (<div className="container">{a}<hr />{"創(chuàng)建組件方式一: 接收值（只讀）：{name=" + props.name + ",age=" + props.age + ",sex=" + props.sex + "}"}<hr />{b.map(item => <div key={item}>{item}</div>)}</div>) }// 創(chuàng)建組件方式二 class He extends React.Component{render() {return (<div className="container">{a}<hr />{"創(chuàng)建組件方式二: 接收值（只讀）：{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：掛在節(jié)點(diǎn) ReactDOM.render(<div className="continer"><Hello {...c} /><hr /> <He {...c} /></div>, document.getElementById('app'))
8.React語(yǔ)法之組件內(nèi)部屬性state創(chuàng)建和獲取
import React from 'react'export default class Hi extends React.Component{// 構(gòu)造器 constructor(props) {super(props)this.state = {name: 'god'}}render() {return (<div className="container">{"創(chuàng)建組件方式二"}<br />{"獲取props值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}{"獲取state值（讀寫(xiě)）：" + this.state.name}</div>) } }
9.React語(yǔ)法之組件內(nèi)部屬性state修改
import React from 'react'export default class Hi extends React.Component{// 構(gòu)造器 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">{"創(chuàng)建組件方式二"}<br />{"獲取props值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}{"獲取state值（讀寫(xiě)）：" + this.state.name}<br /><button onClick={this.handleClink.bind(this)}>修改state值</button></div>) } }
10.React語(yǔ)法之組件內(nèi)部css樣式
-
方式一：行內(nèi)樣式
import React from 'react'export default class Hi extends React.Component{// 構(gòu)造器 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">{"創(chuàng)建組件方式二"}<br />{"獲取props值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}{"獲取state值（讀寫(xiě)）：" + this.state.name}<br /><button onClick={this.handleClink.bind(this)} style={{color: 'red'}}>修改state值</button></div>) } }
-
方式二：外聯(lián)樣式(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')// 創(chuàng)建一個(gè)插件實(shí)例對(duì)象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 源文件路徑filename: 'index.html' // 生成內(nèi)存中首頁(yè)的名稱(chēng)
})// 向外暴露一個(gè)配置對(duì)象
// 因?yàn)?webpack 是基于Node構(gòu)建的；所以 webpack 支持所有Node API 和語(yǔ)法
// webpack默認(rèn)只能處理.js后綴名的文件，需要配置規(guī)則
module.exports = {mode: 'development', // development production
plugins: [htmlPlugin],// 所有第三方模塊的配置規(guī)則
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: {// 默認(rèn).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{// 構(gòu)造器 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}>{"創(chuàng)建組件方式二"}<br />{"獲取props值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className={hi.content}>{"獲取state值（讀寫(xiě)）：" + this.state.name}</div><br /><button onClick={this.handleClink.bind(this)}>修改state值</button></div>) } }
.containerStyle2{.content{color: red}
} - 樣式作用域（默認(rèn)全局）（配置局部）普通樣式模塊化局部或全局
// hi.less // :local：會(huì)被模塊化，隱式使用，所以不用顯示使用 // :local(.containerStyle2)與.containerStyle2效果一致 // :global：不會(huì)被模塊化 :local(.containerStyle2){:global(.content){color: red} }
import React from 'react' import hi from '@/css/hi.less'export default class Hi extends React.Component{// 構(gòu)造器 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}>{"創(chuàng)建組件方式二"}<br />{"獲取props值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className='content'>{"獲取state值（讀寫(xiě)）：" + 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')// 創(chuàng)建一個(gè)插件實(shí)例對(duì)象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 源文件路徑filename: 'index.html' // 生成內(nèi)存中首頁(yè)的名稱(chēng)
})// 向外暴露一個(gè)配置對(duì)象
// 因?yàn)?webpack 是基于Node構(gòu)建的；所以 webpack 支持所有Node API 和語(yǔ)法
// webpack默認(rèn)只能處理.js后綴名的文件，需要配置規(guī)則
module.exports = {mode: 'development', // development production
plugins: [htmlPlugin],// 所有第三方模塊的配置規(guī)則
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: {// 默認(rèn).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{// 構(gòu)造器 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}>{"創(chuàng)建組件方式二"}<br />{"獲取props值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className='content'>{"獲取state值（讀寫(xiě)）：" + this.state.name}</div><br /><button onClick={this.handleClink.bind(this)} className="btn btn-primary">修改state值</button></div>) } }
11.React語(yǔ)法之組件事件
import React from 'react' import hi from '@/css/hi.less' import 'bootstrap/dist/css/bootstrap.css'export default class Hi extends React.Component{// 構(gòu)造器 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}>{"創(chuàng)建組件方式二"}<hr />{"獲取props值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}<div className='content'>{"獲取state值（讀寫(xiě)）：" + 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語(yǔ)法之組件抽離成獨(dú)立文件，在src下創(chuàng)建hello文件夾，并在其下創(chuàng)建Hello.jsx和Hi.jsx文件，修改index.js
// Hello.jsx import React from 'react'// 創(chuàng)建組件方式一 export default function Hello(props) {return (<div className="container">{"創(chuàng)建組件方式一: 接收值（只讀）：{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">{"創(chuàng)建組件方式二: 接收值（只讀）：{name=" + this.props.name + ",age=" + this.props.age + ",sex=" + this.props.sex + "}"}</div>) } }
import React from 'react' import ReactDOM from 'react-dom'// 創(chuàng)建組件方式一二 import Hello from './hello/Hello.jsx' import Hi from './hello/Hi.jsx'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', div)const a = "歡迎來(lái)到JSX" const b = ['sad', 'da', 'daszc', 'dafc'] const c = {name: 'pascall',age: 20,sex: 'man' }// 2.渲染虛擬DOM // parm1：虛擬DOM // parm2：掛在節(jié)點(diǎn) ReactDOM.render(<div className="continer"><Hello {...c} /><hr /><Hi {...c} /></div>, document.getElementById('app'))
13.webpack語(yǔ)法之配置省略后綴名（webpack.config.js）
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 創(chuàng)建一個(gè)插件實(shí)例對(duì)象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 源文件路徑filename: 'index.html' // 生成內(nèi)存中首頁(yè)的名稱(chēng)
})// 向外暴露一個(gè)配置對(duì)象
// 因?yàn)?webpack 是基于Node構(gòu)建的；所以 webpack 支持所有Node API 和語(yǔ)法
// webpack默認(rèn)只能處理.js后綴名的文件，需要配置規(guī)則
module.exports = {mode: 'development', // development production
plugins: [htmlPlugin],// 所有第三方模塊的配置規(guī)則
module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}]},// 配置省略后綴名
resolve: {// 默認(rèn).js, .jsonextensions: [".js", ".jsx", ".json"]}
} import React from 'react' import ReactDOM from 'react-dom'// 創(chuàng)建組件方式一二 import Hello from './hello/Hello' import Hi from './hello/Hi'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', div)const a = "歡迎來(lái)到JSX" const b = ['sad', 'da', 'daszc', 'dafc'] const c = {name: 'pascall',age: 20,sex: 'man' }// 2.渲染虛擬DOM // parm1：虛擬DOM // parm2：掛在節(jié)點(diǎn) ReactDOM.render(<div className="continer"><Hello {...c} /><hr /><Hi {...c} /></div>, document.getElementById('app'))
14.webpack語(yǔ)法之配置路徑別名
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 創(chuàng)建一個(gè)插件實(shí)例對(duì)象
const htmlPlugin = new HtmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 源文件路徑filename: 'index.html' // 生成內(nèi)存中首頁(yè)的名稱(chēng)
})// 向外暴露一個(gè)配置對(duì)象
// 因?yàn)?webpack 是基于Node構(gòu)建的；所以 webpack 支持所有Node API 和語(yǔ)法
// webpack默認(rèn)只能處理.js后綴名的文件，需要配置規(guī)則
module.exports = {mode: 'development', // development production
plugins: [htmlPlugin],// 所有第三方模塊的配置規(guī)則
module: {rules: [{test: /\.js|jsx$/, use: ['babel-loader'], exclude: /node_modules/}]},// 配置省略后綴名和路徑別名
resolve: {// 默認(rèn).js, .jsonextensions: [".js", ".jsx", ".json"],alias: {'@': path.join(__dirname, "./src")}}
} import React from 'react' import ReactDOM from 'react-dom'// 創(chuàng)建組件方式一二 import Hello from '@/hello/Hello' import Hi from '@/hello/Hi'// 1.創(chuàng)建虛擬DOM元素 // parm1：字符串，元素名稱(chēng) // parm2：對(duì)象或null，元素屬性 // parm3：子節(jié)點(diǎn)（虛擬DOM或文本節(jié)點(diǎn)） // ... // parmn：子節(jié)點(diǎn) // <div>歡迎</div> const div = React.createElement('div', null, '歡迎') // <h1 id="header">首頁(yè)</h1> const h1 = React.createElement('h1', {id: 'header'}, '首頁(yè)，哈哈', div)const a = "歡迎來(lái)到JSX" const b = ['sad', 'da', 'daszc', 'dafc'] const c = {name: 'pascall',age: 20,sex: 'man' }// 2.渲染虛擬DOM // parm1：虛擬DOM // parm2：掛在節(jié)點(diǎn) ReactDOM.render(<div className="continer"><Hello {...c} /><hr /><Hi {...c} /></div>, document.getElementById('app'))
?github.com-ReactDemo源碼
轉(zhuǎn)載于:https://www.cnblogs.com/pascall/p/11482073.html
總結(jié)
- 上一篇： 赖茅酒多少钱啊？
- 下一篇： 互联网公司java面试题（一）