Browse Source
* Break out Installation into top-level doc section * Update navigation (prev/next, nav tree) - Move Installation section to top - Add next/prev to install pages * add links to other install options from try react page * fix markdown link * Clarify that Quick Start and Install are optional "next steps" * Add top-level CDN page This is useful for Codepen and other Unpkg-y setups * Add link to Tutorial from Try React * Update CRA link in tutorial * Make Try React subheader a proper sentence * Add "minimal" * Explain local dev setup is more work than Codepen etc * Fix typos * Add : between headings * add note that CRA is not lightweight * fix typo * Update add-react-to-a-new-app.md * Update add-react-to-a-new-app.md * Remove the Bower note * Update try-react.md * Tweak wording * Use direct linkmain
Alex
7 years ago
committed by
Dan Abramov
Dan Abramov
8 changed files with 146 additions and 96 deletions
@ -0,0 +1,47 @@ |
|||
--- |
|||
id: add-react-to-a-new-app |
|||
title: Add React to a New Application |
|||
permalink: docs/add-react-to-a-new-app.html |
|||
prev: try-react.html |
|||
next: add-react-to-an-existing-app.html |
|||
--- |
|||
|
|||
The easiest way to get started on a new React project is by using a starter kit. |
|||
|
|||
> Note: |
|||
> |
|||
> Check out the [Try React](/docs/try-react.html) page if you are looking for lightweight environments to experiment with React. |
|||
> The options on this page are designed to help bootstrap single-page applications with linting, testing, bundling, production optimizations, and more. |
|||
|
|||
## Create React App |
|||
|
|||
[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. You’ll need to have Node >= 6 on your machine. |
|||
|
|||
```bash |
|||
npm install -g create-react-app |
|||
create-react-app my-app |
|||
|
|||
cd my-app |
|||
npm start |
|||
``` |
|||
|
|||
If you have npm 5.2.0+ installed, you may use [npx](https://www.npmjs.com/package/npx) instead. |
|||
|
|||
```bash |
|||
npx create-react-app my-app |
|||
|
|||
cd my-app |
|||
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 build tools like [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/) under the hood, but works with zero configuration. |
|||
|
|||
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). |
|||
|
|||
## Other Starter Kits |
|||
|
|||
See the Community section for a list of [starter kits](/community/starter-kits.html). |
|||
|
|||
## Advanced |
|||
|
|||
If you prefer to configure a project manually, see [Installing React](/docs/add-react-to-an-existing-app.html#installing-react) in the next section. |
|||
@ -0,0 +1,37 @@ |
|||
--- |
|||
id: cdn-links |
|||
title: CDN Links |
|||
permalink: docs/cdn-links.html |
|||
prev: add-react-to-an-existing-app.html |
|||
next: hello-world.html |
|||
--- |
|||
|
|||
The UMD builds of React and ReactDOM are available over a CDN. |
|||
|
|||
```html |
|||
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> |
|||
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> |
|||
``` |
|||
|
|||
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at: |
|||
|
|||
```html |
|||
<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> |
|||
``` |
|||
|
|||
To load a specific version of `react` and `react-dom`, replace `16` with the version number. |
|||
|
|||
### Why the `crossorigin` Attribute? |
|||
|
|||
If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set: |
|||
|
|||
```html |
|||
<script crossorigin src="..."></script> |
|||
``` |
|||
|
|||
We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header: |
|||
|
|||
 |
|||
|
|||
This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later. |
|||
@ -0,0 +1,41 @@ |
|||
--- |
|||
id: try-react |
|||
title: Try React |
|||
permalink: docs/try-react.html |
|||
next: add-react-to-a-new-app.html |
|||
redirect_from: |
|||
- "docs/installation.html" |
|||
- "download.html" |
|||
- "downloads.html" |
|||
- "docs/tooling-integration.html" |
|||
- "docs/package-management.html" |
|||
- "docs/language-tooling.html" |
|||
- "docs/environments.html" |
|||
--- |
|||
|
|||
Try React online or set up your local development environment. |
|||
|
|||
## Online |
|||
|
|||
If you're just interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world) or [CodeSandbox](https://codesandbox.io/s/new). |
|||
|
|||
## Minimal HTML Template |
|||
|
|||
If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), 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. |
|||
|
|||
## Next Steps |
|||
|
|||
### Quick Start |
|||
|
|||
- Head over to the [Quick Start](/docs/hello-world.html) section for a step-by-step introduction to React concepts. |
|||
|
|||
- Try the [Tutorial](/tutorial/tutorial.html) for a hands-on practical example. |
|||
|
|||
### Complete Development Environment |
|||
|
|||
The lightweight solutions above are the best fit if you are new to React or just experimenting. |
|||
|
|||
When you are ready to build your first application with React, check out the install guides below. These setups are designed to get you up and running with a great developer experience and are ready for production. They include linting, testing, and optimizations built-in; however, they require more time and disk space to set up and install. |
|||
|
|||
- [Add React to a New App](/docs/add-react-to-a-new-app.html): Create a new app with a fully-featured starter kit. |
|||
- [Add React to an Existing App](/docs/add-react-to-a-new-app.html): Add React to a build system or a larger app. |
|||
Loading…
Reference in new issue