react+webpack項目實際開發(fā)應(yīng)用
在《react入門》和《react入門提高》中我講了月洛，react的基礎(chǔ)應(yīng)用，讓大家能夠迅速的上手使用孽锥，但是只是上手使用嚼黔，為什么那么多的人照著我的例子能敲出來，而實際項目中寫起來卻困難重重呢惜辑？原因有三唬涧。
1.知其然不知其所以然，你只會了JSX語法盛撑，卻只能照貓畫虎碎节，卻不知道react背后的基礎(chǔ)知識，如果你連JSX最后會編譯成js都不知道抵卫，或者編譯成的js都讀不懂狮荔，那更不用談靈活擴展和開發(fā)了胎撇。
2.一個項目要想開發(fā)出來僅僅需要只知道react還需要知道很多知識，比如現(xiàn)在很多教程和項目都是webpack構(gòu)建打包的殖氏，如果你不會webpack那么晚树，你甚至連基礎(chǔ)的開發(fā)環(huán)境都配置不出來。當然還有很多react和react周邊的知識雅采，單純一個hello word 或者 幾個函數(shù)和語法的使用介紹是搞不定的爵憎。
? 至少你需要知道一下知識，才能順利的完成一個完整的項目：
? 首先是關(guān)于react的：
? 1.jsx語法
? 2.狀態(tài)
? 3屬性
? 4.組件
? 5.組件生命周期
? 6.事件
? 然后是基礎(chǔ)工作：
? ES6
? bebel編譯
? webpack
? 然后是數(shù)據(jù)交互和保存和常用的功能
? 1.路由
? 2.數(shù)據(jù)交互
? 3.數(shù)據(jù)持久化
3.日常我們看例子的時候很多是“套件化”总滩，很多人都是用 react+flux等纲堵，一旦你不用你就不會了巡雨，還有人使用
引入link方式開發(fā)react,還有人npm去安裝闰渔，還有人用wepack各種技術(shù)組合亂七八糟，五花八門铐望，加上技術(shù)更新快
很多例子都跑步起來了在新的語法下冈涧，即使老的很多時候不得不面對網(wǎng)絡(luò)翻墻的問題。
? 針對這些問題正蛙，我分三部分去說督弓，
? 1.ES6基礎(chǔ)知識
? 箭頭函數(shù)
? class
? 模塊導(dǎo)入導(dǎo)出
? 解釋下jsx編譯后成js的代碼的原理和意思。
? 入門的react小例子
? 2.react生產(chǎn)環(huán)境 注意是生產(chǎn)不是開發(fā)乒验，區(qū)別在于是實際項目而不是演示愚隧，兩者不同。
? npm搭建環(huán)境
? webpack使用
? bebel的使用
? react路由
? react熱插拔
? 組件嵌套和數(shù)據(jù)傳遞
? 3.數(shù)據(jù)交互與持久化
一锻全、ES6基礎(chǔ)速查
? 這里的ES6知識并不是告訴你準確的東西狂塘，而是讓你在一分鐘之內(nèi)了解ES6，讓你順利的學(xué)習(xí)react,而不是耗費精力在細枝末節(jié)上鳄厌，當然ES6絕對是重中之重荞胡，理解react的必備，但是這個教程是讓你迅速上手出活了嚎，而不是教你原理泪漂。
直接上ES6對比ES6
? let ->var
? const ->var 當時不能改，常量
? import 相當于 src
? class ES5里面的 對象
? arr.map函數(shù)
? 箭頭函數(shù) 直接說
? ??statements
() => { ... }// 零個參數(shù)用 () 表示歪泳；
好呐伞，我們繼續(xù)回到正題敌卓，模塊化的使用react，前面我們使用過引用react庫的方式荸哟，而實際項目中更常見的方式是我們通過NPM/yarn等假哎，管理項目功能和模塊瞬捕，不多說我們還是從一個最簡單的hello world開始。
二舵抹、react的常用例子
直接上安裝react和相關(guān)環(huán)境肪虎，
npminstall-gcreate-react-app
create-react-apphello-world
cd hello-world
npm ?start
注意，很多教程是從webpack,BabelandESLint等配置開始的惧蛹，其實不用扇救，上面的工作其實就是幫你配置這些，當然了香嗓，你如果能夠了解如何配置更好迅腔，但是現(xiàn)在是學(xué)react所以我盡量不引人新知識，想讓大家會用靠娱。
注意這個是開發(fā)過程沧烈，如果是上線 使用命令
npmrunbuild 最后會將上線文件放到 build文件夾下
大部分時間我們是和app.js打交道，不墨跡開整像云。
1.先看看app.js里面寫的啥锌雀？
classAppextendsComponent{? render(){return(? ? ? ?
hello word
? ? );? } }
我們對比一下之前函數(shù)的寫法
ReactDOM.render(
Hello, world!
,document.getElementById('root'));
注意：推薦大家使用第一種寫法，為什么迅诬？因為第一種寫法有狀態(tài)腋逆，函數(shù)的寫法沒有。后面我們會說為什么侈贷。
我們繼續(xù)折騰app.js
2.下面我們說下惩歉，在react中的屬性使用
classAppextendsComponent{? render(){return(? ? ? ?
{this.props.index}
? ? );? } }ReactDOM.render(? ? //注意自封閉，txt就是屬性document.getElementById('div1'););
3.下面說一下個對應(yīng)第一個第一篇文章的狀態(tài)管理俏蛮。先看代碼
classAppextendsComponent{? ? constructor(){super();//不用你理解撑蚌，你只要記住一件事 super調(diào)用父類的構(gòu)造器，使用this的話必須先執(zhí)行它嫁蛇。this.state = {? ? ? ? ? ? ? name:'尼古拉斯·屌·大彬哥'? ? ? ? ? };? ? }? ? update(e){this.setState({? ? ? ? ? name:e.target.value? ? ? ? ? });? ? }? ? render(){return(? ? ? ? ?
{this.state.name}
? ? ? );? ? } }
4.多個組件嵌套 App 這個組件里面嵌套著 Widget
importReact, { Component } from'react';classAppextendsComponent{constructor(){super();//不用你理解锨并，你只要記住一件事 super調(diào)用父類的構(gòu)造器，使用this的話必須先執(zhí)行它睬棚。this.state = {? ? ? ? ? ? ? txt:''};this.update =this.update.bind(this);? ? }? ? update(e){this.setState({? ? ? ? ? ? txt:e.target.value? ? ? ? });? ? }? ? render(){return(? ? ? ?
? ? ? );? ? } }const Widget = (props) => {return(? ? ?
{props.txt}
? ? );}exportdefaultApp;
5.作為例子肯定少不了列表循環(huán)
classAppextendsComponent{constructor(){super();//不用你理解第煮，你只要記住一件事 super調(diào)用父類的構(gòu)造器，使用this的話必須先執(zhí)行它抑党。this.state = {data:[? ? ? ? ? ? ? {name:"leo",age:18},? ? ? ? ? ? ? {name:"alice",age:19},? ? ? ? ? ? ? {name:"blue",age:17},? ? ? ? ? ? ? ]? ? ? ? ? };? ? }? ? render(){letrows =this.state.data.map(person=>{return});? ? ? return (
rows
);? ? } }const PersonRow = (props)=>{? return (
{props.data.name}-----{props.data.age}
);}
三包警、實際項目生產(chǎn)環(huán)境搭建
四、webpack的配置和使用
五底靠、react 模塊路由 組件嵌套等害晦。
六、數(shù)據(jù)交互和持久化
