Day 06 - jS 微基础之ES6心得及准备进入React

对，就在我昨天不知所云的写完 for ... of 之後，我顺便把剩下的ES6课程读完了（其实这个连假有空我都使用 Sololearn App 在复习）。

ES6大部分都是新增不同的写法让开发更容易（可能因为jS忘得很多，现在我感觉不太出来容易在哪...），但由於时间因素，我决定开始React的学习，以避免之後做不出作品，也许之後还是会不时地补充一些jS基础喔。

学习React，绝对不止是因为学它工作机会比较多或酷炫狂霸跩，不然我也很想jQuery再战十年（为什麽会提到jQuery，因为绝大部份的网页设计师都是使用jQuery在切版，至少我是）。

但我们说好了要转成前端工程师对吧！

跳出舒适圈很痛苦，但不管是否血泪都要继续走，唯有如此才能成长。

所以我们要开始学习网路的基本概念，了解网路是如何运作的，网页怎麽载入与呈现，这些都是当务之急喔。

关於React的背景我就不赘述了，因为随便Google一下都有，所以跟着Sololearn的脚步开始吧。

也可以跟随官方网站教学喔，我的选择只是因为可以在手机上随时方便阅读而已

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin>
</script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
</head>
<body>

<div id="container"></div>

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, React!</h1>,
    document.getElementById('container')
  )
</script>
</body>
</html>

照着上面的程序码写，就可以输出一个 h1 标签且包含“Hello, React!”等字样在div#container中。

感觉上跟jS的写法是不是差不多。

注意，React要安装在head中喔

不过下一步要安装Node.js，因为我们不是只有要单纯的使用它来写单纯的网页，而是为了比较大或复杂的专案中使用（根据我目前读完它的介绍，理解是这样的），所以，接着要打开终端机，对，就是好酷又好炫的那个纯文字介面。

然後输入下列指令

npx create-react-app my-app （这里的my-app就是会新增的专案资料夹名称喔！）

它会开始进行一连串的安装跟下载过程，可以趁机休息一下。

等安装完成时，再执行

cd my-app (意思是，移动到my-app这个资料夹)

再执行

npm start

然後就会在本地端看到 http://localhost:3000/ 的网址被执行（ MacBook Pro会询问是否同意终端机可操作Chrome，请一律同意）。