Skip to content

Update installation.md (make the steps more clear) #9277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
filiphosko wants to merge 1 commit into from
Closed

Update installation.md (make the steps more clear) #9277

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions docs/docs/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ If you're just interested in playing around with React, you can use CodePen. Try

If you prefer to use your own text editor, you can also <a href="/react/downloads/single-file-example.html" download="hello.html">download this HTML file</a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.

## Creating a Single Page Application
Currently there are two popular ways to get started with React:

## 1. Using Create React App
Copy link
Contributor

@aweary aweary Apr 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like numbering it makes it seem like these are two steps to Creating a Single Page Application, which makes it less clear what these instructions are saying 🤔

Copy link
Author

@filiphosko filiphosko Apr 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aweary You are right, that's why I removed the line that says Creating a Single Page Application and instead added the line Currently there are two popular ways to get started with React:. Of course numbering isn't always the best solution, it was just my suggestion for a quick 'fix' ;)


[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Expand All @@ -31,9 +33,11 @@ cd hello-world
npm start
```

Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses [webpack](https://webpack.js.org/), [Babel](http://babeljs.io/) and [ESLint](http://eslint.org/) under the hood, but configures them for you.
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses [webpack](https://webpack.js.org/), [Babel](http://babeljs.io/) and [ESLint](http://eslint.org/) under the hood and configures them for you.

When you’re ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder.

## Adding React to an Existing Application
## 2. Adding React to an Existing Application

You don't need to rewrite your app to start using React.

Expand Down Expand Up @@ -103,10 +107,6 @@ To create an optimized production build with Brunch, just add the `-p` flag to t

Run Browserify with `NODE_ENV` environment variable set to `production` and use [UglifyJS](https://github.com/mishoo/UglifyJS) as the last build step so that development-only code gets stripped out.

#### Create React App

If you use [Create React App](https://github.com/facebookincubator/create-react-app), `npm run build` will create an optimized build of your app in the `build` folder.

#### Rollup

Use [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace) plugin together with [rollup-plugin-commonjs](https://github.com/rollup/rollup-plugin-commonjs) (in that order) to remove development-only code. [See this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0) for a complete setup example.
Expand Down