ReactJs简介_javascript_前端_博客

既然您已经到了这篇文章，我肯定不需要深入解释什么是ReactJs，它的优点是什么，为什么它是如此的酷，或者为什么它比Angular甚至Vue.js都不错。

如果您在这里，请确保您已经掌握了以上所有内容，但本文的目的不是要重复此步骤，而是要进行足够友好的介绍，以便您从Web编程开始但仍然不具备所有基础知识和基本知识。它是前端，后端或全栈Web开发所必需的，但是您很好奇，想使用ReactJ，继续获取它们就可以进行实验，而无需了解React开发环境的样板（npm，webpack，babel等等...），您可以在几分钟内和在线创建您的第一个组件。

第1部分-ReactDOM

工具类

ReactDOM是负责将组件放置在DOM中并对其进行解释的库，这些组件是使用ReactJs创建的，这些版本15中的库是两个单独的库，但同时它们又一起工作，首先我们要打开jsbin .com。并使用“添加库”按钮安装ReactJS，让我们找到ReactJs。

选择图书馆

一旦安装了React js，我们就可以创建我们的第一个组件并将其放置在DOM中，为此，我们将放置一个标签

在编辑器的左侧具有id root的情况下，请记住我们之间有几个部分：html，css，javascript，控制台和输出，我们将仅激活html，javascript和html。

<!DOCTYPE html>   <html>   <head>     <meta charset="utf-8">   <meta name="viewport" content="width=device-width">   <title>JS Bin</title> </head>   <body>      <div id="root" ></div> </body>   </html>

您的第一个组件

在javascript部分中，我们必须选择正确的编译器，这是选择javascript而不是“ ES6 / Babel”，我们将编写第一个组件：

const App = () => (      <div>       BlisS    </div> ) ReactDOM.render(<App/>, root)

让我们观察一下ReactDOM的render方法接收2个参数，第一个是我们要以jsx格式（如html标签）放置的React组件，第二个是我们想要放置它的位置，我们可以传递第二个带有文档选择器.getElementById（'root'）的参数，但在较新版本的ReactDOM中，即使没有引号，ID的名称也已足够。

我们应该在Output部分中看到结果，这使我们知道我们的代码有效。

这非常简单，但是它使我们了解了什么是组件以及ReactJs作为简单库如何工作。

您已经用ReactJs创建了第一个组件Feliciades，并且已经在DOM中渲染了它。