30 Days Of React
1.0.0
通过加入即将到来的编码训练营来学习Asabeneh
作者：asabeneh Yetayeh
2020年10月
第1天>>
| ＃ 天 | 主题 |
|---|---|
| 00 | 介绍 如何使用回购 要求 设置 |
| 01 | JavaScript复习 |
| 02 | 入门反应 |
| 03 | 设置 |
| 04 | 成分 |
| 05 | 道具 |
| 06 | 列表，地图和钥匙 |
| 07 | 类组件 |
| 08 | 国家 |
| 09 | 有条件的渲染 |
| 10 | React项目文件夹结构 |
| 11 | 事件 |
| 12 | 表格 |
| 13 | 受控和不受控制的组件 |
| 14 | 成分生命周期 |
| 15 | 第三方套餐 |
| 16 | 高阶组件 |
| 17 | 反应路由器 |
| 18 | 提取与轴 |
| 19 | 项目 |
| 20 | 项目 |
| 21 | 钩子 |
| 22 | 使用钩子的表单 |
| 23 | 使用挂钩获取数据 |
| 24 | 使用钩子的项目 |
| 25 | 自定义钩 |
| 26 | 语境 |
| 27 | 参考 |
| 28 | 项目 |
| 29 | 探索 |
| 30 | 结论 |
???愉快的编码？？？
祝贺决定参加30天的React编程挑战。在此挑战中，您将学习开发React应用程序所需的一切。在挑战结束时，您将获得30DAYSOFEREACT编程挑战完成证书。如果您需要帮助，或者如果您想帮助其他人，则可以加入电报组。
30DAYSOFERECT挑战是初学者和高级JavaScript和React Developers的指南。欢迎来到30天的反应。 React是JavaScript库。我喜欢使用和教授React，希望您也能这样做。在此步骤30天的React挑战中，您将学习React，这是最受欢迎的用户界面JavaScript库之一。 React可以完成JavaScript可以做的所有事情。 React可用于将交互性添加到网站，开发移动应用程序，桌面应用程序，游戏。我相信您将在接下来的30天内学到很多东西，并且您的编程和解决问题技能也将得到显着提高。
我将使用对话英语和更少的术语来写这一挑战。内容将不断更新。如果您发现错别字或语法错误，请不要感到惊讶，因为在发布之前，我没有做任何证据。我建议您专注于挑战的主要信息，而不是英语和一些小错误。如果您向我发送提示请求，请记住在发送拉动请求之前先从主手提取请求，我非常感谢。我在此挑战中使用的大多数图像来自30DaysofjavaScript挑战，因此您可能需要重命名文件名和文件夹30Daysofreact。如果您擅长阵列，循环，功能，对象，功能编程，破坏和传播以及班级，那么您将能够正确遵循挑战。否则，我强烈建议您检查30DaysofjavaScript。
在研究此课程之前，您可以检查30天的React的评论。
这个挑战很容易阅读，用对话英语，引人入胜，激励性，同时又非常苛刻。您需要分配很多时间来完成这一挑战。如果您是视觉学习者，则可以在Washera YouTube频道上获得视频课程。订阅频道，评论并在YouTube Vides上提出问题并积极主动，作者最终会注意到您。
作者喜欢听取您对挑战的看法，分享您对30DaysofjavaScript挑战的想法。您可以在此链接上留下推荐
通过加入即将到来的编码训练营来学习Asabeneh
要面对挑战，您需要有以下内容：
播放此存储库以支持这项工作，并分配回购以创建自己的副本以工作。
您应该始终直接从分叉的副本中工作。
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]: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 [email protected]: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。如果您有这些，那么您将有一切开始。
您现在可能不需要Node.js，但是您可能需要它以供以后使用。安装node.js。
下载双击并安装后
我们可以通过打开我们的设备终端或命令提示，检查在本地计算机上是否安装了节点。
asabeneh $ node -v
v12.14.0在制作本教程时，我正在使用节点版本12.14.0，但是现在推荐的Node.js下载版本为12.17.0。
那里有很多浏览器。但是，我强烈建议Google Chrome。
如果您还没有，请安装Google Chrome。我们可以在浏览器控制台上编写小型JavaScript代码，但是我们不使用浏览器控制台来开发应用程序。
您可以通过单击浏览器右上角的三个点，选择更多工具 - >开发人员工具或使用键盘快捷方式来打开Google Chrome控制台。我更喜欢使用快捷方式。
使用键盘快捷键打开Chrome控制台。很高兴知道捷径是JavaScript和React开发人员，您将花费很多时间在浏览器控制台上，并且在开发过程中不要懒惰。
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
打开Google Chrome控制台后，尝试探索标记的按钮。我们将大部分时间都花在控制台上。控制台是您的JavaScript代码进入的地方。 Google Console V8引擎将您的JavaScript代码更改为机器代码。让我们在Google Chrome Console上编写JavaScript代码：
我们可以在Google控制台或任何浏览器控制台上编写任何JavaScript代码。但是，对于这一挑战，我们只关注Google Chrome控制台。使用以下方式打开控制台：
Mac
Command+Option+I
Windows:
Ctl+Shift+I为了编写我们的第一个JavaScript代码，我们使用了内置函数Console.log（） 。我们将一个参数作为输入数据传递，并且该函数显示输出。我们将“ Hello，World”作为输入数据或Console.log（）函数中的输入数据传递。
console . log ( 'Hello, World!' ) 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中以//的方式发表了任何文本行，是一个注释，类似这样的内容 / * * /也是评论。
示例：单行评论
//这是第一个评论
//这是第二条评论
//我是一行评论
示例：多行论
/*这是多行论
多行论可以采用多行
JavaScript是网络的语言
*/
编程语言类似于人类语言。英语或许多其他语言使用单词，短语，句子，复合句子等来传达有意义的信息。语法的英语含义是单词和短语的排列，以一种语言创建良好的句子。语法的技术定义是计算机语言中语句的结构。编程语言具有语法。 JavaScript是一种编程语言，与其他编程语言一样，它具有自己的语法。如果我们不编写JavaScript理解的语法，它将引起不同类型的错误。稍后我们将探索各种JavaScript错误。现在，让我们查看语法错误。
我犯了一个故意的错误。结果，控制台提出了语法错误。实际上，语法非常有用。它告知犯了哪种类型的错误。通过阅读错误反馈指南，我们可以纠正语法并解决问题。从程序中识别和删除错误的过程称为调试。让我们解决错误：
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )到目前为止，我们看到了如何使用Console.log（）显示文本。如果我们使用console.log（）打印文本或字符串，则文本必须在单引号，双引号或反向引号内。例子：
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) 现在，让我们在Google Chrome Console上使用Console.log（）练习更多编写JavaScript代码，以了解数字数据类型。除文本外，我们还可以使用JavaScript进行数学计算。让我们进行以下简单计算。控制台可以直接进行参数，而无需Console.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代码。
Visual Studio代码是非常流行的开源文本编辑器。我建议下载Visual Studio代码，但是如果您赞成其他编辑，请随时遵循所拥有的内容。
如果您安装了Visual Studio代码，请让我们开始使用它。
通过双击其图标打开Visual Studio代码。打开它时，您将获得这种接口。尝试与标记的图标进行交互。
恭喜！您已经完成了开始使用React所需的设置，但是在我们深入React之前，让我们进行JavaScript复习。如果您对JavaScript非常舒适，则可以跳过第1天JavaScript复习。 JavaScript刷新部分很大，可能需要一天以上。根据我的经验，人们通常会陷入反应中，因为他们的JavaScript知识非常浅，因此可以填补该空白的所有必要的JavaScript功能，可在React中使用的所有必要的JavaScript功能在JavaScript Refreher部分中涵盖。有很多练习，但您不需要解决它们。如果您想跳过JavaScript并直接跳入React，请单击此处。
？恭喜！ ？
第1天>>
