React介紹：
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架钢猛，都不滿(mǎn)意伙菜，就決定自己寫(xiě)一套，用來(lái)架設(shè)Instagram 的網(wǎng)站厢洞。
React組件化：
React的組件化很神奇仇让，可以把自己寫(xiě)的某一個(gè)功能封裝成一個(gè)組件典奉，需要它的時(shí)候在調(diào)用這個(gè)組件。
React組件化的特點(diǎn)：
組合：簡(jiǎn)單組件可組合為復(fù)雜組件
重用：組件獨(dú)立丧叽，可被多個(gè)組件使用
測(cè)試：組件獨(dú)立卫玖，便于測(cè)試
維護(hù)：UI和組件相關(guān)邏輯都封裝在組件內(nèi)部，便于維護(hù)
接下來(lái)我們進(jìn)入正題踊淳，React的基礎(chǔ)
在使用React之前假瞬，我們來(lái)了解一下React的結(jié)構(gòu)
ReactDOM.render(element,document.getElementById('root'))
這是一個(gè)最簡(jiǎn)單的React語(yǔ)句，element就是頁(yè)面上要顯示的內(nèi)容，記住在element里面一定要給父標(biāo)簽包圍所有的語(yǔ)句。document.getElementById('root')就是我們要element放入到一個(gè)id為root的標(biāo)簽里面互艾。
react語(yǔ)句一般是寫(xiě)在js里面的昔头。所以需要ReactDOM.render來(lái)渲染到HTML頁(yè)面上。
我們來(lái)列舉幾個(gè)例子：
HTML代碼：<div id="root"></div>
js代碼：
const element = (
? ? ? <div>
? ? ? ? ? <h1>這是一個(gè)React組件</h1>? ? ?
? ? ? </div>
)
ReactDOM.render(element,document.getElementById('root'));
結(jié)果：
注意：在react里面寫(xiě)樣式凫佛，class改為className,style=""變?yōu)閟tyle={{樣式名：‘樣式值’，...}}
在寫(xiě)React之前記住要引入React
有兩種引入的方式：
第一種在html 里面導(dǎo)入React
<script src="HTTP://www.w3cschool.cn/statics/assets/react/react.min.js"></script>
<script src="HTTP://www.w3cschool.cn/statics/assets/react/react-dom.min.js"></script>
<script src="HTTP://www.w3cschool.cn/statics/assets/react/babel.min.js"></script>
<body>
html代碼
</body>
<script type="text/babel">在這寫(xiě)React代碼</script>
第二種創(chuàng)建React項(xiàng)目
在此之前要先安裝Node.js
Node.js 安裝包及源碼下載地址為：https://nodejs.org/en/download/
Node.js 讓它默認(rèn)安裝在C盤(pán)，這樣不會(huì)出現(xiàn)安裝不成功的錯(cuò)誤榜田，一定要記住它安裝在C盤(pán)的哪個(gè)位置
安裝好Node我們開(kāi)始創(chuàng)建React項(xiàng)目：
點(diǎn)擊Next，Project name是我們項(xiàng)目的名字锻梳，可以自定義一個(gè)箭券；Project location是我們創(chuàng)建這個(gè)項(xiàng)目的位置，Node interpreter就是我們之前安裝好的Node.js的位置疑枯，找到我們安裝的位置辩块。
create-react-app就是我們我們電腦C盤(pán)的用戶(hù)里面AppData\Roaming\npm\node_modules\create-react-app
點(diǎn)擊Finish，等待一段時(shí)間荆永，React項(xiàng)目就創(chuàng)建好了
查看一下項(xiàng)目創(chuàng)建成功后上圖的文件有不有废亭，沒(méi)有可能沒(méi)有創(chuàng)建成功。
項(xiàng)目創(chuàng)建好了具钥，我們進(jìn)行下一步滔以，
項(xiàng)目的右上角，點(diǎn)擊Debug Application,選擇第一個(gè)Edit Configurations...,
點(diǎn)擊上面的+號(hào)氓拼，找到npm
Name 為start你画；package.json就是我們剛創(chuàng)好的項(xiàng)目下面的package.json文件；找到我們文件下面的package.json 文件桃漾；Command選run坏匪；Scripts選start,Node interpreter就是我們安裝好的node的位置；package manager 就是npm的位置撬统，npm位置就是我們安裝的node.js下面node_modules下面的npm;
點(diǎn)擊Apply,然后OK
上面就變成start,以后我們運(yùn)行項(xiàng)目就是點(diǎn)擊start旁邊的綠色三角形
注意：國(guó)內(nèi)使用 npm 速度很慢适滓，你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm
語(yǔ)句是：npm install -g cnpm --registry=https://registry.npm.taobao.org
可以在項(xiàng)目下面的Terminal里面安裝，這樣以后的npm就改為cnpm
安裝好鏡像恋追，點(diǎn)擊start旁邊的綠色三角形凭迹，啟動(dòng)項(xiàng)目罚屋，讓項(xiàng)目運(yùn)行起來(lái)，在流量器里輸入localhost：3000嗅绸，然后回車(chē)就可以看到了脾猛，因?yàn)槲业?000端口被占用了，所以是3001
React項(xiàng)目就創(chuàng)建好了
這樣就引入了React了
