Hi！現在是2018/09/04，紀錄著在鐵人賽留下足跡的第一篇文章。
在這30篇的文章，會參考以下兩個網站做學習：

1. React官方文件
2. 從零開始學 ReactJS（ReactJS 101）

我是神Q，有大家在我才是超人，請各位在接下來30篇多多指教！謝謝！

不知道大家在選擇一門語言的時候，點進去文章中第一個看到的例子會是什麼？第一個想到的應該都會是Hello world！吧？雖然很俗氣，但是讓我們從這個例子中踏出通往React第一步吧！

Visual Studio Code

進入正文前先介紹我自己及今後會在文章中使用的編輯器(官方下載網址和介紹在這裡)，這是朋友介紹給我用的，用起來感覺也還不錯，而且有很多套件下載來幫助開發，如果還沒有遇到喜歡的編輯器可以選擇給他一次機會XD。

ReactJS

首先React及Vue和Angular一樣，都是屬於前端框架，也就是說我們可以直接在<script>中去嵌入React官方所提供的JavaScript檔使用他，而官方提供的檔案有兩個：

1. react：為react主要的API內容，透過react可以去建構一個一個可重複使用的組件。

   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
   

2. react-dom：原本和react放在一起，在0.14版中被獨立出來，主要提供了對DOM使用的方法。

   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   

不過以上皆是開發版本，並不適用實務生產，所以官方也提供了針對容量的大小作效能優化的版本：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

另外不曉得大家有沒有發現，每一個script中都有一個crossorigin屬性，官方註明說此屬性能夠在React 16和更高以上的版本得到更好的錯誤處理訊息，所以使用以上連結嵌入React時建議保留crossorigin。

JSX

使用React時我們還需要了解JSX，先別害怕！他其實沒有想像中那麼陌生，只需要試著想像，他是結合了JavaScript和XML這兩種語法的語法糖，JSX可以在使用React的時候讓程式碼更加簡潔，先看看下方程式碼吧！

let element = <h1>Hello world!</h1>

上面那段程式碼宣告的element既不是字串也不是HTML的語法，但他卻可以與React一起描述網站上的UI應該是什麼樣子，不過也不需要擔心使用了JSX後還能不能使用一般的JavaScript，這點可以仔細想想，一個網頁組成的三巨頭分別為HTML、CSS和JavaScript三個，也就是瀏覽器看得懂三個語言，所以我們使用的JSX在執行成網站時，最終結果也會被翻譯JavaScript，不然就只是打來自爽的而已XD

呃...那誰來翻譯？

放心！不會是你，也不會是我的，翻譯這種小事就交給Babel吧！他是一個JavaScript的一個編譯器，不只是JSX就連現今各瀏覽器支援度都不同的ES6，Babel也能編譯成瀏覽器看得懂的JavaScript要使用他也很簡單，因為他就是個API，所以只需要在<script>引用官方提供的API，並在<script>指定type="text/babel"，就可以大大方方的打上JSX和ES6的語法了。

除了上方的例子以外，以下也舉了幾個比較常用的JSX的語法，使用方式非常簡潔，可以看一下：

1. 花括號內可以是任何表達式：

   //宣告字串
   let name = 'world'
   //用花括號把變數name的值帶進來
   let element = <h1>Hello {name}!</h1>
   

2. if或for也可以使用：

   //if條件判斷
   if(user){
       return <h1>Hello, {user}!</h1>;
   }
   else{
       return <h1>Hello, world!</h1>;
   }
   
   //for迴圈
   let rows = []
   for(let i=1;i<6;i++){
       rows.push(<li>第{i}項</li>)
   }
   return <ul> {rows} </ul>
   

3. 如果不只包含一個標籤，或是想要空行的話需要使用小括號：

   let element = (
       <div>
           <h1>Hello world!</h1>
           <h2>Nice to meet you!</h2>
       </div>
   )
   

4. 當然不在React中使用JSX也可以，只是語法會變得稍為複雜，以下兩段是相等的：

   let element = <h1 id="title">Hello world!</h1>
   

   //React建立element的方法，參數分別為(標籤,屬性物件設定,內容,)
   let element = React.createElement('h1',{id:"title"},'Hello world!')
   

Hello world!

簡單的認識完React和JSX後就來建立HTML檔，實做第一個Hello world!吧！
HTML

<!--要插入內容的DOM-->
<div id="root"></div>

<!--react-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--Babel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>

<!--記得要設定type="text/babel"-->
<script type="text/babel">
//建立一個DOM物件
let element = <h1>Hello, world!</h1>

//使用ReactDOM.render把剛建立的物件element插入目標DOM中
ReactDOM.render(
  element,
  document.getElementById('root')
);
</script>

運行後看到以下結果就代表成功了：

之後的範例都會在附上GitHub的程式碼和GitPage，讓大家比較清楚程式碼的內容和顯示出來的結果：
GitHub程式碼連結
GitPage連結

以上是第一篇文章的內容，感覺鐵人賽打起文章戰戰兢兢的XD，之後可能都會在七點到八點左右發文，再請各位多多指教了，希望接下來可以倒吃甘蔗。

下回會說明如何使用webpack來開發React網站，一定可以學到很多東西！

最後感謝各位大大的觀看，如果文章中有任何不清楚或是理解錯誤的地方，還麻煩各位大大留言告訴我，小弟會盡快修正文章內容的，謝謝大家