chore: move

2022-02-22 23:53:20 +08:00
1 parent 919ede775a
commit 7861b37c1c
@@ -0,0 +1,32 @@
+---
+sidebar_position: 10
+---
+
+# React 入门
+
+学完了 1+1，我们可以开始学习微积分了。（🐶 保命）
+
+## 安装 Node 环境
+
+参考上一章
+
+- [传送门](https://idealjs.github.io/web-tutorial/docs/post-8#%E6%9C%AC%E5%9C%B0%E6%9E%84%E5%BB%BA%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA)
+
+## 创建一个 React 工程
+
+我们使用 create react app 手脚架快速创建工程，其中包含大量的工具，但是没有必要每个都了解。
+
+1. 找一个空的文件夹，打开控制台（按住 shift，右键打开控制台），输入如下命令。
+
+   ```
+   npx create-react-app my-app
+   ```
+
+   视网络状况，可能需要 30s - 1min ，如果过久的话，建议不要等了。
+
+2. 进入到项目文件夹中，启动项目
+
+   ```
+   cd my-app
+   npm start
+   ```
@@ -0,0 +1,36 @@
+---
+sidebar_position: 2
+---
+
+# 信息时代
+
+信息时代有很多获取信息的方式。
+
+通过网页，或者特定的软件，或者其他的方式（非人类的获取方式比如：爬虫）。
+
+网页需要通过一个特定软件才能打开（浏览器），之后人与浏览器交互，浏览器将信息传递给用户。
+
+得益于浏览器跨平台的特性， 工程师们可以实现出只要一处编写，即可处处显示的软件 —— 是软件工程师们在影响世界 —— 这也是为什么信息时代是从网页开始的
+
+## 网页的本质
+
+网页本质是一个文档，文件，一段描述，一段文字。它被记录下来，由浏览器解析，并表达。
+
+有点像是 DNA 是人的遗传信息，蛋白质是表达。 —— 最初的网页没有办法交互，只能显示字。（连颜色都没有，和蛋白质比起来弱爆了）
+
+描述网页的语言不断更新，浏览器也不断的由工程师们更新。
+
+目前使用最多的描述网页的语言是 HTML5
+
+它看起来像是下面的代码块（实际还要复杂点）
+
+```
+<div>
+  我是一块
+  <div>
+    我是里面的一块
+  </div>
+</div>
+```
+
+所以学会 HTML5 的规则，你就可以让浏览器写出具有简单排版的文字。
@@ -0,0 +1,57 @@
+---
+sidebar_position: 3
+---
+
+# 现代的网页
+
+现代的网页并不复杂 —— 不只是文字 —— 有漂亮的外观，可以响应用户的操作。
+
+## 漂亮的外观（CSS3）
+
+组成一个漂亮的外观，首先需要骨架 —— HTML5，然后是化妆 —— CSS3
+
+HTML5 中有一些默认的规则，可以让文字变得有层级结构，像是 Word 中的标题，独占一行，并行显示。学会这些规则，就可以进行简单的排版了。
+
+CSS3 像是 Word 样式。颜色，背景颜色，行间距。学会 CSS3 的规则，不仅可以让排版更炫酷，还可以做动画效果，以及各种特殊的交互效果。
+
+> 学会 HTML5 + CSS 可以不用 Word 了呢。—— 只是编辑体验有点糟糕。所以我还是喜欢用 Markdown 编辑文档，还可以使用 HTML 增强
+
+## 有趣的灵魂（JS）
+
+有趣的灵魂应该是 200 多斤吧。—— 我是说我自己。
+
+网页的作用不仅仅是展示，也会响应用户的操作。也可以根据不同的用户给出不同的响应 —— 动态网页。不能区分用户给出不同反应的，叫做静态网页
+
+响应用户的操作，则需要软件工程师编写一些逻辑，编写这个逻辑的语言，叫做 JavaScript（简称 JS）。
+
+### JS 在网页中如何运行
+
+回到代码的本质，其实是在规则下描述一段事情。
+
+浏览器中有一个用于解释执行 JS 的引擎。
+
+在浏览器打开网页时，把各种 JS 脚本（文件形式的，或者文字形式的）丢给 JS 引擎，由引擎解释执行。
+
+下面这个代码片段就是一个 Hello World
+
+```
+<script>
+function sayHello() {
+    alert("Hello World");
+}
+</script>
+
+<button onClick="sayHello()">点击<button>
+```
+
+`<script></script>` 标签中的代码，就是 JS 代码。它定义了一个 sayHello 函数。
+
+JS 引擎会记住这个函数。
+
+`<button></button>` 是 H5 的一个标签，表示这里显示一个按钮。
+
+`onClick="sayHello()"` 表示，这个按钮被点击时，会让 JS 引擎执行一段代码 —— `sayHello()`
+
+## 下一节
+
+下一节开始我们会完整的写一个 Hello World 网页。并开始 HTML5 CSS3 JS 的入门。
@@ -0,0 +1,43 @@
+---
+sidebar_position: 4
+---
+
+# HTML5 Hello World
+
+在学习一样新技术的时候，写一个 Hello World 是最简单的。
+
+用最少的知识量，让程序完整的跑起来，就是 Hello World 的目的。
+
+本篇的完整代码，可以在这里找到：
+
+- [examples/post-4/hello.html](https://github.com/idealjs/web-tutorial/blob/main/examples/post-4/hello.html)
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-4-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div>Hello World</div>
+  </body>
+</html>
+```
+
+通过上面的 Hello World 可以看出来一些 HTML5 的语法规则。
+
+- 标签需要闭合 —— `<div/>` 或这样的 `<div></div>`
+- 标签有独特的含义 —— `<xxx></xxx>`, `<div></div>` 是 HTML5 的块标签
+
+具体的标签规则，可以参考 [HTML5 标签](http://www.w3chtml.com/html5/tag/)。（实际工作中，用到的种类没有列出来的这么多）
@@ -0,0 +1,52 @@
+---
+sidebar_position: 5
+---
+
+# CSS3 快速入门
+
+上一节，入门了 HTML5。了解了 HTML5 的 Hello World 后，我们可以开始学习 CSS3 了。
+
+目标很简单，给 Hello World 加上一个颜色，并且再加一个背景色。
+
+本篇的完整代码，可以在这里找到：
+
+- [examples/post-5/hello.html](https://github.com/idealjs/web-tutorial/blob/main/examples/post-5/hello.html)
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-5-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div style="color: red; background-color: green">hello world</div>
+  </body>
+</html>
+```
+
+和上一节有区别的地方在于
+
+```
+<div style="color: red; background-color: green">hello world</div>
+```
+
+多了一组 style 属性，`style="color: red; background-color: green"`
+
+其中的 `color` `bacogound-color` 是 CSS3 的属性，`red` `green` 值。并且需要用 `;` 分隔。
+
+可以参考下图片
+
+![预览效果](./post-5-2.png)
+
+这里我们只展示了 CSS3 的一种写法。未来为大家介绍更多的写法。
@@ -0,0 +1,63 @@
+---
+sidebar_position: 6
+---
+
+# JS Hello World
+
+继续学习 Hello World。
+
+Web 由 HTML5 + CSS3 + JS 构成。本节将介绍 JS 的 Hello World。
+
+> 用最少的知识量，让程序完整的跑起来，就是 Hello World 的目的。
+
+本篇的完整代码，可以在这里找到：
+
+- [examples/post-6/hello.html](https://github.com/idealjs/web-tutorial/blob/main/examples/post-6/hello.html)
+
+## 查看这个网页
+
+查看这个 Hello World 很简单，只需要把这个 hello.html 文件下载到计算机。然后用浏览器打开就可以了。
+
+![预览效果](./post-6-1.png)
+
+## 简单分析代码
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script>
+      window.onload = () => {
+        alert("hello world");
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
+```
+
+我们需要关注的是如下代码块，其余部分是 HTML5 的标签，想了解的话，可以查看[HTML5 Hello World](https://idealjs.github.io/web-tutorial/docs/post-4)。
+
+```html
+<script>
+  window.onload = () => {
+    alert("hello world");
+  };
+</script>
+```
+
+形式上，被 `<script></script>` 包裹住的内容就是 JS 脚本。
+
+这个脚本会在浏览器解析到这个标签时执行。
+
+- `window.onload = xxx` 是在做一个赋值操作。
+
+  将一个函数赋值给 `onload` 属性。而浏览器在加载`hello.html` 文档结束时，会运行 `onload` 函数。
+
+- `() => { alert("hello world"); }` 称作匿名的箭头函数，具体可以查阅 JS 文档。
+
+- `alert("hello world");` 是 JS 调用了浏览器提供的函数 `alert` 其中参数，我们填入了 `"hello world"` 字符串
@@ -0,0 +1,19 @@
+---
+sidebar_position: 7
+---
+
+# 模块和库
+
+软件工程领域存在大量的模块和库，目的是为了更方便的维护软件。
+
+在前端领域中，经过多年的实践，得出了 —— 构建的实践方式。
+
+构建即，编写时采用 A 的方式，经过构建后得到 B 的产物。
+
+前端的构建后产物依旧是 HTML + CSS + JS。
+
+而编写时的方式有很多，比如比较流行的 Webpack（构建+打包）+ Typescript （JS 的超集）+ React/Vue
+
+React/Vue 的组成比较复杂。也正是这些复杂的部分，推进了这些库的诞生。
+
+用一句话来概括，当你需要一些可以减少开发量，减少维护难度的库时，可以采用 React/Vue
@@ -0,0 +1,77 @@
+---
+sidebar_position: 8
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Node 入门
+
+在继续学习前端的库之前，我们需要打断一下。
+
+我们需要一些补充知识做我们的手脚架。
+
+前文提到过，现代化的前端工程通过构建的方式，得到我们需要的产物。
+
+而构建怎么执行，执行在哪里也是一个复杂的问题。
+
+## 构建如何执行
+
+- 语言语法转换
+
+  如：typescript 转换为 javascript。高级语言特性转换为兼容语句。
+
+- 资源打包
+
+  如：图片，样式，打包成文件资源。
+
+## 构建的执行位置
+
+- 人工执行
+  简单的单机部署网站，我们可以使用人工部署的方式。
+
+  任选一台机器，进行构建，然后将构建产物复制到提供对外服务的服务器上。
+
+- 自动执行
+
+  由特殊的构建软件监听，然后在配置好机器/容器中构建。
+
+两种方案都需要一个机器，或者环境来构建。
+
+接下来简单介绍本地环境的搭建
+
+## 本地构建环境搭建
+
+- 安装 Node
+
+  node 的版本很多，入门建议使用 官网的 LTS 版本。
+
+  ![node 官网截图](./post-8-1.png)
+
+<Tabs
+  defaultValue="win"
+  values={[
+    { label: "win", value: "win" },
+    { label: "linux", value: "linux" },
+    { label: "mac", value: "mac" },
+  ]}
+>
+  <TabItem value="win">
+  windows 就直接安装吧。（没错，下载，安装）。装完记得重启电脑，环境变量在重启后才生效。
+
+https://nodejs.org/en/
+
+  </TabItem>
+  <TabItem value="linux">
+  使用 nvm 安装和管理不同版本的 node
+
+https://github.com/nvm-sh/nvm#install--update-script
+
+  </TabItem>
+  <TabItem value="mac">
+  使用 nvm 安装和管理不同版本的 node
+
+https://github.com/nvm-sh/nvm#install--update-script
+
+  </TabItem>
+</Tabs>
@@ -0,0 +1,80 @@
+---
+sidebar_position: 9
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Hello Node JS
+
+假如安装好了 Node，如何验证安装好了？或者我怎么使用它？
+
+## 验证是否安装成功
+
+打开一个控制台
+
+<Tabs
+  defaultValue="win"
+  values={[
+    { label: "win", value: "win" },
+    { label: "ubuntu", value: "ubuntu" },
+    { label: "mac", value: "mac" },
+  ]}
+>
+  <TabItem value="win">
+  在开始菜单上右键，点击windows 终端（管理员）
+
+  </TabItem>
+  <TabItem value="ubuntu">
+  Ctrl+Alt+T
+
+  </TabItem>
+  <TabItem value="mac">
+  找到terminal app，然后打开。
+
+  </TabItem>
+</Tabs>
+
+输入
+
+```
+node -v
+```
+
+然后你会看到你安装的 node 版本。
+
+例如，我的版本
+
+```
+v14.18.0
+```
+
+## 使用
+
+> 用最少的知识量，让程序完整的跑起来，就是 Hello World 的目的。
+
+本篇的完整代码，可以在这里找到：
+
+- [examples/post-9/hello.js](https://github.com/idealjs/web-tutorial/blob/main/examples/post-9/hello.js)
+
+在有 hello.js 的文件夹下打开控制台（在文件夹下按住 shift 鼠标右击），并且输入
+
+```sh
+node hello.js
+```
+
+如果碰到了如下错误，那么可能是当前文件夹下没有 hello.js 这个文件。
+
+```
+internal/modules/cjs/loader.js:905
+  throw err;
+  ^
+
+Error: Cannot find module 'xxx/xxx/hello.js'
+```
+
+正常运行的话，会显示如下
+
+```
+hello world
+```