npm 包 new-react-app 使用教程

阅读时长 3 分钟读完

在前端开发中,创建一个 React 应用程序是一个常见的任务,为了使这个过程更加简单和高效,Facebook 团队开发并推出了一个命名为 create-react-app 的著名的工具。然而,如果你想使用不同的文件架构或预先设置的设置,你可能需要一个更加灵活的工具,这时候就可以考虑使用名为 new-react-app 的 npm 包来快速创建新的 React 应用程序。

安装 new-react-app

要开始使用 new-react-app,首先需要在你的计算机上全局安装它。打开终端(或命令行),输入以下命令即可安装:

这将会安装最新版本的 new-react-app 包到你的计算机中。

创建新的 React 应用程序

创建一个新的 React 应用程序的命令非常简单,只需打开终端并键入以下命令:

这将会在当前目录下创建一个名为 my-app 的新项目。new-react-app 它会生成一个使用 TypeScript 和 ESLint 的 React 应用程序,并根据常见的最佳实践对其进行了优化。你也可以使用以下选项来自定义新项目的设置:

  • -t--template:指定项目所使用的模板。new-react-app 提供了许多预先构建的模板来帮助简化配置,例如 redux、mobx、graphql 等。
  • -p--package-manager:指定你想使用的包管理器,可以是 npm 或 yarn。
  • -q--quick:创建一个快速启动的项目,它省略了某些配置和文件,适合快速原型开发。

启动 React 应用程序

创建 React 应用程序后,下一步就是启动它以查看它是否正常运行。切换到新创建的 my-app 目录,并使用以下命令启动应用程序:

这将会启动一个本地开发服务器,你可以在浏览器中打开 http://localhost:3000 来访问它。每当你对代码进行更改时,开发服务器都会自动重新加载更改版本。

构建生产版本

当你完成 React 应用程序的开发并准备将其发布到生产环境时,你需要构建一个生产版本。这个生产版本将包括优化过的代码,公共类库的打包、减小文件大小等等。如下所示:

构建完成后,你将会在 build 目录下看到生产版本的代码,它已准备好进行部署并提供给用户使用。

结论

使用 new-react-app 可以大大简化 React 应用程序的创建过程,并提供了许多有用的选项来优化和定制你的应用程序。通过遵循本教程中列出的步骤,你可以轻松地创建并启动新的 React 应用程序。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055eb381e8991b448dc58a

纠错
反馈