30-Days-Of-React - 30 天内学​​习 React 的指南

Created at: 2020-09-29 21:38:54
开发语言: JavaScript

30 天的 React

推特 关注

作者: Asabeneh Yetayeh
十月, 2020

第1天 >>

# 天 主题
00 简介
如何使用存储库
要求
设置
01 JavaScript Refresher
02 入门 React
03 建立
04 组件
05 道具
06 列表、 map和键
07 类组件
08 国家
09 条件呈现
10 React 项目文件夹结构
11 事件
12 形式
13 受控和非受控组件
14 组件生命周期
15 第三方套餐
16 高阶元件
17 React 路由器
18 Fetch vs. Axios
19 项目
20 项目
21
22 使用钩子的表单
23 使用钩子获取数据
24 使用钩子的项目
25 定制挂钩
26 上下文
27 裁判
28 项目
29 探讨
30 结论

🧡🧡🧡 快乐编码 🧡🧡🧡

支持作者创作更多教材
PayPal徽标


介绍

恭喜你决定参加 30 天的 React 编程挑战赛。在这个挑战中,你将学习开发 React 应用程序所需的所有内容。在挑战结束时,你将获得30DaysOfReact编程挑战完成证书。如果你需要帮助或想帮助他人,你可以加入电报组

30DaysOfReact挑战赛是初学者和高级JavaScript和React开发人员的指南。欢迎来到 30 Days Of React。React 是一个 JavaScript 库。我喜欢使用和教授 React,我希望你也会这样做。在这个一步一步的30 Days React挑战中,你将学习React,它是最流行的用户界面JavaScript库之一。React 可以完成 JavaScript 可以做的所有事情。React 可用于为网站添加交互性,开发移动应用程序、桌面应用程序和游戏。我相信在接下来的30天里,你会学到很多东西,你的编程和解决问题的能力也会得到显着提高。

我将使用会话英语和较少的行话来编写此挑战。内容将不断更新。如果你发现拼写错误或语法错误,请不要感到惊讶,因为我在发布之前不会做任何校对。我建议你专注于挑战的主要信息,而不是英语和一些小错误。如果你向我发送改进请求,并记得在发送拉取请求之前先从 master 拉取,我非常感谢。我在此挑战中使用的大多数图像都来自30DaysOfJavaScript挑战,因此你可能需要重命名文件名和文件夹30DaysOfReact。如果你擅长数组、循环、函数、对象、函数式编程、解构和传播以及类,那么你将能够正确地遵循挑战。否则,我强烈建议你检查30DaysOfJavaScript

在你深入研究本課程之前,你可以檢查 30 Days Of React 的評論。

要求

要与挑战相处,你需要具备以下条件:

  1. 动机
  2. 一台电脑
  3. 互联网
  4. 浏览器
  5. 代码编辑器
  6. HTML,CSS和JavaScript中级技能

如何使用存储库

对这个回购进行分期和分叉

为此存储库加注星标以支持此工作,并分叉存储库以创建你自己的副本以从中工作。

克隆你的分叉

你应该始终直接从分叉副本中工作。

# note that an `ssh` link is used here, but an `https` link will work the same
git clone git@github.com:username/30-Days-Of-React.git
cd 30-Days-Of-React

创建新分支

要完成日常练习,我的建议是创建一个单独的分支来容纳你的锻炼文件夹或你所做的任何其他更改。这将始终保持主分支的清洁,这意味着你的主分支将始终与原始主分支相似。

git checkout -b exercise-solutions # `-b` creates the branch if it does not exist

结构锻炼解决方案

在新分支中,你可以使用文件/文件夹来构建日常练习的解决方案

mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a file

提交锻炼解决方案

将你的解决方案提交到你的分叉

git add solutions/day-01/level1.js
git commit -m "chore: exercise level1 complete"
git push origin exercise-solutions # branch `exercise-solutions` was created earlier

每天更新你的分叉

此存储库将在整个月中每天更新。当新的一天的内容可用时,你可以使用以下步骤更新分叉的副本。

# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream git@github.com:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin master

请注意,更新仅应用于主分支。如果要更新任何其他分支,请使用分支名称重复步骤 6-7。请参阅下面的代码段以了解分支

exercise-solutions

git merge upstream/master exercise-solutions
git push origin exercise-solutions

设置

我相信你有动力和强烈的愿望成为一名开发人员,一台计算机和互联网。除了基本到中级的HTML,CSS和JS。如果你有这些,那么你有一切可以开始。

安装节点.js

你可能现在不需要 node.js但以后可能需要它。安装节点.js

节点下载

下载后双击并安装

安装节点

我们可以通过打开设备终端或命令提示符来检查节点是否安装在本地计算机上。

asabeneh $ node -v
v12.14.0

在制作本教程时,我使用的是 node 版本 12.14.0,但现在推荐的 node.js 下载版本是 12.17.0。

浏览器

那里有很多浏览器。但是,我强烈建议使用谷歌浏览器。

安装谷歌浏览器

如果你还没有,请安装谷歌浏览器。我们可以在浏览器控制台上编写小的JavaScript代码,但我们不使用浏览器控制台来开发应用程序。

谷歌浏览器

打开谷歌浏览器控制台

你可以通过点击浏览器右上角的三个点,选择更多工具 - >开发者工具或使用键盘快捷键来打开Google Chrome控制台。我更喜欢使用快捷方式。

开口镀铬

使用键盘快捷键打开 Chrome 控制台。作为JavaScript和React开发人员,你也很高兴知道快捷方式,你将花费大量时间在浏览器控制台上,并且在开发过程中不要懒惰地打开它。

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

打开控制台

打开谷歌浏览器控制台后,请尝试浏览标记的按钮。我们将把大部分时间花在控制台上。控制台是 JavaScript 代码所在的位置。Google Console V8 引擎将你的 JavaScript 代码更改为机器代码。让我们在Google Chrome控制台上编写一个JavaScript代码:

在控制台上编写代码

在浏览器控制台上编写代码

我们可以在Google控制台或任何浏览器控制台上编写任何JavaScript代码。但是,对于这个挑战,我们只关注谷歌浏览器控制台。使用以下命令打开控制台:

Mac
Command+Option+I

Windows:
Ctl+Shift+I
控制台.log

为了编写我们的第一个JavaScript代码,我们使用了一个内置的函数控制台.log()。我们传递了一个参数作为输入数据,该函数显示输出。我们在控制台.log()函数中传递了“Hello, World”作为输入数据或参数。

console.log('Hello, World!')
具有多个参数的控制台.log

console.log() 函数可以采用多个用逗号分隔的参数。语法如下所示:console.log(param1, param2, param3)

控制台记录多个参数

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 中,任何以 // 开头的文本行都是注释,任何像 /* */ 这样的文本行也是注释。

示例:单行注释

这是第一条评论
// 这是第二条评论
// 我是单行评论

示例:多行注释

/* 这是一个多行注释
多行注释可以采取多行
JavaScript 是 web 的语言
*/

语法

编程语言类似于人类语言。英语或许多其他语言使用单词,短语,句子,复合句和其他更多来传达有意义的信息。语法的英语含义是单词和短语的排列,以在语言中创建格式良好的句子。语法的技术定义是计算机语言中语句的结构。编程语言有语法。JavaScript是一种编程语言,像其他编程语言一样,它有自己的语法。如果我们不编写JavaScript可以理解的语法,它将引发不同类型的错误。稍后我们将探讨不同类型的 JavaScript 错误。现在,让我们看看语法错误。

错误

我故意犯了一个错误。因此,控制台会引发语法错误。实际上,语法非常翔实。它告知所犯的错误类型。通过阅读错误反馈指南,我们可以更正语法并解决问题。从程序中识别和删除错误的过程称为调试。让我们修复错误:

console.log('Hello, World!')
console.log('Hello, World!')

到目前为止,我们看到了如何使用控制台.log()显示文本。如果我们使用 console.log() 打印文本或字符串,则文本必须位于单引号、双引号或反引号内。例:

console.log('Hello, World!')
console.log('Hello, World!')
console.log(`Hello, World!`)

算法

现在,让我们练习在谷歌浏览器控制台上使用控制台.log()来编写JavaScript代码,以获取数字数据类型。除了文本之外,我们还可以使用JavaScript进行数学计算。让我们进行以下简单计算。控制台可以直接获取参数,而无需控制台.log() 函数。但是,它包含在本简介中,因为大多数挑战将发生在文本编辑器中,其中函数的使用将是强制性的。你可以直接按照控制台上的说明进行游戏。

算术

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

代码编辑器

我们可以在浏览器控制台上编写代码,但对于更大的项目来说,它不起作用。在实际的工作环境中,开发人员使用不同的代码编辑器来编写代码。在这30天的JavaScript挑战赛中,我们将使用Visual Studio Code。

安装 Visual Studio Code

Visual Studio代码是一种非常流行的开源文本编辑器。我建议下载Visual Studio Code,但如果你支持其他编辑器,请随时关注你所拥有的内容。

Vscode

如果你安装了Visual Studio Code,让我们开始使用它。

如何使用Visual Studio Code

通过双击 Visual Studio Code 的图标打开它。当你打开它时,你将获得这种界面。尝试与带标签的图标进行交互。

Vscode ui

Vscode add project

Vscode 打开项目

脚本文件

安装实时服务器

运行脚本

编码运行

祝贺!你已经完成了开始使用 React 所需的设置,但在我们深入研究 React 之前,让我们做一个 JavaScript 复习。如果你对JavaScript非常满意,你可以跳过第1天的JavaScript复习。JavaScript复习部分很大,可能需要一天以上的时间。根据我的经验,人们通常会被困在 React 中,因为他们的 JavaScript 知识非常肤浅,因此为了填补这一空白,所有可以在 React 中使用的必要 JavaScript 功能都在 JavaScript 复习部分进行了介绍。有很多练习,但你不需要解决它们。点击这里 如果你想跳过JavaScript并直接跳到React。

🎉祝贺!🎉

第1天 >>