因公司項目需要，所以菜渣如我（jq都沒玩明白的人），也要開始學習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);
解釋一下這一坨子是什么東西：
聲明一個組件類，個人理解就是創(chuàng)建一個自定義的dom標簽，但是呢，這個首字母要大寫。
（PS：如果使用的是webstorm，file→settings→languages&frameworks→javascript，右側選擇JSX Harmony 或者選擇Flow,這個是為了讓webstorm支持JSX語法。）
1.2再補一個新的知識點
let Test = React.createClass({
render(){
return(
<div>
<h1>初學react</h1>
<h2>擼兩行試試</h2>
<p data-test="test">我笨，就要更努力</p>
</div>
)
}
});
這個是說明一個事情，就是，render的return中，只能有一個頂級標簽，也就是外層的那個div，不然編譯不通過會報錯，有的，編輯器在編譯之前就報錯了。另外，這里return之后的dom沒有引號，因為jsx語法可以不用，但是類似于className，data私有屬性等則需要加引號。
注意：在react編寫過程中，記得要使用className代替元素標簽的class，htmlFor代替label的for，原因是，因為是jsx語法，所以，js和html混合寫在一起，class和for都是關鍵字，所以把html中的這兩個替換掉
2.1 render中邏輯語法相關
let Test = React.createClass({
render(){
return (
<div>
<h1>{1+1}</h1>
</div>)
}
})
在render的return里，如果有js語法需要添加到{}里，在return中，元素標簽里的{}里寫的是js代碼，可以寫代碼中的這種，{}中的js要寫成表達式，可以是帶有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語法來設置內聯(lián)樣式，React會在指定元素數(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')
);
這里補一刀，return里的注釋要在{}中寫
ReactDOM.render(
<div>
<h1>測試注釋</h1>
{/*注釋...*/}
</div>,
document.getElementById('example')
);
補一個小知識點
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={}
這個key通常是唯一不變的，最好是id之類，這里是示例，就用了index
但是，最好不要使用index當成key，如果是可拖動列表，index會改變的。
這個key，是告訴state，在比對的時候以什么為參考
不加key，瀏覽器的控制臺會報warning的
以上，是react基礎中的基礎，反正我是這么認為的。下一頁，是state和props。
