msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

Add Chinese support

Browse Source
pull/406/head
Archie 4 months ago
parent 8b41cd49c3
commit 6d812b8b71
2 changed files with 376 additions and 0 deletions
Show Stats Download Patch File Download Diff File

369
Chinese/readMe.md
Unescape View File

@ -0,0 +1,369 @@
<div>
<img align="right" width="100%" src="./images/30_days_of_react.jpg" />
</div>
<div align="center">
<h1>30 天 React 挑战</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>作者: <a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small>2020年10月</small></sub>
</div>
[第 1 天 >>](./01_Day_JavaScript_Refresher/01_javascript_refresher.md)
| 天数 | 主题 |
| ---- | :-----------------------------------------------------------------------------------------------------: |
| 00 | [介绍](#introduction)<br> [如何使用仓库](#how-to-use-repo)<br> [要求](#requirements)<br> [设置](#setup) |
| 01 | [JavaScript 复习](./01_Day_JavaScript_Refresher/01_javascript_refresher.md) |
| 02 | [React 入门](./02_Day_Introduction_to_React/02_introduction_to_react.md) |
| 03 | [设置](./03_Day_Setting_Up/03_setting_up.md) |
| 04 | [组件](./04_Day_Components/04_components.md) |
| 05 | [属性](./05_Day_Props/05_props.md) |
| 06 | [列表、映射和键](./06_Day_Map_List_Keys/06_map_list_keys.md) |
| 07 | [类组件](./07_Day_Class_Components/07_class_components.md) |
| 08 | [状态](./08_Day_States/08_states.md) |
| 09 | [条件渲染](./09_Day_Conditional_Rendering/09_conditional_rendering.md) |
| 10 | [React 项目文件结构](./10_React_Project_Folder_Structure/10_react_project_folder_structure.md) |
| 11 | [事件](./11_Day_Events/11_events.md) |
| 12 | [表单](./12_Day_Forms/12_forms.md) |
| 13 | [受控组件与非受控组件](./13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input.md) |
| 14 | [组件生命周期](./14_Day_Component_Life_Cycles/14_component_life_cycles.md) |
| 15 | [第三方包](./15_Third_Party_Packages/15_third_party_packages.md) |
| 16 | [高阶组件](./16_Higher_Order_Component/16_higher_order_component.md) |
| 17 | [React 路由](./17_React_Router/17_react_router.md) |
| 18 | [Fetch 与 Axios](./18_Fetch_And_Axios/18_fetch_axios.md) |
| 19 | [项目](./19_projects/19_projects.md) |
| 20 | [项目](./20_projects/20_projects.md) |
| 21 | [钩子](./21_Introducing_Hooks/21_introducing_hooks.md) |
| 22 | [使用钩子的表单](./22_Form_Using_Hooks/22_form_using_hooks.md) |
| 23 | [使用钩子获取数据](./23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md) |
| 24 | [使用钩子的项目](./24_projects/24_projects.md) |
| 25 | [自定义钩子](./25_Custom_Hooks/25_custom_hooks.md) |
| 26 | [上下文](./26_Context/26_context.md) |
| 27 | [引用](./27_Ref/27_ref.md) |
| 28 | [项目](./28_project/28_project.md) |
| 29 | [探索](./29_explore/29_explore.md) |
| 30 | [总结](./30_conclusions/30_conclusions.md) |
🧡🧡🧡 祝你编码愉快 🧡🧡🧡
<div>
<small>支持<strong>作者</strong>创建更多教育材料</small> <br />
<a href = "https://www.paypal.me/asabeneh"><img src='./images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
</div>
---
- [介绍](#introduction)
- [要求](#requirements)
- [如何使用仓库](#how-to-use-repo)
- [Star 和 Fork 此仓库](#star-and-fork-this-repo)
- [克隆你的 Fork](#clone-your-fork)
- [创建新分支](#create-a-new-branch)
- [结构化练习解决方案](#structure-exercise-solutions)
- [提交练习解决方案](#commit-exercise-solutions)
- [每日更新你的 Fork](#update-your-fork-daily)
- [设置](#setup)
- [安装 Node.js](#install-nodejs)
- [浏览器](#browser)
- [安装谷歌 Chrome](#installing-google-chrome)
- [打开谷歌 Chrome 控制台](#opening-google-chrome-console)
- [在浏览器控制台中编写代码](#writing-code-on-browser-console)
- [Console.log](#consolelog)
- [带有多个参数的 Console.log](#consolelog-with-multiple-arguments)
- [注释](#comments)
- [语法](#syntax)
- [算术运算](#arithmetics)
- [代码编辑器](#code-editor)
- [安装 Visual Studio Code](#installing-visual-studio-code)
- [如何使用 Visual Studio Code](#how-to-use-visual-studio-code)
---
## 介绍
**恭喜**你决定参加 30 天 React 编程挑战。在这个挑战中，你将学习到开发 React 应用所需的一切知识。在挑战结束时，你将获得 30 天 React 编程挑战完成证书。如果你需要帮助或想帮助别人，可以加入[电报群](https://t.me/thirtydaysofreact)。
**30 天 React**挑战是一个针对 JavaScript 和 React 初学者和高级开发者的指南。欢迎来到 30 天 React 挑战。React 是一个 JavaScript 库。我喜欢使用和教授 React，希望你也会喜欢。在这个循序渐进的 30 天 React 挑战中，你将学习到 React，这是最受欢迎的用户界面 JavaScript 库之一。React 可以做到 JavaScript 能做的所有事情。React 可以用来**添加网站交互性、开发移动应用、桌面应用、游戏**。我相信你在接下来的 30 天里会学到很多东西，并且你的编程和问题解决能力也会显著提升。
我将使用对话式英语，并减少术语来编写此挑战。内容会不断更新。如果你发现错误或语法错误，不要惊讶，因为我发布之前并未做任何校对。建议你专注于挑战的主要信息，而不是英语和一些小错误。如果你向我提交改进的 Pull Request，我会非常感谢，并记得在提 Pull Request 之前先从主分支 Pull 一下。大多数在此挑战中使用的图片来自 30 天 JavaScript 挑战，因此你可能需要将文件名和文件夹重命名为 30 天 React。如果你熟悉数组、循环、函数、对象、函数式编程、解构和扩展以及类，那么你将能很好地跟随挑战进行。否则，我强烈建议你先检查[30 天 JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript)。
在深入本课程之前，你可以查看[30 天 React 的评论](https://t.me/thirtydaysofreact)。
这个挑战易读，用对话式英语编写，令人愉悦和激励，同时也非常苛刻。你需要投入大量时间来完成这个挑战。如果你是视觉学习者，你可以在<a href="https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw">Washera</a>YouTube 频道上观看视频课程。订阅该频道，在 YouTube 视频上评论和提问，积极主动，作者最终会注意到你。
作者喜欢听取你对挑战的意见，分享你对 30 天 JavaScript 挑战的看法。你可以在这个[链接](https://testimonial-vdzd.onrender.com/)上留下你的推荐信。
## 要求
为了顺利进行挑战，你需要以下条件：
1. 动力
2. 一台电脑
3. 网络
4. 一个浏览器
5. 一个代码编辑器
6. HTML、CSS 和 JavaScript 中级技能
## 如何使用仓库
### Star 和 Fork 此仓库
Star 此仓库支持此工作，Fork 此仓库以创建你的副本并从中进行工作。
### 克隆你的 Fork
你应该始终直接从你 Fork 的副本中进行工作。
```bash
# 注意，这里使用的是 `ssh` 链接，但 `https` 链接也可同样使用
git clone git@github.com:username/30-Days-Of-React.git
cd 30-Days-Of-React
```
### 创建新分支
为完成每日练习，我建议创建一个单独的分支来存放你的练习文件夹或你进行的任何其他更改。这将始终保持你的主分支干净，这意味着你的主分支将始终与原始主分支相似。
```bash
git checkout -b exercise-solutions # `-b` 会在不存在的情况下创建分支
```
### 结构化练习解决方案
在你的新分支中，你可以使用文件/文件夹来结构化你对每日练习的解决方案
```bash
mkdir -p solutions/day-01 # `-p` 帮助创建嵌套目录
touch solutions/day-01/level1.js # touch 创建一个文件
```
### 提交练习解决方案
将你的解决方案提交到你的 Fork
```bash
git add solutions/day-01/level1.js
git commit -m "chore: 完成 level1 练习"
git push origin exercise-solutions # 此分支 `exercise-solutions` 是先前创建的
```
### 每日更新你的 Fork
本仓库将在整个月内每日更新。当新一天的内容可用时，你可以通过以下步骤更新你的 Forked 副本。
```bash
# 1. 切换到主分支
git checkout master
# 2. 检查你的本地副本是否有指向原始 `...Asabeneh/30-Days-Of-React.git` 的链接
git remote -v
# 3. 如果没有，添加链接到原始仓库，你可以选择任何名字给这个链接，或者使用 `upstream`
git remote add upstream git@github.com:Asabeneh/30-Days-Of-React.git
# 4. 再次检查以确认链接已添加
git remote -v
# 5. 现在可以从原始仓库获取更新，假设你将此命名为 `upstream`
git fetch upstream
# 6. 将更新合并到你的本地主分支
git merge upstream/master master
# 7. 将合并的更新推送到Github上的Fork
git push origin master
```
> 请注意，更新仅应用于主分支。如果你想更新任何其他分支，请重复第 6-7 步，使用分支名称。参见下面`exercise-solutions`分支的代码片段。
```bash
git merge upstream/master exercise-solutions
git push origin exercise-solutions
```
## 设置
我相信你有成为开发者的动力和强烈愿望，有一台电脑和互联网连接。除此之外，还需要具备基础到中级水平的 HTML、CSS 和 JS。如果你符合这些条件，那么你就已经准备好开始了。
### 安装 Node.js
你现在可能还不需要用到 node.js，但将来可能会需要。安装 [node.js](https://nodejs.org/en/)。
![Node下载](images/download_node.png)
下载后双击并安装
![安装Node](images/install_node.png)
我们可以通过打开设备的终端或命令提示符来检查是否已在本地计算机上安装 node。
```sh
asabeneh $ node -v
v12.14.0
```
在制作本教程时我使用的是 node 版本 12.14.0，但现在推荐下载的版本是 12.17.0。
### 浏览器
有很多浏览器可供选择。然而，我强烈推荐使用谷歌浏览器。
#### 安装谷歌浏览器
如果你还没有安装谷歌浏览器，安装 [google chrome](https://www.google.com/chrome/)。我们可以在浏览器控制台写一些小的 JavaScript 代码，但我们不会使用浏览器控制台来开发应用程序。
![谷歌浏览器](images/google_chrome.png)
#### 打开谷歌浏览器控制台
你可以通过点击浏览器右上角的三个点，选择*更多工具 -> 开发者工具*或者使用键盘快捷键来打开谷歌浏览器控制台。我更喜欢使用快捷键。
![打开Chrome](images/opening_developer_tool.png)
使用键盘快捷键打开 Chrome 控制台。作为 JavaScript 和 React 开发人员，知道快捷键是很重要的，你将会在浏览器控制台上花费很多时间，开发过程中不要懒得打开它。
```sh
Mac
Command+Option+J
Windows/Linux:
Ctrl+Shift+J
```
![打开控制台](images/opening_chrome_console_shortcut.png)
打开谷歌浏览器控制台后，尝试浏览标记的按钮。我们将大部分时间花在控制台上。控制台是你编写 JavaScript 代码的地方。谷歌控制台的 V8 引擎会将你的 JavaScript 代码转换为机器代码。
让我们在谷歌浏览器控制台上写一段 JavaScript 代码：
![在控制台上写代码](./images/js_code_on_chrome_console.png)
#### 在浏览器控制台上写代码
我们可以在谷歌控制台或任何浏览器控制台上编写任何 JavaScript 代码。然而，对于这个挑战，我们只关注谷歌浏览器控制台。使用以下方式打开控制台：
```sh
Mac
Command+Option+I
Windows:
Ctrl+Shift+I
```
##### Console.log
为了编写我们的第一段 JavaScript 代码，我们使用了一个内置函数 **console.log()**。我们传递一个参数作为输入数据，该函数显示输出。我们将'Hello, World'作为输入数据或参数传递给 console.log() 函数。
```js
console.log("Hello, World!");
```
##### Console.log 传递多个参数
**console.log()** 函数可以接收以逗号分隔的多个参数。语法如下：**console.log(param1, param2, param3)**
![console log多个参数](./images/console_log_multipl_arguments.png)
```js
console.log("Hello", "World", "!");
console.log("HAPPY", "NEW", "YEAR", 2020);
console.log("Welcome", "to", 30, "Days", "Of", "JavaScript");
```
如你所见，_console.log()_ 可以接收多个参数。建议使用尽可能多的 console.log() 输出来检查代码中的发生情况，但不要永久保留所有的 console.log() 测试。打开浏览器控制台，使你的开发更轻松。
##### 注释
我们在代码中添加注释。注释对于使代码更易读以及在代码中留下备注非常重要。JavaScript 不会执行我们代码中的注释部分。在 JavaScript 中，以 // 开头的任何文本行都是注释，任何以 /\* \*/ 包围的内容也是注释。
**示例：单行注释**
```js
// 这是第一条注释
// 这是第二条注释
// 我是一条单行注释
```
**示例：多行注释**
```js
/*
这是一个多行注释
多行注释可以占用多行
JavaScript 是网络的语言
*/
```
##### 语法
编程语言类似于人类语言。英语或许多其他语言使用单词、短语、句子、复合句等来传达有意义的信息。语法的英语含义是*在一种语言中创建结构良好句子的单词和短语的排列*。技术上语法的定义是*计算机语言中语句的结构*。编程语言都有其语法。JavaScript 作为一种编程语言，它也有自己的语法。如果我们没有编写适合 JavaScript 理解的语法，它会引发各种类型的错误。我们将在后面探索不同类型的 JavaScript 错误。现在，让我们看看语法错误。
![错误](images/raising_syntax_error.png)
我故意犯了一个错误。因此，控制台引发语法错误。实际上，语法非常具有说明性。它告知犯了什么类型的错误。通过阅读错误反馈指南，我们可以纠正语法并解决问题。识别和删除程序中的错误过程，被称为调试。让我们修正这些错误：
```js
console.log("Hello, World!");
console.log("Hello, World!");
```
到目前为止我们已经看到如何使用 _console.log()_ 显示文本。如果我们使用 _console.log()_ 打印文本或字符串，该文本必须在单引号、双引号或反引号内。
**示例：**
```js
console.log("Hello, World!");
console.log("Hello, World!");
console.log(`Hello, World!`);
```
#### 算术运算
现在，让我们在谷歌浏览器控制台上使用 _console.log()_ 练习更多编写 JavaScript 代码，针对数字数据类型。
除了文本，我们还可以使用 JavaScript 进行数学计算。让我们做以下简单的计算。
控制台可以直接接收参数而不需要 **_console.log()_** 函数。然而，它被包括在这个介绍中，因为这个挑战的大部分会发生在文本编辑器中，在那里使用函数将是必要的。你可以直接在控制台上玩转指令。
![算术](images/arithmetic.png)
```js
console.log(2 + 3); // 加法
console.log(3 - 2); // 减法
console.log(2 * 3); // 乘法
console.log(3 / 2); // 除法
console.log(3 % 2); // 求余（取模）
console.log(3 ** 2); // 乘方 3 ** 2 == 3 * 3
```
### 代码编辑器
我们可以在浏览器控制台上编写代码，但是对于更大的项目来说，这样做是不够的。在实际工作环境中，开发人员使用不同的代码编辑器来编写代码。在这 30 天的 JavaScript 挑战中，我们将使用 Visual Studio Code。
#### 安装 Visual Studio Code
Visual Studio Code 是一个非常流行的开源文本编辑器。我建议 [下载 Visual Studio Code](https://code.visualstudio.com/)，但如果你更喜欢其他编辑器，也可以随意使用你已有的编辑器。
![Vscode](images/vscode.png)
如果你已经安装了 Visual Studio Code，让我们开始使用它。
#### 如何使用 Visual Studio Code
双击其图标打开 Visual Studio Code。当你打开它时，你会看到这样的界面。尝试与标记的图标进行互动。
![Vscode UI](./images/vscode_ui.png)
![Vscode 添加项目](./images/adding_project_to_vscode.png)
![Vscode 打开项目](./images/opening_project_on_vscode.png)
![脚本文件](images/scripts_on_vscode.png)
![安装 Live Server](images/vsc_live_server.png)
![运行脚本](./images/running_script.png)
![代码运行](./images/launched_on_new_tab.png)
恭喜！你已经完成了开始使用 React 所需的设置，但在我们深入学习 React 之前，让我们回顾一下 JavaScript。如果你对 JavaScript 非常熟悉，你可以跳过第一天的 JavaScript 回顾。JavaScript 回顾部分非常广泛，可能需要超过一天的时间。从我的经验来看，人们通常在 React 中遇到困难是因为他们的 JavaScript 知识非常浅。因此，为了填补这个空白，本节涵盖了所有可以在 React 中使用的必要的 JavaScript 特性。有很多练习，但你不需要全部完成。如果你想跳过 JavaScript 的内容并直接进入 React，点击 [这里](../30-Days-Of-React/02_Day_Introduction_to_React/02_introduction_to_react.md)。
🎉 恭喜你！ 🎉
[第一天 >>](./01_Day_JavaScript_Refresher/01_javascript_refresher.md)

7
readMe.md
Unescape View File

@ -15,6 +15,13 @@
<sub>Author: <a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> October, 2020</small></sub>
</sub>
<div>
🇨🇳 [Chinese](./Chinese/readMe.md)
</div>
</div>

Write Preview
Loading…
Cancel
Save