README.md 2.7 KB
Newer Older
1
# Create React App
Dan Abramov's avatar
Dan Abramov committed
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

A new blessed “getting started” experience for building SPAs in React that we can actually ship.

## Goal

Make it easy to get started with React.

## Why This Won't Fail

* We hide a small curated set of tools behind a CLI with zero configuration. The scope is very limited: we intentionally offer the minimal tools we think are useful, and we don't allow any addons or feature creep.
* We let you exit the "getting started" experience at any time. A single CLI command removes the dependency on React CLI and replaces it with real Webpack/ESLint/Babel configs and commands. You are on your own now.
* We promote the hell out of it on in the docs. This is built by the team so people trust it.

## Philosophy

### Zero Configuration

This is a hard constraint. We are committed to having zero configuration in the project.

21
If you use `create-react-app`, you should have `src/index.js`, your bundle will be compiled to `build/index.html`, and it will run at http://localhost:3000 in development. You can’t change this.
Dan Abramov's avatar
Dan Abramov committed
22
23
24
25
26

It will have Babel, ESLint, Autprefixr and some other stuff we think it useful for getting started, but you won’t be exposed to it, and won’t be able to configure it. We curate the setup completely.

### Exit Strategy

27
You can say goodbye to `create-react-app` at any time. Type `npm run export-scripts`, and it will create the configs and replace the generated `scripts` in `package.json` with the equivalent "real thing" (e.g. `webpack-dev-server` and `webpack` calls). You're on your own now.
Dan Abramov's avatar
Dan Abramov committed
28
29
30

This is why "zero configuration" can work as a constraint. We can punt on many real-world features (code splitting, Google Analytics, custom Babel plugins) because we let you leave the "getting started" experience any time.

31
This makes Create React App a feasible way to get started with a "real" React project without learning the tools. Once you export, you can't go back.
Dan Abramov's avatar
Dan Abramov committed
32
33
34

### One Dependency

35
It works like `react-native-cli`. There is just one thing in your `devDependencies`, and it hides Babel, ESLint, and all the other stuff. But as I wrote above, you can `npm run exports-scripts` at any time.
Dan Abramov's avatar
Dan Abramov committed
36

37
## How to use
Dan Abramov's avatar
Dan Abramov committed
38

39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
Install once:

```bash
npm install -g create-react-app
```

When creating a new app:

```
create-react-app my-app
cd my-app
npm start
```

Done!

If you want to build it for production

```
npm run build
```

and if you want to tweak it

```
npm run exports-scripts # Beware, this is a one-way operation, can't go back!
```

## How to develop it

You first need to

```
npm install
```

Once it is done, you can modify any file locally and do

```
npm start
npm run build
```

If you want to try out the end to end flow with the global cli

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