Promise、生成器、异步/等待！

mdsojibahammed3

React JS：新手教程 正如您从标题中可以猜到的那样，这篇文章是针对那些在编程领域经验很少的人（有点像我，只探索了这个宇宙六个月）。这实际上是一个针对新手的小教程！您需要的知识很少：HTML、CSS 和基本的 Javascript 水平。 注意：在接下来的示例中，我们将利用 ES6 在编写 Javascript 方面提供的一些新潜力，但可以轻松地将 React 与 ES5 结合使用。 埃莉斯·西科格纳尼 初级开发人员 什么是反应 创建一个组件 示例：濒临灭绝的海盗 状态和道具 什么是反应 React 是由 Facebook 和 Instagram ( 创建的 Javascript 库，它允许您通过将其划分为组件的结构来创建单页应用程序 (SPA)动态且可重复使用。


React 组件是一个 JS 类，它扩展了React 提供的Component类。组件表示并定义 HTML 代码的原子块，以及与该片段关联的任何动态行为（例如，单击事件）。它们就像小乐高积木一样，可以根据需要进行组合，以创建所需的复杂应用程序。组件是可隔离和可重用的，并且仅由 Javascript 方 日本手机号码 法组成。基本方法是render()，它只是返回要显示的 HTML 片段。 用于定义组件的语法称为JSX：它是由 React 的创建者开发的，旨在促进组件内 Javascript 代码和 HTML 标记之间的交互。然后需要对用这种语法编写的代码进行编译，使其完全成为 Javascript 代码。 创建一个组件 为了创建我们的组件并在 HTML 页面中渲染它，我们需要一个由 HTML 文件中的 id 定义的 div。




在 JSX 文件中，我们将通过 id 将 React 组件连接到 div，如下例所示。这指示浏览器将其呈现在 DOM 中其标记内的页面上。 请参阅CodePen上Makhenzi ( @makhenzi ) 的Pen Start。 在 JSX 中，HTML 标签的属性实际上与 HTML 语法中的相同，除了一些例外，例如“class”，在 JSX 中变为“className”。类似 HTML 的语法用括号括起来，而包含 Javascript 的部分则用大括号括起来（我们稍后会看到）。 render()始终返回单个 div，其中标签和元素的数量可以根据需要变化。 示例：濒临灭绝的海盗 如果我们想使用 React 创建这个图表，我们可以显示各种日期，当单击每个日期时，会出现相应的温度和海盗数量。