gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: update React installation guide to make it shorter (#26707)

Browse Source 
* fix: update installation guide to make it shorter

* Remove duplicate info, link sources
This commit is contained in:
Nathan Hannig
2019-02-17 15:43:43 -08:00
committed by Manish Giri
parent d6fa57cd2f
commit 789746aaca
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
guide/english/react/installation/index.md
View File

@ -1,41 +1,45 @@
---
title: Installation
---
## Installing React
### Creating a new React project
You could just embed the React library in your webpage like so<sup>2</sup>:
There are several different methods to get started with using React<sup>1</sup>. It will depend on the web application size, complexity, and environment to determine the exact approach that is best for you.
For a quick and easy method of adding React to your website you could just embed the React library in your website using a `<script>` tag.
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
```
Smart programmers want to take the more practical and productive way: [Create React App](https://github.com/facebookincubator/create-react-app)
However, with the above approach, you may feel limited in how far you can take React. This is where the use of toolchain is the preferred approach, with the more practical and productive [Create React App](https://github.com/facebookincubator/create-react-app):
```bash
npx create-react-app my-app
cd my-app
npm start
```
Another option is using the package `npx` which doesn't require you to install the package `create-react-app` before using it. So you can use it without installing it which is helpful for the future not to have too many packages installed on your machine
```
This will set up your development environment so that you can use the latest JavaScript features, provide a great developer experience, and optimize your application for production.
Another option is using the package `npx` which doesn't require you to install the package `create-react-app` before using it. So you can use it without installing it which is helpful for the future not to have too many packages installed on your machine.
```bash
npm install -g npx
npx create-react-app my-app
```
This will set up your development environment so that you can use the latest JavaScript features, provide a nice developer experience, and optimize your app for production.
- `npm start` will start up a development server which allows live reloading.
`npm start` will start up a development server which allows live reloading<sup>3</sup>.
- After you finish your project and are ready to deploy your application to production, you can just use `npm run build` to create an optimized build of your app in the `build` folder.
After you finish your project and are ready to deploy your App to production, you can just use
`npm run build`
to create an optimized build of your app in the `build`folder.
#### Useful links
[Create React App repository](https://github.com/facebookincubator/create-react-app#create-react-app-)
You can find more toolchains which support server-rendered website or static content-oriented website at [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html).
#### Sources
[1. The React tutorial on installing](https://reactjs.org/docs/installation.html)
[2. Link to the React minimal JavaScript library on cdnjs.org](https://cdnjs.com/libraries/react)
[3. npm start command](https://docs.npmjs.com/cli/start)
#### More Information
- [Getting Started - React Official Site](https://reactjs.org/docs/getting-started.html)
- [Create React App repository](https://github.com/facebookincubator/create-react-app#create-react-app-)
- [npm start command](https://docs.npmjs.com/cli/start)