[Day18] 跟我一起从头学 React 吧！Let's start learning React from Codecademy! ～ Intro to JSX 篇

前言

前面文章提到发现在 Codecademy 上面有 React 的教学！
Codecademy 上面的课程大部份是免费的！(只有部份进阶的小考需要付费)
之前我也在 Codecademy 上过 jQuery, HTML 的课程，
觉得 Codecademy 真的很佛心，
是一步一步手把手带你从基础学起，
而且也会把大多数快速学习的人很常漏掉的细节强调出来，
所以就算之前在上 jQuery, HTML 我自认我已经会了，
我依然从中学到很多，
谢谢 Codecademy，
那事不宜迟就让我们赶快进入 Codecademy 开始学习 React 吧！

本日正文

INTRO TO JSX

上 React 前当然要先安利一下XD
一开始就先跟你说 React(=React.js)是一个 JavaScript 的函式库，
是脸书的工程师发展出来的。

再来就说了一百个(?) React 的优点，
然後还提醒如果还不会 JavaScript 的新手，
可以先去看 JavaScript 的课程。

(PS. 後面当然我不可能一个步骤一个步骤贴啦XD
有兴趣的大家直接到 Codecademy 学习吧XD
会贴这页只是因为觉得太可爱了，
第一页除了文字还搭配动画来说明 React 的优点)

再来我应该只会把我学习过程觉得有收获的地方分享出来~

What is JSX?

const h1 = <h1>Hello world</h1>;

每个程序一定要有的 Hello world XD

然後它告诉你，像这样的叙述就叫 JSX，
(所以我之前文章的用词可能有点错误orz 这边致歉一下)
JSX 是一个 JavaScript 的语法扩充，
通常拿来在 React 使用，
JSX 看起来很像 HTML 对吧？
但它不是 HTML，也不是 JavaScript，
因此一般的网页浏览器是不懂的，
需要经过 compiler 转译才能在浏览器上执行。

再来除了让你操作如何命名一个 JSX 变数，
还带到 JSX 可以是巢状的结构(这教得好细啊)。

再来一个重点来了，

JSX 叙述在最外层只能有一个变数!!!!!!!!!!!!

这也是你在很多人的 code 或我前几天的 code 都可以看到我们会这样写：

<>
    <div>...</div>
    <h1>...<h1>
    ...
</>

就是为了符合这个规则，
不过 Codecademy 这边很贴心，
想到有新手所以这边是教你用 <div></div> 把元素包起来。
(因此我猜 <></> 是 <div></div> 的简写)

如何渲染 JSX：ReactDOM.render()

另外一个重头戏，
教你用 ReactDOM.render() 渲染 JSX 的 code，
然後这时候我也恍然大悟我之前看不懂的 ReactDOM.render() 原来是这样。

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

=> 这行 code 就是说去 DOM 上取得 id 为 app 的元件，并将内容渲染成 <h1>Hello world</h1>。

然後 Codecademy 每一步几乎都会安排小练习给你亲自练习，
所以这边也教了另外一种 render 的语法：
(人生三件事：吃饭、睡觉、写铁人赛XD)

const myList = (
  <ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>写铁人赛</li>
  </ul>
)

ReactDOM.render(
  myList,
  document.getElementById('app')
);

(PS. 这是在 Codecademy 上学习及练习的画面，
通常都是左边带观念，
右边让你自己写 code，
写完可以按下「Run」由 server 验证你写得正不正确~
写错也没关系，
下方也会贴心给小提示哦！)

这边是在教说可以将要渲染的目标值跟之前一样宣告成变数後，
在 ReactDOM.render 的语法中使用。

The Virtual DOM

在这堂课的最後，
讲了一个我之前从来不知道的观念：The Virtual DOM

这边先讲一个前提是，

** ReactDOM.render 只会渲染一次 code **

所以就算後面你再呼叫一次 ReactDOM.render 也是不会有任何反应的。

而在 React 里面采用了 The Virtual DOM，
这就是为什麽 React 可以执行很快的原因。

然後 Codecademy 在这边还很认真的附了一篇文章 React: The Virtual DOM，
建议你可以阅读，
然後你就会真的明白 React 为什麽好，
而不是大家说好你就觉得好。

以下我把我读的重点划出来&分享心得，
有兴趣的大家欢迎到以上连结把整篇文章补完哦！

大部份 JavaScript 的框架都会一直不断重复在更新 DOM 元件，
这是很没效率的，
因为可能一个网页上有 10 个元件，
这次有更新的只有 1 个，
但 10 个元件都被更新了，
试想如果网页元件更多的话那 loading 会有多重。

为了解决这样的问题，
因此在 React 使用了 The Virtual DOM 这样的机制，
就是如果有 JSX 元件被更新了，
只会被更新到不同的 Virtual DOM 上，
而 React 会去比较 Virtual DOM 跟实际元件是否有所不同，
有不同的地方才会真的渲染到 DOM 上，
也就是只去更新必要的更新，
这就是 Virtual DOM 的机制，
也是 React 之所以能这麽快速的原因。

原来如此，我之前真的只是肤浅的知道 React 很快很好，
可是却讲不出原因，
现在我知道了！

这也是我真的很爱 Codecademy 的原因之一，
不只是一步一步带你理解，
还会搭配很容易的实作练习，
除此之外还会有这种一般学习者不会去注意到的观念提点，
真的很推荐大家可以到 Codecademy 绕绕寻宝，
就算是你自认已经会的也可以点进去学习，
我相信你一定会有所收获的！

後记

本来以为铁人赛只是纯粹跟大家一起参加比赛而已，
没想到写到现在的文章却帮助了我！
因为又刚好有段时间没写前端了，
写文章帮助我快速找回记忆，
就成功在这两天顺利用上了！！！
所以也很鼓励大家有事没事都来参加铁人赛^^
可以帮助自己也或许有机会可以帮助到他人哦:D