摘要:如果你不想這樣每次改完代碼都要手動編譯,而且自己啟動,那么就要用到這個玩意。
</>復制代碼
通過配置webpack-dev-server啟動一個webserver,自動編譯,自動刷新瀏覽器的功能,我們開啟React基礎速過
接上一篇:構建React開發環境
使用webpack-dev-server
按照上篇文章構建好React開發環境后,我們發現每次寫完代碼還需要手動編譯,并且需要自己啟動一個webserver才可以在瀏覽器預覽效果。
如果你不想這樣每次改完代碼都要手動編譯,而且自己啟動webserver,那么就要用到webpack-dev-server這個玩意。
注意,這玩意就是開發時用用的,不要用于生產環境!
這玩意還有一個好處,是在改完代碼后,自動刷新瀏覽器,下面動手加上這貨吧
使用yarn安裝webpack-dev-server 到開發依賴中
</>復制代碼
yarn add -D webpack-dev-server
添加webpack配置,配置devServer
</>復制代碼
vi webpack.config.js
"use strict";
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
mode: "development",
entry: {
app: "./src/js/index"
},
output: {
filename: "[name].js",
path: path.join(__dirname, "build")
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/pages/index.html"
})
],
module: {
rules: [
{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
// 過濾
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
};
module.exports = config;
在package.json中添加一個scripts
</>復制代碼
"dev": "webpack-dev-server"
啟動webpack-dev-server
</>復制代碼
yarn run dev
之后就可以自動編譯并啟動一個webserver,用瀏覽器訪問http://localhost:9000
React的元素
React的元素必須要有一個根元素包裹起來,如:
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
let me = 編程故事
ReactDOM.render(
me, // 使用元素
document.getElementById("root")
);
元素里面可以包含js的表達式,表達式使用大括號{}包起來
</>復制代碼
let me = 編程故事{alert("編程故事")}
React的組件
React的組件使用ES2015中的Class方式定義
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
// 組件可以外部定義然后在使用的地方在引入
class Me extends React.Component {
render() {
return dongjun{(function(){alert("編程故事")})()}
}
}
ReactDOM.render(
,
document.getElementById("root")
);
React組件的props傳遞
父組件給子組件傳遞數據,是通過給子組件上定義屬性,在子組件中通過this.props獲取
傳遞多個屬性:
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
class Me extends React.Component {
render() {
return {this.props.site} - {this.props.sologen} - {this.props.url}
}
}
ReactDOM.render(
,
document.getElementById("root")
);
也可以傳遞一個對象給子組件的屬性,在子組件也要通過對象的方式去獲取
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
class Me extends React.Component {
render() {
return {this.props.site.name} - {this.props.site.sologen} - {this.props.site.url}
}
}
const map = {
name: "編程故事",
sologen: "我的故事,也許也是你的故事",
url: "https://www.mi360.cn"
};
ReactDOM.render(
,
document.getElementById("root")
);
還可以使用ES2015中的解構賦值
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
class Me extends React.Component {
render() {
return {this.props.name} - {this.props.sologen} - {this.props.url}
}
}
const map = {
name: "編程故事",
sologen: "我的故事,也許也是你的故事",
url: "https://www.mi360.cn"
};
ReactDOM.render(
,
document.getElementById("root")
);
React的事件
在組件中定義事件處理方法,在組件的render()方法中定義事件監聽
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
class Me extends React.Component {
showMe() {
alert("編程故事");
}
render() {
return
{this.props.name} - {this.props.sologen} - {this.props.url}
}
}
const map = {
name: "編程故事",
sologen: "我的故事,也許也是你的故事",
url: "https://www.mi360.cn"
};
ReactDOM.render(
,
document.getElementById("root")
);
還可以使用箭頭函數直接在事件監聽中處理
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
class Me extends React.Component {
showMe() {
alert("編程故事");
}
render() {
return
{this.props.name} - {this.props.sologen} - {this.props.url}
{
alert("編程故事")
}} type="button" value="按鈕"/>
}
}
const map = {
name: "編程故事",
sologen: "我的故事,也許也是你的故事",
url: "https://www.mi360.cn"
};
ReactDOM.render(
,
document.getElementById("root")
);
父組件傳遞數組給子組件遍歷
</>復制代碼
"use strict";
import React from "react";
import ReactDOM from "react-dom";
class Me extends React.Component {
render() {
return
{this.props.data.map((item) => {
return {
alert(item.name)
}
}>{item.name} - {item.sologen} - {item.url}
})}
}
}
const map = [{
name: "編程故事",
sologen: "我的故事,也許也是你的故事",
url: "https://www.mi360.cn"
},{
name: "246哈",
sologen: "開心很簡單",
url: "https://www.246ha.com"
}];
ReactDOM.render(
,
document.getElementById("root")
);
原文鏈接:https://www.mi360.cn/articles...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/105860.html
摘要:我們可以使用函數構造函數將我們的組件轉換為狀態什么是函數構造函數在中,函數是一個在創建對象時運行的函數。我們將使用構造函數方法在對象創建時正確運行對象時設置實例變量。每當一個有一個屬性被設置時,它會在該字段改變的每個時間調用函數。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3823原文:https://www.fullsta...
摘要:小明小明兒子,可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件,當一個表單的值是通過改變的而不是通過是受控組件,否則就是非受控組件。 react眾所周知的前端3大主流框架之一,由于出色的性能,完善的周邊設施風頭一時無兩。本文就帶大家一起掌握react。 jsx語法 前端MVVM主流框架都有一套自己的模板處理方法,react則使用它獨特的jsx...
摘要:但在中會有些不同,包含表單元素的組件將會在中追蹤輸入的值,并且每次調用回調函數時,如會更新,重新渲染組件。在構造函數中調用的目的是什么在被調用之前,子類是不能使用的,在中,子類必須在中調用。將使用單個事件監聽器監聽頂層的所有事件。 已經開源 地址:https://github.com/nanhupatar...關注我們團隊:showImg(https://segmentfault.co...
摘要:背景介紹入門實例教程起源于的內部項目,因為該公司對市場上所有框架,都不滿意,就決定自己寫一套,用來架設的網站。做出來以后,發現這套東西很好用,就在年月開源了。也就是說,通過鉤子函 react - JSX React 背景介紹 React 入門實例教程 React 起源于 Facebook 的內部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套...
閱讀 3526·2023-04-25 17:35
閱讀 2600·2021-11-24 09:39
閱讀 2538·2021-10-18 13:32
閱讀 3425·2021-10-11 10:58
閱讀 1643·2021-09-26 09:55
閱讀 6179·2021-09-22 15:47
閱讀 973·2021-08-26 14:15
閱讀 3477·2019-08-30 15:55