如何用JavaScript创建React应用程序

偶尔，你一定会想知道，在你的手机和笔记本电脑迷人的用户界面背后，是什么工具。通常情况下，你的问题的答案是“React”。这确实是一个惊人的框架，它改变了现在用户界面的构建方式。

本文将指导您完成创建React应用程序的步骤，但在此之前，让我们简单地谈谈这个工具。

React:一个小介绍

一部分JavaScript库React是一个用于创建交互式和快速用户界面的工具。最近，它是最受认可的库工具，最初是由Facebook开发的。

说到“库”，如果你不习惯软件工程领域，你可能会有点困惑。从技术上讲,“图书馆”和一个“框架”是两个不同的概念。其中一个主要的区别是框架规定了应用程序的更大区域;而库具有基本的、较窄的应用程序，例如特定的应用程序特性。

React与其说是一个框架，不如说是一个JavaScript库，原因是它能在特定的事情上发挥神奇的作用，比如快速地构建精彩的网站和设置应用程序。然而，如果你正在构建游戏，React并不是你的最佳选择。

有三个反应的主要特征有:

• React使用声明性元素。
• React代码可用于不同的技术和浏览器。
• 它是由管理其表单的各个组件组成的。

如果你是一名开发人员，你可以使用react Native等react代码轻松创建手机应用程序，特别是用于移动应用程序框架。

现在学习如何构建React应用程序

现在您已经对react有了一些基本的概念，让我们看看构建一个简单应用程序的react步骤的要点。

React.Js的要点

在使用react之前，你必须记得在你的系统上安装了npm(节点包管理器)和Node .js。为了检查两者是否都安装了，您可以在您的终端上运行以下命令:

• 节点- version
• npm - version

然后，你还应该检查你是否安装了用于或开发React应用程序的代码编辑器。此外，你还必须具备CSS, HTML, ES6特性，npm和JavaScript的基本知识才能继续。

的步骤……

步骤1:通过设置样板在终端中创建react应用程序

打开终端并移动您希望安装react应用程序的目录。在终端中，运行下面的命令。这将自动在当前文件夹中创建一个新目录。

**npm create-react-app my-app**

React应用程序可以很容易地手动构建，也可以通过应用节点包(create- React -app)来创建React应用程序的样板版本。

react应用程序的名称“my-app”可以被替换为一个你想要的名字，确保它不是大写字母。

通过当前在目录中生成的命令，可以安装可传递的依赖项，并自动创建初始项目结构。你可以删除最近创建的目录，在终端执行如下命令:

* * cd-my-react-app * *

步骤2:启动React应用程序

下一步是转到新创建的目录。开发web服务器可以在终端执行如下命令时启动:

• NPM启动，或者
• 纱线开始

在终端中执行命令后，它将以开发模式运行react应用程序。在这一步之后，它将自动引导您到一个HTML页面。

转到“my-app”app目录，查看HTML页面上显示的文件夹名为“src”。你会发现一个名为“App.js”的文件。在应用程序初始化后，App.js文件默认为主页上提供的HTML代码。

通常，App.js是React应用程序结构中最高标准的组件。应用程序的配置存储在名为“index.js”的文件中的同一个文件夹中，该文件还实现了React-Redux和React-Router等依赖项。

步骤3:执行测试运行

在创建React应用程序时，一些单元测试用例默认定义在src/App.test.js文件中。运行测试可以通过在终端中执行“npm test”或“yarn test”命令来执行。

步骤4:如果应用程序用于生产

如果你已经为演绎构建了react应用程序，你可以在终端中输入如下命令:

• NPM运行构建，或者，
• 纱构建

当您执行上面的命令时，它将把生产应用程序构建到build文件夹中。此后，您的应用程序就可以部署了。

结论

创建自己的应用程序可能不是火箭科学，但最好的学习方法是有一些最初的失败。软件工程师和编码员强烈建议，必须从核心理解JavaScript的概念。如果你不愿意独自做这项工作，你总是可以选择的外包React.Js开发．

每年，新的JavaScript库和框架都在软件界风靡一时，这一数字数不胜数。这篇文章已经向你介绍了从头开始创建React应用程序的基本支柱，但你必须始终记住热烈地遵循这些指导方针。