React
引子
你問我為什么寫博客? 因?yàn)榘⒗辜訍蹖慴ugger０荨！抡秆！
微信公眾號：愛寫bugger的阿拉斯加
如有問題或建議镐侯，請前往公眾號侦讨，我們一起交流如何寫bugger !
首先
學(xué)一門技術(shù)之前驶冒，首先得知道三件事：
- 是什么東西苟翻？
- 能干什么？
- 怎么用骗污？
1. React是什么崇猫？
在react還沒出來之前，Jquery與angular還一直在打架需忿，打架诅炉？噢No! 說錯(cuò)，是二虎在爭奪前端江山屋厘。jquery做為前端大佬已經(jīng)好多年了涕烧，雖然統(tǒng)治力強(qiáng)，而angular做為新一代許文強(qiáng)汗洒，潛力非凡议纯，打著打著，過了一二年溢谤，眼看angular就要大勝之際瞻凤，殺出個(gè)第三者新二代許文強(qiáng)react憨攒，從此三人混架了，再后來第四者新三代許文強(qiáng) vue 又出來了阀参，畢竟長江后浪推前浪肝集，前浪死在沙灘上，最終jquery慘淡收場蛛壳，而前端界形成了三足鼎立之勢杏瞻。react、vue炕吸、angular伐憾。
React 來自于 Facebook。
特點(diǎn)：
- 聲明式
- 組件化
- 一次學(xué)習(xí)赫模，到處編碼
2. react 能干什么?
用于構(gòu)建用戶界面的 JavaScript 庫树肃。
能做更多：
1、Web: https://facebook.github.io/react/
2瀑罗、Native: https://facebook.github.io/react-native/
3胸嘴、TV: https://github.com/jordanbyron/react-native/tree/tvOS
4、Desktop: https://github.com/ptmt/react-native-desktop
…
React 特性：
1斩祭、用 JSX 語法取代 HTML 模板劣像，在 JavaScript 里聲明式地描述 UI
2、虛擬 DOM 取代物理 DOM 作為操作對象摧玫，封裝了 DOM 的事件系統(tǒng)
3耳奕、單向數(shù)據(jù)流動(dòng)
4、組件和基于組件的設(shè)計(jì)流程
3. react 怎么用诬像？
1. JSX
Facebook 創(chuàng)造了 JSX 語法屋群，取代了我們常用的模板引擎，允許我們可以直接在 js 文件中來使用 JSX坏挠，這種語法結(jié)合了 HTML 和 JavaScript 的優(yōu)勢芍躏，既能像平常一樣使用 HTML，同時(shí)又能在 HTML 中使用強(qiáng)大的 JavaScript 語言降狠。相當(dāng)于我們可以把 View 和 JavaScript 邏輯寫在同一個(gè)文件里面对竣。
用官網(wǎng)的栗子:
考慮一下這個(gè)變量的聲明：
const element = <h1>Hello, world!</h1>;
這種有趣的標(biāo)簽語法既不是字符串也不是HTML。
這就是 JSX 榜配，他是 JavaScrip 的一種擴(kuò)展語法否纬。我們推薦在 React 中使用這種語法來描述 UI 信息。JSX 可能會(huì)讓你想起某種模板語言蛋褥，但是它具有 JavaScrip 的全部能力临燃。
JSX 中嵌入表達(dá)式
你可以用 花括號 把任意的 JavaScript 表達(dá)式 嵌入到 JSX 中。
例如，2 + 2谬俄， user.firstName柏靶， 和 formatName(user)，這些都是可用的表達(dá)式溃论。
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')
);
jsx具體詳細(xì)的用法屎蜓，還得參考官網(wǎng) http://www.css88.com/react/docs/introducing-jsx.html
2. 組件
組件使你可以將 UI 劃分為一個(gè)一個(gè)獨(dú)立，可復(fù)用的小部件钥勋，并可以對每個(gè)部件進(jìn)行單獨(dú)的設(shè)計(jì)炬转。
程序員的第一個(gè)程序 Hello World!
不多說，直接上代碼：
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(
<h1>I am Tyler</h1>,
destination
)
</script>
</body>
效果:
<div id="container"></div> 這個(gè)是一個(gè) “container” DOM 節(jié)點(diǎn)算灸，因?yàn)樵摴?jié)點(diǎn)內(nèi)的所有內(nèi)容都由 React DOM 管理,而且內(nèi)容會(huì)掛載到這個(gè)節(jié)點(diǎn)上扼劈。
審查元素會(huì)發(fā)現(xiàn)：
render的內(nèi)容都被包含在container里面。
要渲染一個(gè) React 元素到一個(gè) root DOM 節(jié)點(diǎn)菲驴，把它們傳遞給 ReactDOM.render() 方法即可荐吵。
2. 組件與props
當(dāng) React 遇到一個(gè)代表用戶定義組件的元素時(shí)，它將 JSX 屬性以一個(gè)單獨(dú)對象的形式傳遞給相應(yīng)的組件。 我們將其稱為 “props” 對象。
看下面的代碼 ：
<body>
<div id="container"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<p>Hello, {this.props.greetTarget}</p>
</div>
);
}
});
ReactDOM.render(
<div>
<HelloWorld greetTarget="myName" />
<HelloWorld greetTarget="Nancy" />
<HelloWorld greetTarget="Jacket" />
</div>,
document.querySelector("#container")
);
</script>
</body>
Props 是只讀的
我們定義了一個(gè)HelloWorld的組件践叠，要在組件里面要接收屬性，就要在元素里面用 { } 包起來薯蝎，且要寫成 this.props.* 的形式，接收來自父級傳來的屬性值 greetTarget谤绳，而父級也要把屬性傳進(jìn)來才行占锯，像 greetTarget="Tyler" 。
render的內(nèi)容都被包含在container里面缩筛。
要渲染一個(gè) React 元素到一個(gè) root DOM 節(jié)點(diǎn)消略，把它們傳遞給 ReactDOM.render() 方法即可。
我們簡單扼要重述一下上面這個(gè)例子:
- 我們調(diào)用了 ReactDOM.render() 方法并向其中傳入了 <HelloWorld greetTarget="myName" /> 元素歪脏。
- React 調(diào)用 Welcome 組件疑俭，并向其中傳入了 {name: 'myName'} 作為 props 對象粮呢。
- Welcome 組件返回 <h1>Hello, myName</h1>婿失。
- React DOM 迅速更新 DOM ，使其顯示為 <h1>Hello, myName</h1>啄寡。
警告：組件名稱總是以大寫字母開始豪硅。
舉例來說, <div /> 代表一個(gè) DOM 標(biāo)簽，而 <HelloWorld /> 則代表一個(gè)組件挺物，并且需要在作用域中有一個(gè) HelloWorld 組件懒浮。
雖然 React 很靈活，但是它有一條嚴(yán)格的規(guī)則：
所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 砚著。
4. 后語
雖然看上去很簡單次伶，但是建議初學(xué)者自己敲一遍，可能會(huì)出現(xiàn)各種各樣的問題稽穆。學(xué)習(xí)冠王，千萬不能有所見即所得的想法，實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)舌镶。
好啦柱彻，本節(jié)內(nèi)容就到這里，下節(jié)內(nèi)容：「react 基礎(chǔ)之組件篇二」 將講解 Style in React 樣式在react中的應(yīng)用餐胀。
原代碼我都已經(jīng)上傳到 github了哟楷，有興趣的可以去了解一下。
傳送門
我不是大神否灾，也不是什么牛人卖擅，寫這個(gè)號的目的是為了記錄我自學(xué) web全棧 的筆記。
有興趣的朋友可以掃下方二維碼公眾號—— 愛寫bugger的阿拉斯加
分享 web 開發(fā)相關(guān)的技術(shù)文章墨技，熱點(diǎn)資源磨镶，全棧程序員的成長之路
和大家一起交流成長。
