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)境都配置不出來析显。當(dāng)然還有很多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é)上，當(dāng)然ES6絕對是重中之重耙饰，理解react的必備纹笼，但是這個教程是讓你迅速上手出活，而不是教你原理苟跪。
直接上ES6對比ES6
? let ->var
? const ->var 當(dāng)時不能改廷痘，常量
? import 相當(dāng)于 src
? class ES5里面的 對象
? arr.map函數(shù)
? 箭頭函數(shù) 直接說
([param] [, param]) => {? statements}param => expression() => { ... }// 零個參數(shù)用 () 表示蔓涧；x => { ... }// 一個參數(shù)可以省略 ()；(x, y) => { ... }// 多參數(shù)不能省略 ()笋额；
好元暴，我們繼續(xù)回到正題，模塊化的使用react兄猩，前面我們使用過引用react庫的方式茉盏，而實際項目中更常見的方式是我們通過NPM/yarn等，管理項目功能和模塊枢冤，不多說我們還是從一個最簡單的hello world開始鸠姨。
二、react的常用例子
直接上安裝react和相關(guān)環(huán)境掏导，
npminstall-gcreate-react-appcreate-react-apphello-worldcdhello-worldnpmstart
注意享怀，很多教程是從webpack,BabelandESLint等配置開始的，其實不用趟咆，上面的工作其實就是幫你配置這些添瓷，當(dāng)然了，你如果能夠了解如何配置更好值纱，但是現(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(? ? ? ?
{props.txt}
? ? ?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
三、實際項目生產(chǎn)環(huán)境搭建
四圃泡、webpack的配置和使用
五碟案、react 模塊路由 組件嵌套等。
六颇蜡、數(shù)據(jù)交互和持久化
轉(zhuǎn)載至http://www.reibang.com/p/bdde7880387a
