mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-04-01 09:01:04 +08:00
e7a2d6168a
* Set baseUrl from jsconfig.json/tsconfig.json * Resolve the path for loading modules * Add tests for jsconfig.json * Add jsconfig.json * Update packages/react-scripts/scripts/start.js * Move baseUrl test to config folder * Remove alias test * Use chalk from react-dev-utils * Add lost absolute file for typescript baseUrl test * Update packages/react-scripts/config/modules.js * Update other references of useTypeScript to hasTsConfig * Fix casing of TypeScript * Keep respecting NODE_PATH for now to support multiple module paths. * Add test for NODE_PATH * Add fallback if NODE_PATH is not set. * Fix node path behavior tests * Remove debugging code from behavior test suite * Remove more debugging code * Show NODE_PATH deprecation warning during build Co-authored-by: Ian Sutherland <ian@iansutherland.ca> Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: Jack Zhao <jzhao@fb.com>
126 lines
4.0 KiB
Markdown
126 lines
4.0 KiB
Markdown
---
|
||
id: getting-started
|
||
title: Getting Started
|
||
---
|
||
|
||
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
|
||
|
||
```sh
|
||
npx create-react-app my-app
|
||
cd my-app
|
||
npm start
|
||
```
|
||
|
||
> 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` to ensure that `npx` always uses the latest version.
|
||
|
||
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
|
||
|
||
Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
|
||
|
||
When you’re ready to deploy to production, create a minified bundle with `npm run build`.
|
||
|
||
<p align='center'>
|
||
<img src='https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg' width='600' alt='npm start'>
|
||
</p>
|
||
|
||
### Get Started Immediately
|
||
|
||
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.
|
||
|
||
Just create a project, and you’re good to go.
|
||
|
||
## Creating an App
|
||
|
||
**You’ll need to have Node >= 8.10 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects.
|
||
|
||
To create a new app, you may choose one of the following methods:
|
||
|
||
### npx
|
||
|
||
```sh
|
||
npx create-react-app my-app
|
||
```
|
||
|
||
_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
|
||
|
||
### npm
|
||
|
||
```sh
|
||
npm init react-app my-app
|
||
```
|
||
|
||
_`npm init <initializer>` is available in npm 6+_
|
||
|
||
### Yarn
|
||
|
||
```sh
|
||
yarn create react-app my-app
|
||
```
|
||
|
||
_`yarn create` is available in Yarn 0.25+_
|
||
|
||
### Creating a TypeScript app
|
||
|
||
Follow our [Adding TypeScript](adding-typescript.md) documentation to create a TypeScript app.
|
||
|
||
## Output
|
||
|
||
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
|
||
│ └── manifest.json
|
||
└── src
|
||
├── App.css
|
||
├── App.js
|
||
├── App.test.js
|
||
├── index.css
|
||
├── index.js
|
||
├── logo.svg
|
||
└── serviceWorker.js
|
||
```
|
||
|
||
No configuration or complicated folder structures, just the files you need to build your app. Once the installation is done, you can open your project folder:
|
||
|
||
```sh
|
||
cd my-app
|
||
```
|
||
|
||
## Scripts
|
||
|
||
Inside the newly created project, you can run some built-in commands:
|
||
|
||
### `npm start` or `yarn start`
|
||
|
||
Runs the app in development mode. Open [http://localhost:3000](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.
|
||
|
||
<p align='center'>
|
||
<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors'>
|
||
</p>
|
||
|
||
### `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](https://facebook.github.io/create-react-app/docs/running-tests).
|
||
|
||
### `npm run build` or `yarn build`
|
||
|
||
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.
|