當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

React 学习

發布時間：2023/11/27 生活经验 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 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源碼

轉載于:https://www.cnblogs.com/pascall/p/11482073.html

總結

以上是生活随笔為你收集整理的React 学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

React