因公司項(xiàng)目需要篮撑，所以菜渣如我（jq都沒玩明白的人）闲擦，也要開始學(xué)習(xí)react了
這里是后面的整理程癌，并無抄襲之意
廢話不多說璧诵，開始
一、起手式
1.1首先辑奈，肯定是引入react
import react from 'react';
如果已經(jīng)
npm install react苛茂，那就直接引入吧已烤，如果沒有，那就在html里<script src = '../js/react.min.js'></script>
let Demo = React.createClass({
render(){
return (
<h1>Hello, world!</h1>
)
}
});
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<Demo/>, app);
解釋一下這一坨子是什么東西：
聲明一個(gè)組件類妓羊，個(gè)人理解就是創(chuàng)建一個(gè)自定義的dom標(biāo)簽胯究，但是呢，這個(gè)首字母要大寫躁绸。
（PS：如果使用的是webstorm裕循，file→settings→languages&frameworks→javascript，右側(cè)選擇JSX Harmony 或者選擇Flow,這個(gè)是為了讓webstorm支持JSX語法净刮。）
1.2再補(bǔ)一個(gè)新的知識點(diǎn)
let Test = React.createClass({
render(){
return(
<div>
<h1>初學(xué)react</h1>
<h2>擼兩行試試</h2>
<p data-test="test">我笨剥哑，就要更努力</p>
</div>
)
}
});
這個(gè)是說明一個(gè)事情，就是淹父，render的return中星持，只能有一個(gè)頂級標(biāo)簽，也就是外層的那個(gè)div弹灭，不然編譯不通過會報(bào)錯督暂，有的，編輯器在編譯之前就報(bào)錯了穷吮。另外逻翁，這里return之后的dom沒有引號，因?yàn)閖sx語法可以不用捡鱼，但是類似于className八回，data私有屬性等則需要加引號。
注意：在react編寫過程中驾诈，記得要使用className代替元素標(biāo)簽的class缠诅，htmlFor代替label的for，原因是乍迄，因?yàn)槭莏sx語法管引，所以，js和html混合寫在一起闯两，class和for都是關(guān)鍵字褥伴，所以把html中的這兩個(gè)替換掉
2.1 render中邏輯語法相關(guān)
let Test = React.createClass({
render(){
return (
<div>
<h1>{1+1}</h1>
</div>)
}
})
在render的return里，如果有js語法需要添加到{}里漾狼，在return中重慢，元素標(biāo)簽里的{}里寫的是js代碼，可以寫代碼中的這種逊躁，{}中的js要寫成表達(dá)式似踱，可以是帶有return的function，如果要寫判斷，請使用三元核芽。如下
ReactDOM.render(
<div>
{
names.map((name) =>{
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
或者
var i = 1;
ReactDOM.render(
<div>
<h1>{i==1?'True囚戚。':'False。'}</h1>
</div>,
document.getElementById('test')
);
3.1允許加入js中的變量（如果是數(shù)組狞洋，則會展示全部）
var arr = [
'<h1>Hello world!</h1>',
'<h2>React is awesome</h2>',
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
4弯淘、寫了绿店，樣式也得加不是吉懊？
React要使用camelCase語法來設(shè)置內(nèi)聯(lián)樣式，React會在指定元素?cái)?shù)字后面自動添加px假勿，如下：
var testStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {testStyle}>樣式Demo</h1>,
document.getElementById('example')
);
或者
ReactDOM.render(
<h1 style = {{"fontSize":"100","color":"#ff0000"}}>樣式Demo</h1>,
document.getElementById('example')
);
這里補(bǔ)一刀借嗽，return里的注釋要在{}中寫
ReactDOM.render(
<div>
<h1>測試注釋</h1>
{/*注釋...*/}
</div>,
document.getElementById('example')
);
補(bǔ)一個(gè)小知識點(diǎn)
const arr = [1,2,3,4,5,6,7];
render(){
return (
<div>
arr.map((item,index)=>{
return (
<span key={index}>{item}</span>
)
})
</div>)
}
敲黑板敲黑板，react的遍歷中转培，記得加入key={}
這個(gè)key通常是唯一不變的恶导，最好是id之類，這里是示例浸须，就用了index
但是惨寿，最好不要使用index當(dāng)成key，如果是可拖動列表删窒，index會改變的裂垦。
這個(gè)key，是告訴state肌索，在比對的時(shí)候以什么為參考
不加key蕉拢，瀏覽器的控制臺會報(bào)warning的
以上，是react基礎(chǔ)中的基礎(chǔ)诚亚，反正我是這么認(rèn)為的晕换。下一頁，是state和props站宗。
