每个前端开发人员和Web开发人员都知道在多个地方编写相同的代码是多么令人沮丧和痛苦。如果他们需要在多个页面上添加按钮, 那么他们将被迫编写大量代码。使用其他框架的开发人员即使在编写频繁更改的组件时也面临着对大多数代码进行返工的挑战。开发人员想要一个框架或库, 使他们能够分解复杂的组件并重用代码以更快地完成他们的项目。这里React进来并解决了这个问题。
React是用于构建用户界面的最受欢迎的javascript库。它快速, 灵活, 还拥有一个强大的社区, 可随时在线为你提供帮助。关于React的最酷的事情是它基于组件, 你可以将复杂的代码分解为独立的部分, 即组件, 这有助于开发人员更好地组织其代码。许多公司都在向React迁移, 这就是大多数初学者和经验丰富的开发人员也扩大了学习此库的知识的原因。
学习该库是一项艰巨的任务。你看了很多教程, 并尝试获得学习该库的最佳材料, 但是如果你不知道正确的学习路径或逐步的学习过程, 它可能会变得无所适从。我们将讨论一个开始使用React的路线图, 以及进入React的基本先决条件(清单)。让我们开始吧…
清单/先决条件
- HTML, CSS和JavaScript的基本知识。
- 一些Javascript的ES6功能, 例如
- 让和const
- 箭头功能
- 类别和" this"关键字
- NodeJS和代码编辑器的基础知识
1. HTML, CSS, JavaScript
如果你是经验丰富的开发人员, 而不是跳过本节, 那么对于初学者来说, 这里是快速入门。
- 每个前端开发人员都从这三件事开始他们的旅程。这些是前端Web开发基础的基础, 它们一起工作以创建功能全面的Web应用程序/网站。
- 将人体视为网站或网络应用程序。
- 的HTML可以被认为是人体的结构或"骨骼", 它告诉必须去哪里。
- 的CSS定义样式为"皮肤, 肉", 告诉特定的段看起来应该像它的颜色, 高度, 宽度等一样,
- 的JavaScript定义功能是"大脑"的一部分, 该功能告诉每个部分做什么。
2. Javascript的ES6功能
ES6是JavaScript的版本, ES6有很多功能。要开始使用React, 你需要了解箭头函数, Let和Const, Class和" this"关键词。
箭头功能:箭头函数允许你编写函数的较短语法。它使你的代码更干净, 更易读。检查下面的代码片段...
// Old method
function greet()
{
console.log( 'lsbin' );
}
var greet1 = function (){
console.log( 'lsbin' );
}
//ES6 method
var greet2 = () => {
console.log( 'lsbin' );
}让和康斯特:你将使用" let"和" const"而不是" var"关键字。简而言之, 两者都与var不同...
- 让定义一个局部变量将它们的范围限制在声明它们的块中。
- 康斯特定义一个常数变数其值不能更改。
类别和" this"关键字：你将必须学习ES6中的面向对象编程概念, 例如类, 方法, 对象。你可能已经用其他语言了解了这些概念, 例如C ++orJava。从中阅读有关此内容ES6 |班级并遵循这个影片教学了解这一点。
如果我们谈论" this"关键字, 那么它代表执行中的当前对象。确保你清除" this"关键字的概念, 这对很多开发人员来说都是很困惑的。伴随着学习什么是致电, 申请并绑定方法(用于将" this"关键字绑定/连接到对象)。
3. NodeJS基础和代码编辑器
理解NodeJS基础对于在ReactJS上工作很重要。简单来说, NodeJS是javascript的执行环境。许多人认为这是一种错误的编程语言。每个浏览器都具有嵌入到浏览器中的JavaScript引擎, 例如, Chrome具有V8引擎, 而Mozilla Firefox具有SpiderMonkey。你无法在浏览器外部执行任何操作, 例如文件操作, 操作系统操作, 网络操作等, 因此这里就存在节点。 Node允许你在浏览器之外执行所有这些操作。它嵌入了chrome的V8引擎。
现在你可能已经非常熟悉NodeJ, 所以让我们讨论一下学习React必须知道的Node特性.
- NPM(节点程序包管理器)：NPM是一个软件包管理器, 用于将节点模块和软件包安装到项目中, 就像python的PIP一样。
- IMPORT和EXPORT关键字。
- 进口：在项目中使用NPM安装Node模块之后, 你将必须使用" import"关键字来使用该模块。
- 出口：在创建模块/组件时, 只需返回一部分, 而不必返回所有方法和变量, 请使用此关键字。
阅读文章ReactJS |导入导出以获取有关此主题的更多帮助。你可以使用任何代码编辑器在React上工作。许多Web开发人员大多更喜欢Visual Studio代码-VS代码-(强烈推荐), Sublime Text或Atom。
学习ReactJS
基本原理：我们上面讨论的所有上述事情都是ReactJS的前提。现在, 一旦你了解了以上所有内容, 就可以开始使用React了。首先了解React的基本概念。我们将在这里为你提供概述。
React是Facebook开发的用于构建交互式用户界面的Javascript库。它遵循基于组件的体系结构, 这意味着你将整个UI部分划分为可重用的组件, 所有组件都是单独制造的, 最后装配到父组件中, 然后再呈现。以下是一些在ReactJS中学习的重要主题…
- 组件体系结构(已经讨论过)。
- 州：基本上, "状态"包含同步变量。如果更改状态变量的值, 则更改将立即反映在使用该特定变量的所有位置。
- 道具：就像在函数或方法中传递的参数一样。在React中, 道具(参数)作为输入参数传递到HTML标记中。
- 功能组件, 类组件。
- React中的样式(CSS)。
- 了解如何使用React应用程序连接到API。
阅读教程ReactJS |极客, React官方教程并观看视频ReactJS教程。一旦你对React有了基本的了解, 就可以开始构建一些基本项目, 例如…
- 简单的待办事项
- 简单的计算器应用程序
- 建立一个购物车
- 使用GitHub API显示GitHub的用户统计信息
反应路由器：React路由将帮助你了解路由在React应用程序中的工作方式。如何使用React Router加载特定页面的内容或如何重定向到特定页面。例如, 要从"主页"页面重定向到"博客"页面, 你将必须设置路由, 使其只能显示"博客"页面的内容。从视频中了解这一点初学者的React Router和反应路由器。了解React Router之后, 你可以进行一些项目, 例如一个简单的CURD应用程序or黑客新闻克隆
Webpack：Webpack是Javascript中的模块捆绑器, 可帮助你将依赖项保持为项目的静态文件, 从而使开发人员不必这样做。 Webpack还带有加载程序。加载程序可帮助你在项目中运行特定任务。观看视频Webpack教程并继续阅读Webpack官方文档。
服务器渲染：学习此概念将帮助你在服务器中创建组件并将其呈现为HTML并在你的浏览器中呈现, 并且当所有JavaScript模块都在浏览器中下载后, React就成为了舞台。这是React最酷的功能之一, 可以与任何后端技术一起使用。从链接中了解此概念Tyler McGinnis的React服务器渲染.
Redux：在复杂的应用程序中, 你将必须管理组件之间的状态。 Redux是一个javascript库, 可以解决此问题, 并且可以帮助你维护应用程序状态。在Redux中, 你将所有状态存储在一个源中。通过链接以更好的方式理解此概念React-Redux简介和React Redux初学者教程.
这就是从一开始就学习React的路线图。我们希望这会有所帮助！
