DAY14-React Overview

前言：

在经过两个礼拜的内容後，相信大家对写网页也有一定的基础了吧！这两个礼拜我们介绍很了多很好用的工具，像是php, Mysql, JavaScript等等。当然目前为止教的东西拿来写一些简单的网页已经是绰绰有余了！但今天我们要来介绍另外一个非常强大的工具，可是说是在设计、效能两个方面都狠甩过去技术好几条街的新东东，那就是我们的React！
阿森预计会花个三天来做个简单的介绍，之後就会进入NFT网站架设的部分了。

那就让我们开始今天的React吧！

浅谈React：

其实文章一开始的图片有个小小的错误，那就是React其实不是一个framework，而是一套JavaScript的library，在网页的MVC模型中，他只负责V(view)这一块，所以可以说是专门开发UI的工具！

那接下来就让我们看看官方网站是怎麽介绍的吧：

「React 是一个陈述式、高效且具有弹性的 JavaScript 函式库，用以建立使用者介面。它让你使用小巧而独立的「component」，来建立复杂的 UI。」

好的，是不是完全看不懂只觉得很厉害呢！其实React的概念有点让我想到前几年Google提出的一款手机。虽然後来好像胎死腹中了。

当初google的计画就是想设计一款如乐高积木一般，可以更换所有组件的手机。而阿森认为这个想法不就是React吗！只不过每一个组件就是我们要写的component，可能是Navbar、Herosection甚至是一段文字加图片，在写完这些组件後，只要对他们进行微调，就可以快速的组合成各种网页，达到高自由度且高效的成果。

在效率上，React使用了Virtual DOM的概念，也就是透过JavaScript的物件模拟DOM的elements，并对他们进行操作，最後再一并更新到网页的DOM上，这样的做法大大提升了传统上不断更新DOM所需的时间，让网页达到更佳的效率。

怎麽让他有反应？

要踏出React开发的第一步就是要先安装node.js！那关於node.js是什麽呢？~~我们就下次再专门写一篇文章介绍。~~其实大家可以想像成他是和JavaScript这个程序语言沟通的桥梁，我们的电脑本身其实读不懂JavaScript，要讲到这个就要讲到很多电脑语言的概念而且非常麻烦...所以只要想像他是一个桥梁！负责把我们写的code转换成电脑看得懂的指令，而在这里我们称呼他为执行环境(runtime)。

那要安装node只需要去他的官网：

https://nodejs.org/en/

这里因为我们不会使用到node本身开发相关，所以直接下载LTS的版本，也就是Long Term Support，照着他的只是安装完成後，我们打开terminal，或是window的powershell，到你想创造React网页资料夹的地方，像我就是到我的user folder，输入下面这串指令：

$ npx create-react-app 你想要的名称

这里我把资料夹取名为it-helps。

之後给他跑一下：

再来我们可以cd到我们的资料夹：

$ cd it-helps/

然後输入:

$ npm start

你的第一个React网页就完成啦！

接下来操作就是把整个资料夹拖曳到VS Code的Workspace里，你就准备好可以上工了。

小结：

今天我们大致介绍了React的概念，以及如何开始你的第一个React，那接下来我会介绍一般开发一个网页时，架构会长怎样。

那我们就明天再见吧！