README.md 5.21 KB
Newer Older
Dan Abramov's avatar
Dan Abramov committed
1

2
# Create React App
Dan Abramov's avatar
Dan Abramov committed
3

Dan Abramov's avatar
Dan Abramov committed
4
Create React apps with no build configuration.
Dan Abramov's avatar
Dan Abramov committed
5

Dan Abramov's avatar
Dan Abramov committed
6
* **One Dependency:** Once you create an app, there is just one build dependency. Internally we use Webpack, Babel, ESLint, and other amazing projects, but we manage their versions and provide a curated experience on top of them.
Dan Abramov's avatar
Dan Abramov committed
7

Dan Abramov's avatar
Dan Abramov committed
8
* **Zero Configuration:** There are no configuration files or command line options. Let us take care of configuring the build both for development and production so you can focus on creating an app.
Dan Abramov's avatar
Dan Abramov committed
9

Dan Abramov's avatar
Dan Abramov committed
10
* **No Lock-In:** You can “graduate” to a custom setup at any time. Run a single command, and we will remove the tool and copy all the configuration and dependencies into your project, so you can pick up where we left off.
Dan Abramov's avatar
Dan Abramov committed
11

Dan Abramov's avatar
Dan Abramov committed
12
## Installation
Dan Abramov's avatar
Dan Abramov committed
13

Dan Abramov's avatar
Dan Abramov committed
14
Install it once globally:
Dan Abramov's avatar
Dan Abramov committed
15

Dan Abramov's avatar
Dan Abramov committed
16
17
18
```sh
npm install -g create-react-app
```
Dan Abramov's avatar
Dan Abramov committed
19

Dan Abramov's avatar
Dan Abramov committed
20
## Usage
Dan Abramov's avatar
Dan Abramov committed
21

Dan Abramov's avatar
Dan Abramov committed
22
To create a new app, run:
Dan Abramov's avatar
Dan Abramov committed
23

Dan Abramov's avatar
Dan Abramov committed
24
25
26
27
```sh
create-react-app my-app
cd my-app
```
Dan Abramov's avatar
Dan Abramov committed
28

Dan Abramov's avatar
Dan Abramov committed
29
This will create a directory called `my-app` inside the current folder.  
Dan Abramov's avatar
Dan Abramov committed
30

Dan Abramov's avatar
Dan Abramov committed
31
32
Inside that directory, we will generate the initial project structure and install the transient dependencies.  
Once it’s finished, you can run some commands inside the project folder!
Dan Abramov's avatar
Dan Abramov committed
33

Dan Abramov's avatar
Dan Abramov committed
34
### `npm start`
Dan Abramov's avatar
Dan Abramov committed
35

Dan Abramov's avatar
Dan Abramov committed
36
37
Runs the app in the development mode.  
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
Dan Abramov's avatar
Dan Abramov committed
38

Dan Abramov's avatar
Dan Abramov committed
39
40
The page will reload if you make edits.  
You will also see any lint errors in the console.
Dan Abramov's avatar
Dan Abramov committed
41

Dan Abramov's avatar
Dan Abramov committed
42
### `npm run build`
Dan Abramov's avatar
Dan Abramov committed
43

Dan Abramov's avatar
Dan Abramov committed
44
45
Builds the app for production to the `build` folder.  
It correctly bundles React in production mode and optimizes the build for the best performance.
Dan Abramov's avatar
Dan Abramov committed
46

Dan Abramov's avatar
Dan Abramov committed
47
48
The build is minified and the filenames include the hashes.  
Your app is ready to be deployed!
49

Dan Abramov's avatar
Dan Abramov committed
50
### `npm run graduate`
51

Dan Abramov's avatar
Dan Abramov committed
52
**Note: this is a one-way operation. Once you “graduate”, you can’t go back!**
53

Dan Abramov's avatar
Dan Abramov committed
54
If you aren’t satisfied with the defaults we provide, and want to change or extend your build configuration, you can graduate at any time. This command will remove the single build dependency we provided from your project.
55

Dan Abramov's avatar
Dan Abramov committed
56
Instead, it will copy all the configuration files and the dependencies we have been using under the hood into your project so you have full control over them. All of the commands except `graduate` will still work, but we will point them to the copied scripts so you can tweak them. At this point you’re on your own.
57

Dan Abramov's avatar
Dan Abramov committed
58
You don’t have to ever graduate. We intend to keep the curated feature set suitable for small and middle deployments, and you shouldn’t feel obliged to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
59

Dan Abramov's avatar
Dan Abramov committed
60
## Limitations
61

Dan Abramov's avatar
Dan Abramov committed
62
We don’t currently intend to support advanced features such as server rendering, experimental Babel plugins, custom ESLint configuration, etc. Our goal is to provide a tool that bootstraps a minimal production-ready React project with a great developer experience and sane defaults. If you want an advanced feature, you can still use this tool, and later run `npm run graduate` to customize the experience (but then there’s no going back!)
63

Dan Abramov's avatar
Dan Abramov committed
64
## What’s Inside?
65

Dan Abramov's avatar
Dan Abramov committed
66
67
The tools used by Create React App are subject to change.  
Currently we use:
68

Dan Abramov's avatar
Dan Abramov committed
69
70
71
72
73
74
75
76
77
* [webpack](https://webpack.github.io/)
* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
* [Babel](http://babeljs.io/) with [preset-es2015](https://www.npmjs.com/package/babel-preset-es2015), [preset-es2016](https://www.npmjs.com/package/babel-preset-es2016) and [transform-rest-spread](https://babeljs.io/docs/plugins/transform-object-rest-spread/)
* [Autoprefixer](https://github.com/postcss/autoprefixer)
* [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)
* [style-loader](https://github.com/webpack/style-loader)
* [ESLint](http://eslint.org/)
* [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)
* and some more.
78

Dan Abramov's avatar
Dan Abramov committed
79
We hide all of them behind our npm package so you don’t need to worry about upgrading them or solving conflicts.
80

Dan Abramov's avatar
Dan Abramov committed
81
## You Don’t Have to Use This
82

Dan Abramov's avatar
Dan Abramov committed
83
84
85
86
87
88
89
90
91
92
93
This is not the “one true way” to create React apps. You don’t need to port your project to use this if you’re happy with your setup. There are also many things we won’t provide (see “Limitations” above).

Historically we’ve made it easy to gradually adopt React, but many people create new single-page React apps every day, and we’ve heard [loud and clear](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack.

This project is our attempt to figure out a good way to start developing React apps. We don’t claim it’s the best possible stack, and there are intentional limitations, but we think you can ship a production app with it, and we’ll make it even better over time.

We also want you to feel in control so you can “graduate” from this tool at any time (see instructions above!).

## Contibuting

Clone the repo and run `npm install`.
94

Dan Abramov's avatar
Dan Abramov committed
95
96
Once it is done, you can modify any file locally and run `npm start` or `npm run build` just like in a generated project.  
If you want to try out the end-to-end flow with the global CLI, you can do this too:
97
98
99
100
101

```
npm run create-react-app my-app
cd my-app
```
Dan Abramov's avatar
Dan Abramov committed
102

Dan Abramov's avatar
Dan Abramov committed
103
and then run `npm start` or `npm run build`.