QuikieApps

创建React应用

创建React应用台湾宾果28开奖是构建官方单页React应用台湾宾果28开奖的现代方法。它为构建React应用台湾宾果28开奖和学习React提供了一个舒适的环境。 创建React应用将安装构建React应用台湾宾果28开奖所需的所有软件包和模块,并允许您使用最新的Javascript功能。它以更直接的方式为您配置了所有先决条件,您所需要的只是Node.js 8.1或更高版本以及npm 5.6或更高版本。

快速入门

最初,您需要在终端上安装Create React App,为此您必须输入

npm install -g create-react-app

以前,如果您已经安装了Create React App,那么建议您使用以下命令将其卸载

– npm卸载-g create-react-app。

这将确保正在使用最新版本的npx

npx create-react-app我的应用

该命令将在目录中创建一个React Project。 “ my-app”是项目或文件的名称。这将使用您的文件名创建一个文件夹,您可以在其中浏览并开始创建应用台湾宾果28开奖。

创建项目用途后,

cd my-app

npm开始

这些命令将初始化项目,并在浏览器中打开localhost。 (http:// localhost:3000 /)首先,将localhost设置为预览默认页面,该页面欢迎您使用React应用台湾宾果28开奖。

要开始处理您的项目,请使用以下命令创建一个可以在目录中构建的文件,

npm运行构建

零配置

创建React应用无需任何特定配置。它会自动安装webpack和Bable之类的工具。这样您就不需要经过复杂的安装过程。只需借助上述命令创建一个项目,就可以创建一个React应用台湾宾果28开奖了

创建一个反应应用

要创建应用台湾宾果28开奖,可以使用nvm-windows或nvm(对于Mac或Linux)。使用这些,您还可以在项目中的节点版本之间切换。有几种创建应用台湾宾果28开奖的方法。您可以根据自己的喜好选择一种:

1) npm

npm init react-app我的应用

该命令将启动构建过程并下载所有依赖项和基本代码。

注意: npm init可以从npm 6+版本开始使用。

2) npx

npx create-react-app我的应用

从5.2+版本开始,可以使用npx命令。对于较旧的版本,需要遵循不同的说明。

3)纱

纱线创建react-app my-app

纱线0.25+中可用此命令“ yarn create”。

为您的项目选择一个模板

在Create React App中,您可以使用模板开始创建出色的应用台湾宾果28开奖,而不是从零开始。您可以通过创建命令行附加模板

–template [模板名称]

模板语法以cra-template- [template-name]的格式编写。这样,您只需提供模板名称。

通过搜索“ cra-template- *”,可以在npm上获得大多数模板的列表。

它由用于任何类型的React应用台湾宾果28开奖的模板组成。您可以从网站获取模板名称,该模板名称可用于您的react应用台湾宾果28开奖。

这些模板可以为正在创建的应用台湾宾果28开奖提供特定的基本结构。另外,您可以根据需要编辑模板。

当您不选择任何模板并开始编码时,Create React App将为您提供用于构建界面的默认模板。

但是,选择模板要方便得多,因为它可以大大减少编码长度。使用预先设计的模板,您可以设计一个可能没有它就需要花费几个小时的应用台湾宾果28开奖。

构建打字稿应用台湾宾果28开奖。

创建React是设计Typescript应用台湾宾果28开奖的最快方法。为了构建此应用台湾宾果28开奖,您可以使用模板来简化您的工作。

npx create-react-app my-typescript-app –typescript

该命令告诉npm模块创建一个新的Typescript应用台湾宾果28开奖。这里, npx create-react-app 是npm软件包的名称,并且 my-typescript-app –typescript 是在项目目录中创建的文件的名称。

此命令将安装将在项目中使用的所有必需依赖项。

之后,您需要将.js / .jsx文件重命名为.ts / .tsx,并准备编写应用台湾宾果28开奖代码。您可以使用以下命令更改名称:

MV src / index.js src / index.ts

> Next, by “npm开始” 命令,就可以开始开发了。另外,您可以使用模板使此过程变得简单。

npx create-react-app我的应用 –template打字稿

此命令会将模板附加到您的项目。写作 '–模板打字稿创建命令中的“关键字”将为您完成这项工作。

如果您已经建立了一个项目,并且想要添加打字稿,则可以采用其他方法来完成。

包管理器选择

您可以选择npm或yarn作为特定项目的包装经理。在创建新项目时,CLI使用Yarn来安装依赖项。

但是,如果要使用npm软件包管理器,则可以通过在原始创建命令中附加命令“ –use-npm”来更改管理器。

例如,

npx create-react-app我的应用 –use-npm

文件创建的输出。使用上述方法在目录中创建项目文件后,将创建一个名为“我的应用程式’ 会出现。

此文件夹将包含应用台湾宾果28开奖的初始结构和所有传递依赖项。台湾宾果28开奖结构如下所示:

“我的应用

├──README.md

├──node_modules

├──package.json

├──.gitignore

├──公众

│├──favicon.ico

│├──index.html

│├──logo192.png

│├──logo512.png

│├──manifest.json

│└──robots.txt

└──src

├──App.css

├──App.js

├──App.test.js

├──index.css

├──index.js

├──logo.svg

└──serviceWorker.js」

项目的结构由主要的三个文件夹组成

公用文件夹: 公用文件夹中的大多数数据来自Web浏览器。您使用的浏览器可以访问该文件夹以获取必要的信息。它具有无需人工即可集成到react应用台湾宾果28开奖中的资产。

Src文件夹: 此文件夹包含应用台湾宾果28开奖的所有关键组件。这是完成大部分编码的地方。组件在src文件夹中创建。

根文件夹: 根文件夹在结构顶部提到。它们由构建React应用台湾宾果28开奖时使用的配置文件组成。 “ node_modules”和“ package.json”是此项目中的根文件夹。大多数配置文件存储在package.json文件夹中。

使用Create React App可以避免复杂的过程和编码。这样创建的文件也安排得很好,安装完成后,您可以从该应用台湾宾果28开奖开始。

使用此命令,您可以打开项目

cd my-app

剧本

某些内置命令可以在创建的项目中运行。为了执行create react中的任何脚本,您将必须遵循以下语法:

npm运行script_name

在语法上 npm运行 是关键字,其后是脚本名称。某些特定命令也可以执行,而无需从语法中提及“ run”部分。

npm开始

(要么)

纱线开始

此命令在开发模式下运行该应用台湾宾果28开奖,并在浏览器窗口中使用URL“ http:// localhost:3000”启动localhost。另外,此命令将初始化项目的webpack和Bable。

更重要的是,此命令将编译代码的所有数据,包括错误检查,Sass编译以及为编码部分构建Javascript包。

然后将此Javascript包加载到 上市 / index.html 文件,然后到浏览器。

在代码中所做的更改将在DOM中更新,并且该页面将立即重新加载。

在您使用的控制台中,您将能够看到构建错误和棉绒警告。

Npm测试

(要么)

纱线测试

此命令运行测试观察台湾宾果28开奖。 笑话是以交互方式启动的Create react app中的测试观察者。

执行代码后, 笑话 仅测试自上次测试运行以来已更改的文件。测试时此功能提高了优化和速度。

此命令是不需要运行部分即可执行的代码之一。您可以禁用此功能,并通过按强制Jest对每个文件运行测试 “一种” 在观看模式下。

npm运行构建

(要么)

毛线生成

这也是一个CLI命令,可运行在文件中创建的自定义脚本 package.json。构建文件夹中的应用用于构建应用。

它将应用台湾宾果28开奖安排为生产模式,并对其进行优化以实现最佳效用。构建应用台湾宾果28开奖中提到的文件是散列,并且您的react应用台湾宾果28开奖现在可以部署在分发平台上了。

结论

“创建React应用”是使用React最少的体验来构建React应用的最便捷方法。它具有非常少的设置过程和编码。通过使用模板和设计工具,开发人员可以获得开发React应用台湾宾果28开奖的广泛灵活性。此外,它还具有其他各种功能,例如热重载,基于组件的编程,代码可重用性。这些功能使Create React应用台湾宾果28开奖成为构建React应用台湾宾果28开奖的最简单工具之一。

 

Exit mobile version