Transcript

Hello 大家好，欢迎来到本期小教程。从今天开始，我们会使用 React 一起从 0 开始完成一个简单的网页应用程序。这套教程适合想尝试一下的新手，有一点点了解但是没有项目经验的学生，甚至没有尝试过现代网页开发的从业者。

这个小程序会从你的 Steam 库中获取你的游戏列表，并且帮你选出今天要玩哪一款游戏。完成这个功能不是目的，而是通过这个过程学习制作这样一个项目需要哪些步骤和技术。那我们就开始吧！

§ 环境

首先我们需要一个能运行 NodeJS 应用程序的环境，这是因为现代的 React 程序必须在有 NodeJS 的电脑上打包之后才能运行。简单来说，这是必须要安装的，我们在搜索引擎上搜索 NodeJS 或者直接访问 nodejs.org 来下载最新的 LTS 版本的安装包，然后进行安装。这不需要太长时间。下载完成之后我们打开一个新的控制台窗口，并运行 npm -v 命令，如果成功显示出版本号就说明安装成功了。对于 Windows 电脑下载完毕之后最好能重新启动你的电脑来保证可用。

然后我们来新建一个项目，我们在搜索引擎搜索 react 就能找到 React 库的官方网站，在这里我们使用官方推荐的新建项目的方式，也就是运行 npx create-react-app ${项目名} 命令。在这里我们将新建的项目命名为 what-to-play 也就是我们这次教程的名字。输入完命令之后只要按回车就可以等待这个小工具帮我们完成新建项目所需要的所有步骤了。

接下来我们需要一个代码编辑器，我在使用的是 VSCode，其实各位可以使用任何喜欢的编辑器。在这里我简单的演示一下 VSCode 的下载。我们在搜索引擎搜索 vscode 进入它的官方网站，然后简单的跟随引导就可以轻松安装了。我相信各位能看这个视频三分多钟，也肯定可以搞定它的！

§ 初识

好了，大功告成！我们现在可以开始编写代码了。我们首先打开 VSCode 切换到我们刚才新建项目的文件夹。然后按 control 键加 ~ 键启动 VSCode 的内嵌式控制台，输入命令 yarn start 来启动我们应用程序的开发模式，如果 yarn start 提示错误的话，你可以尝试在浏览器搜索 yarn 来安装它，或者使用 npm start 命令来启动，这都是一样的。

在应用启动之后，一个浏览器页面会自动打开。这里面的内容都是新项目自带的，我们可以看到一个 React 的 Logo 在自动旋转，背景是蓝色的，还有一些文字。接下来我们一起来看一下这些内容是哪里来的。我们首先在文件资源管理器，也就是左边的这个界面里打开 src 文件夹。

我们粗略的看到这个 src 文件夹里面有很多个文件，这些大部分都是我们不需要的，让我们一起来看一看这些都是干什么的，看一看我们怎么清理掉这些文件。

首先，我们要回答为什么这个 React 的 Logo 在转动的问题，在 App.js 文件中，我们可以看到一个 img 标签。也许你还不知道什么是 html 文件，这没有关系，我们现在可以简单的把他理解成一个对于 html 文件，每一个标签就是让浏览器从上到下，从左到右显示对应的内容。好了，让我们仔细看这个 img 也就是这个图片，它被标记为 className 等于 App-Logo 这段内容的意思是，用 App-Logo 的样式来渲染这个图片。我们来到 src/App.css 文件，找到对应的样式，这里有一个 animation 动画，我们先不管他，直接把相关的内容都删除。删除之后保存，浏览器会及时刷新，这时我们可以看到，这个图标已经不转动了。

我们干脆把这个图片的标签直接删除，保存之后我们不意外的发现这个剩下的不转动的图片也不见了。剩下的文字也一并删除，我们先不管这个 a 标签和对应的网址是什么意思，我们马上就会接触到。再进一步把 App.css 文件夹下的样式也全部删除，保存之后浏览器显示的就是一整片白色了。左侧剩下的就只有两个 div 标签了，这种一前一后的标签是代表在中间包含内容的意思，内容之前的标签没有斜杠，之后的有斜杠就是区分的方式。

§ 尝试

我们在 div 标签之间写入 Hello World 然后保存，我们就拥有了属于我们自己的第一个网页。

大部分网页都区分标题，内容和结尾。这在语义化的描述过程中可以使用 header, section 和 footer 标签表示。它的用法和 div 标签很像，用这种方式我们来整理一下我们的代码。在浏览器中按 F12 键就可以打开控制台，选择元素面板我们就可以看到我们的代码是如何渲染显示的，用左上角的选取工具，然后点击你想查看的元素，就可以在页面的结构里找到对应的元素。现在看来代码和正式的结构一样，但以后我们接触到复杂的内容之后，这个功能会对我们理解渲染的方式很有帮助。

让我们来添加更多的内容，我们新建一个 footer 标签，写入一些内容，这些各位可以自行选择。我们可以看到保存之后这些内容互相之间都离得太近了，体现不出来标题和页脚的感觉。让我们来自己写第一个样式。我们在 App.css 文件里写 .title 然后写一个大括号，这个点儿代表这个样式要选择所有 className 是 title 的内容。当然除了点之外还有井号等等的选择方式，我们管这种类似点加 className 的写法叫做选择器。我们以后会经常用到，不过现在就写 .title 就足够了。在大括号中，我们输入 font-size: 30px 这代表我们要把标题的字体设为 30 号，保存之后就可以看到浏览器更新了，看起来很棒。

然后就是网页的内容本体。需要注意的是 section 标签不是必须的，而且每个人都会有不同的习惯，直接在 div 标签中写入内容也是可以的，那让我们来添加一些内容。

我们用 p 标签，也就是段落的意思写我们的每一句话。用法和之前一样，保存之后我们就能用浏览器的控制台查看渲染之后的结构，问题是每一句话之前的间隔太大了。

为了解决这个问题，我们写我们的第二个样式，我们直接在 App.css 文件里写 .content p 大括号，注意 p 不需要加点，这样写的意思是我们要控制所有的在 className 是 content 的子标签是 p 标签的样式。在大括号内，我们输入 margin-top: 0px 然后输入一个分号，然后我们按回车，然后输入 margin-bottom: 0px, 这两个语句代表无论上方和下方都不留空白，这些内容我们之后会补充，你也可以在搜索引擎搜索 css 语句 之类的关键字来了解更多内容。然后我们再给 footer 一个 className，给他一个样式让他离上方的内容远一点，再让标题离内容也远一点。最后我们再给最外层的 div 一个样式，让它整体离边框远一点，注意，只要输入 margin 就可以一起设置上下左右全部的距离。

为了让各位更好的了解 Mi 4i，接下来让我们在我们的歌词中中添加一个超链接，在搜索引擎中搜索 Mi 4i 找到当时的官方网站，把这个页面的链接复制下来。为了能让一部分的文字可以点击，我们要把可以点击的部分用一个 a 标签包裹，然后设置 href 字段为它的目标链接，保存之后就添加完成了。你可能会注意到在我们使用换行的时候，文字中间的空格可能没有办法正确显示，这个时候只要用   代替空格就可以正常显示了。解决之后我们可以右键在新标签中大概小米 4i的官方网站，也可以直接点击跳转。

§ 清理

这些内容就差不多凑成一集了，最后，我们把这些没有用的文件都删除，只保留左侧剩余的这几个。其中包含 serviceWorker, 引用本地图片在内的知识点我们以后都会涉及。本教程相关代码都可以在视频开头和简介中提及的 Github 链接中找到 。这是我的第一期视频，如果你有兴趣，请在评论区留言告诉我你的感想，和你想听什么内容。感谢各位，再见！