新手入门 | 您所在的位置:网站首页 › 创建脚手架如何不用yarn › 新手入门 |
新手入门 Create React App 是官方支持的创建单页 React 应用的方法。它提供了一个没有配置的现代构建设置。 ¥Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. 快速开始¥Quick Start npx create-react-app my-appcd my-appnpm start如果你之前通过 npm install -g create-react-app 全局安装了 create-react-app,我们建议你使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 卸载软件包,以确保 npx 始终使用最新版本。 ¥If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version. (npx 附带 npm 5.2+ 及更高版本,请参阅 旧 npm 版本的说明) ¥(npx comes with npm 5.2+ and higher, see instructions for older npm versions) 然后打开 http://localhost:3000/ 以查看你的应用。 ¥Then open http://localhost:3000/ to see your app. 当你准备好部署到生产环境时,使用 npm run build 创建一个压缩包。 ¥When you’re ready to deploy to production, create a minified bundle with npm run build. 立即开始¥Get Started Immediately 你不需要安装或配置 webpack 或 Babel 等工具。它们是预先配置和隐藏的,因此你可以专注于代码。 ¥You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code. 创建一个项目,一切顺利。 ¥Create a project, and you’re good to go. 创建应用¥Creating an App 你的本地开发计算机上需要有 Node >= 14(但服务器上不需要)。你可以使用 nvm (macOS/Linux) 或 nvm-windows 在不同项目之间切换 Node 版本。 ¥You’ll need to have Node >= 14 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects. 要创建新的应用,你可以选择以下方法之一: ¥To create a new app, you may choose one of the following methods: npxnpx create-react-app@latest my-app(npx 附带 npm 5.2+ 及更高版本,请参阅 旧 npm 版本的说明) ¥(npx comes with npm 5.2+ and higher, see instructions for older npm versions) npmnpm init react-app my-appnpm init 在 npm 6+ 中可用 ¥npm init is available in npm 6+ Yarnyarn create react-app my-appyarn create 适用于 Yarn 0.25+ ¥yarn create is available in Yarn 0.25+ 选择模板¥Selecting a template 你现在可以选择通过将 --template [template-name] 附加到创建命令来从模板启动新应用。 ¥You can now optionally start a new app from a template by appending --template [template-name] to the creation command. 如果你不选择模板,我们将使用我们的基本模板创建你的项目。 ¥If you don't select a template, we'll create your project with our base template. 模板始终以 cra-template-[template-name] 格式命名,但是你只需将 [template-name] 提供给创建命令即可。 ¥Templates are always named in the format cra-template-[template-name], however you only need to provide the [template-name] to the creation command. npx create-react-app my-app --template [template-name]你可以通过在 npm 上搜索 "cra-模板-*" 来找到可用模板的列表。 ¥You can find a list of available templates by searching for "cra-template-*" on npm. 我们的 自定义模板 文档描述了如何构建你自己的模板。 ¥Our Custom Templates documentation describes how you can build your own template. 创建 TypeScript 应用¥Creating a TypeScript app 你可以使用模板启动一个新的 TypeScript 应用。要使用我们提供的 TypeScript 模板,请将 --template typescript 附加到创建命令。 ¥You can start a new TypeScript app using templates. To use our provided TypeScript template, append --template typescript to the creation command. npx create-react-app my-app --template typescript如果你已经有一个项目并想添加 TypeScript,请参阅我们的 添加 TypeScript 文档。 ¥If you already have a project and would like to add TypeScript, see our Adding TypeScript documentation. 选择包管理器¥Selecting a package manager 当你创建一个新的应用时,CLI 将使用 npm 或 Yarn 来安装依赖,具体取决于你使用哪种工具来运行 create-react-app。例如: ¥When you create a new app, the CLI will use npm or Yarn to install dependencies, depending on which tool you use to run create-react-app. For example: # Run this to use npmnpx create-react-app my-app# Or run this to use yarnyarn create react-app my-app输出¥Output 运行这些命令中的任何一个都会在当前文件夹中创建一个名为 my-app 的目录。在该目录中,它将生成初始项目结构并安装传递依赖: ¥Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies: my-app├── README.md├── node_modules├── package.json├── .gitignore├── public│ ├── 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 └── setupTests.js没有配置或复杂的文件夹结构,只有构建应用所需的文件。安装完成后,你可以打开项目文件夹: ¥No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder: cd my-app脚本¥Scripts 在新创建的项目中,你可以运行一些内置命令: ¥Inside the newly created project, you can run some built-in commands: npm start 或 yarn start¥npm start or yarn start 在开发模式下运行应用。在浏览器中打开 http://localhost:3000 进行查看。 ¥Runs the app in development mode. Open http://localhost:3000 to view it in the browser. 如果你更改代码,页面将自动重新加载。你将在控制台中看到构建错误和代码检查警告。 ¥The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console. npm test 或 yarn test¥npm test or yarn test 以交互模式运行测试监视器。默认情况下,运行与自上次提交以来更改的文件相关的测试。 ¥Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. 阅读更多关于测试的信息。 ¥Read more about testing. npm run build 或 yarn build¥npm run build or yarn build 将用于生产的应用构建到 build 文件夹。它在生产模式下正确地打包了 React,并优化了构建以获得最佳性能。 ¥Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. 构建被压缩并且文件名包含哈希。 ¥The build is minified and the filenames include the hashes. 你的应用已准备好部署。 ¥Your app is ready to be deployed. |
CopyRight 2018-2019 实验室设备网 版权所有 |