文章目录
1、基本条件
- HTML,CSS和JavaScript的基本知识。
- 一些Javascript的ES6功能,例如
让和const
箭头功能
类和“ this”关键字 - NodeJS和代码编辑器的基础知识
2、HTML,CSS,JavaScript
如果您是一位经验丰富的开发人员,而不是跳过本节,那么这里是快速入门。
- 每个前端开发人员都从这三件事开始他们的旅程。这些是前端Web开发基础的基本基础,它们都可以共同创建功能全面的Web应用程序/网站。
- 将人体视为网站或网络应用程序。
- HTML可以被认为是告知主体必须到达何处的结构或“骨架”。
- CSS定义了一种样式,即“皮肤,肉肉”,它告诉特定的段看起来应该像它的颜色,高度,宽度等一样,
- JavaScript定义了功能,它是“大脑”的一部分,该功能告诉每个部分做什么。
3、Javascript的ES6功能
ES6是JavaScript的版本,并且ES6有很多功能。要开始使用React,您需要了解Arrow函数,Let和Const,Class和’this’关键字。
箭头功能:箭头功能可让您编写函数的较短语法。它使您的代码干净且可读性更高。检查下面的代码片段…
// Old method
function greet()
{
console.log('GeeksforGeeks');
}
var greet1 = function(){
console.log('GeeksforGeeks');
}
//ES6 method
var greet2 = () => {
console.log('GeeksforGeeks');
}
Let和Const:您将使用’let’和’const’代替’var’关键字。简而言之,两者都与var不同…
让我们定义一个局部变量,将它们的范围限制在声明它们的块中。
常量定义一个常量变量,其值不能更改。
类和’this’关键字:您将必须学习ES6中的面向对象编程概念,例如类,方法,对象。您可能已经用其他语言(例如C ++或Java)了解了这些概念。从ES6了解更多信息| 上课并按照此视频教程进行了解。
4、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’关键字来使用该模块。
导出:在创建模块/组件时使用此关键字,而您只需要返回一部分,而不必返回所有方法和变量。
5、学习ReactJS
React是Facebook开发的用于构建交互式用户界面的Javascript库。它遵循基于组件的体系结构,这意味着您将整个UI部分划分为可重用的组件,所有组件都单独制造,最后装配到父组件中,然后再呈现。以下是一些在ReactJS中学习的重要主题…
-
组件体系结构。
-
状态:基本上,“状态”包含同步变量。如果更改状态变量的值,则更改将立即反映在使用该特定变量的所有位置。
-
道具:就像在函数或方法中传递的参数一样。在React中,道具(参数)作为输入参数传递到HTML标记中。
-
功能组件,类组件。
-
React中的样式(CSS)。
-
了解如何使用React应用程序连接到API。
-
简单的待办事项
-
简单的计算器应用程序
-
建立一个购物车
-
使用GitHub API显示GitHub的用户统计信息