寫(xiě)這篇文章的主要目的是為了加強(qiáng)自己的記憶臊岸，也給別的同事一個(gè)快速入門(mén)的教程。
如果你覺(jué)得下載React環(huán)境比較麻煩尊流，那么你可以直接打開(kāi)CodePen,在這個(gè)頁(yè)面直接進(jìn)行demo的練習(xí)可以很直觀的看到效果帅戒。
簡(jiǎn)單示例
介紹什么的就不說(shuō)了，百度一搜一大堆奠旺，我們直接進(jìn)入正題蜘澜。
先來(lái)一個(gè)最簡(jiǎn)單的演示：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
這段代碼就會(huì)在頁(yè)面上打出“Hello，world!”响疚，自己可以在上文介紹的鏈接中試一試。
JSX
這里先介紹一下jsx瞪醋，看名字很唬人忿晕，其實(shí)就是html和js的結(jié)合顯示，其實(shí)看起來(lái)有點(diǎn)像模板語(yǔ)言银受，例如freemarker践盼、thymeleaf等鸦采，具體怎么編譯和解析它，我們不用去關(guān)心咕幻，有專門(mén)的解析器(babel ...)去做這個(gè)事渔伯。
const element = <h1>Hello, world!</h1>;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
上面的“element”都符合jsx，并且jsx也可以給屬性賦值：
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
使用雙引號(hào)或者大括號(hào)均可賦值肄程，但是不能一起使用锣吼。
并且在被賦值的屬性一定是遵循駝峰命名法的例如上例中的“tabIndex”在html中是“tabindex”。
如果標(biāo)簽中沒(méi)有內(nèi)容形如<……><……/>可以直接寫(xiě)為</>蓝厌，例如：
const element = <img src={user.avatarUrl} />;
JSX也支持標(biāo)簽擁有子類玄叠，例如：
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
并且，JSX能夠有效的防止注入攻擊拓提，默認(rèn)情況下读恃，在呈現(xiàn)之前，DOM會(huì)轉(zhuǎn)義嵌入在JSX中的任何值代态。因此寺惫，它可以確保永遠(yuǎn)不會(huì)注入在應(yīng)用程序中沒(méi)有顯式編寫(xiě)的任何內(nèi)容。在呈現(xiàn)之前蹦疑，所有的內(nèi)容都轉(zhuǎn)換為字符串西雀。
在React中我們會(huì)大量的使用JSX和ES6語(yǔ)法，希望正在讀這篇文章的各位有這個(gè)基礎(chǔ)必尼，關(guān)于ES6的學(xué)習(xí)蒋搜，這里介紹ES6標(biāo)準(zhǔn)入門(mén)（第三版 阮一峰 著）。
當(dāng)然判莉，希望大家能去買(mǎi)正版的書(shū)豆挽，畢竟是人家的勞動(dòng)成果。
元素
元素（element）是React應(yīng)用中最小的構(gòu)建塊券盅。和瀏覽器DOM的element相比帮哈，React的element就是一個(gè)簡(jiǎn)單的對(duì)象，創(chuàng)建的代價(jià)相當(dāng)?shù)兔潭疲蒖eact DOM負(fù)責(zé)將React elements匹配到對(duì)應(yīng)的DOM節(jié)點(diǎn)娘侍。
注意：不要將元素（element）和組件（component）的概念混淆。
將元素渲染到DOM
首先泳炉，得創(chuàng)建一個(gè)接收節(jié)點(diǎn)：
<div id="root"></div>
在設(shè)計(jì)這個(gè)地方要顯示什么內(nèi)容的時(shí)候憾筏，要先考慮最終以什么樣的方式呈現(xiàn)內(nèi)容，因?yàn)橐话阒挥幸粋€(gè)root節(jié)點(diǎn)花鹅。
通過(guò)調(diào)用 ReactDOM.render() 將React element渲染到root DOM 節(jié)點(diǎn)：
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
你可以在CodePen中嘗試一下氧腰。
更新元素
React element 一旦創(chuàng)建就是不可變的，你不能改變他的屬性或是其他任何東西。如果你想要?jiǎng)討B(tài)的改變頁(yè)面的顯示古拴，那么最適合的方式就是重新創(chuàng)建一個(gè)element（如果名字相同箩帚，只會(huì)更新要修改的那一句，相當(dāng)高效）并調(diào)用ReactDOM.render()黄痪，舉個(gè)栗子 ^ _ ^：
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>
It is{' '}
{new Date().toLocaleTimeString()}.
</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
//你可以用瀏覽器調(diào)試工具監(jiān)控這段代碼的刷新情況紧帕，會(huì)有更深的印象。
好的桅打，先寫(xiě)這么多是嗜。如果對(duì)你的學(xué)習(xí)有用，請(qǐng)關(guān)注我~~
