項目體驗
歡迎體驗【react項目：餓了麼點單流程】：http://47.93.235.67:8083
ps：要是遇到打不開的情況，那就是我服務掛掉了，react使用熱更新服務器無法用nohup掛載，終端窗口退出會導致頁面打不開，項目剛上我還沒解決這個問題
寫項目的原因是，看了網上大量的文章，都不如一個實戰來的更深有體會。
參考資料：
http://huziketang.mangojuice.top/books/react/lesson2
任何新的概念都會加深新人理解的難度，所以這裏不會出現新詞，所有的解釋我都最多采用前端常用技術作爲輔助理解的文字描述。
本節目的
幫助簡單理解一下
JSX不同與DOM節點，它是react的標記語言，標記語言本身就是表示和存儲數據。就像一個有格式的變量，不停地被賦予值，分配出去。
假如一個文件存儲瞭如下JSX結構
<div>
<div>I love you</div>
</div>
用JS讀出來，直接放到頁面上，同樣的結構會被瀏覽器引擎渲染成預定義的樣式，瀏覽器能識別div，那它就是html，html是有默認展示效果的。
兩者之間的聯繫在於此。
區別在，標記語言可擴展。你能生成以下一堆標記，whatever
<myHouse>
<chair>椅子</chair>
<desk>桌子</desk>
</myHouse>
但你把他們讀出來放到頁面上，不是瀏覽器預定義的標籤全都被識別成行內標籤，也沒有seo的效果。
JSX就像一種具有特殊規則的數據載體。
當你需要使用JSX的拼接的時候
JSX內使用{}寫javascript邏輯
export default function Myhouse(){
var name = "我要上天一起嗎";
return (
<myHouse>
<chair>椅子</chair>
<desk>桌子</desk>
<card>{name}</card>
</myHouse>
)
}
但注意JSX禁止
{}內不允許出現分號，不能使用if else語句，判斷句以三元運算代替
但是它可以
使用三元句式可以接受大型JSX“字符串”拼接（如果你把它想象成js的html字符串變量）
拼接不是使用連接符+， 而是使用()把jsx包起來（單行能省略()）
（）裏面的JSX語法，只接收一個根標籤
()內可以連續拼接，比如（{ （ { （ ）} ） {（）} }），它不像變量提升，你寫在哪裏就原樣輸出在哪個位置，變量會被{}符號自動解析掉
想要優雅點，拼接的JSX內容都可以在return()執行之前生成，使用某個變量(variable)接住，在return裏直接使用{variable}
先來一個單行JSX
再來個多行的效果。JSX是直接寫在行內相應位置的。
優雅點，我們這樣寫
數組（不能是json對象，json要轉化爲array，可以使用Object.values(obj)）map遍歷寫法的兩種賦值方式
一個是直接寫在JSX裏面
用{}包含，如果內部返出jsx包含了變量，變量還要再加上{}，只要jsx內部遇到變量，想要解析都要用{}包住變量，而js卻可以不加任何修飾符直接寫jsx語法。
因爲{}（大部分情況下）最終都是返回一個jsx節點，上面arr的等價寫法是第二種把arr的結果直接在return之前賦予一個變量，然後賦給jsx。
return (
<div>
<header></header>
<section>
{true ? <div><span>1</span></div> : <div><span>2</span></div>}
</section>
<footer></footer>
</div>
}
判斷的後返回的jsx可自行加（）然後做折行。
over。