前言
最近剛開始學習react，就打算從一個初學者的角度，從零開始邊學邊寫，記錄一下react的學習過程，如果能給其他人帶來友善，不勝榮幸。
安裝
相信大家都看過官網的安裝介紹，開始我是使用的Create React App，用react官網上的話說:
Create React App 是開始建構新的 React 單頁面應用的最佳途徑。 它可以幫你配置開發環境，以便你可以使用最新的 JavaScript 特性，還能提供很棒的開發體驗，并為生産環境優化你的應用。代碼如下：
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
然而安裝完生成的這些都是幹什麼用的 =-= 初學者隻是想按照國際慣例先寫一個Hello World而已。安裝的這個檔案夾先這麼放着吧，以後應該會用到。
HelloWorld
是以還是另建一個檔案夾，點選這裡進入facebook react下載下傳頁面。2017年9月26号更新了react v16.0.0，把react.development.js和react-dom.development.js下載下傳到所在目錄，自行通過src引入這兩個檔案。如果想使用老版，就下載下傳下面v15.6.1版本的react.js和react-dom.js檔案，通過src引入。
先把HelloWorld代碼貼上：
<body>
<div id="test"></div>
<script src="./react/react.development.js"></script>
<script src="./react/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('test')
);
</script>
</body>
這裡還引入了一個CDN。babel是一個js編譯工具，可以把一種JS編譯成另一種JS，支援JSX、JSPM、Webpack等。而browser.js可以讓浏覽器直接編譯JSX。是以敲入上面的代碼，就可以在浏覽器中顯示HelloWorld了。
初識react
1.JSX
先看一段代碼：
const h1 = <h1>Hello world</h1>;
這個看起來又像JS又像HTML的代碼就叫JSX。
2.JSX元素
再來看上面那行代碼
const h1 = <h1>Hello world</h1>;
這就是将一個JSX元素儲存到了一個變量中。
下面這個例子是把幾個JSX元素儲存到了一個object中：
const temp = {
teacher: <li>張三</li>,
monitor: <li>李四</li>,
student: <li>王五</li>,
};
JSX元素的屬性和HTML元素相似，但是class屬性在JSX中需使用className如：
const temp=<a id="aid" className="blog" href="https://buppt.github.io">我的部落格</a>;
你如果想分成幾行，寫的更好看一些，需要用一個小括号把JSX元素擴起來
const temp=(
<a id="aid" href="https://buppt.github.io">
<h1>
我的部落格
</h1>
</a>
);
還有一點就是JSX元素最外層隻能有一個元素，如果有多個你需要用一個div或其他标簽把他們包含起來。
這樣是不可以的：
const temp = (
<p>我在最外層.</p>
<p>我也在最外層.</p>
);
這樣才可以：
const temp = (
<div>
<p>我不在最外層.</p>
<p>我不在最外層.</p>
</div>
);
3.讓JSX元素顯示在浏覽器中
就像上面的HelloWorld，使用ReactDOM.render(JSX元素，id)可以将JSX元素顯示在浏覽器上。
const testList=(<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>);
ReactDOM.render(testList,document.getElementById('test'));
具體ReactDOM.render()以後應該會講到，第一篇《從零一起學》先到這裡吧～
![React中對于this.setState參數為函數或對象的問題。[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)