lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Rewrite Installation and related docs (#996) 

* Rewrite "adding React to existing app"

Fixes #988

* Some copy

* typo

* Update babel instructions

* Update umd link

* Add prod minification section

* Show "button" example in several targets

* wip

* More

* More

* tweak

* yas

* Multi root tip

* moaar

* alot

* Tweak links

* Explain better

* better lead

* tweaks

* tweaks

* wording

* More reassuring tone

* Grammar

* wording

* feedback from readers

* Use id, not class

* More nits

* Re-add a useful section
main
Dan Abramov 7 years ago
committed by GitHub
parent
c300c144f9
commit
623523131e
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 400 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      content/docs/add-react-to-a-new-app.md
  2. 181
      content/docs/add-react-to-a-website.md
  3. 96
      content/docs/add-react-to-an-existing-app.md
  4. 4
      content/docs/cdn-links.md
  5. 93
      content/docs/create-a-new-react-app.md
  6. 105
      content/docs/getting-started.md
  7. 6
      content/docs/hello-world.md
  8. 12
      content/docs/nav.yml
  9. 41
      content/docs/try-react.md
  10. 12
      content/tutorial/tutorial.md
  11. 2
      src/components/LayoutHeader/Header.js
  12. 4
      src/pages/index.js

54
content/docs/add-react-to-a-new-app.md
View File

@ -1,54 +0,0 @@
---
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:
>
> This page describes setting up a single-page application with everything you need for a comfortable development workflow, including linting, testing, production optimizations, and more. Full-featured tools like these require some time and disk space to install.
>
>If you are looking for a lightweight environment to experiment with React, check out the [Try React](/docs/try-react.html) page instead. **A [single HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) is enough to get you started!**
>
> Finally, if you're not building a single-page application, you can either [add React to your existing build pipeline](/docs/add-react-to-an-existing-app.html) or [use it from CDN](/docs/cdn-links.html) and [without a build step](/docs/react-without-jsx.html).
## 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
We have created [a curated list of third-party starter kits that we officially recommend](/community/starter-kits.html).
They slightly differ in their focus but are all production-ready, well-maintained, and don't require configuration to get started.
You can also check out a list of [other kits](/community/starter-kits.html#other-starter-kits) contributed by the community.
## 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.

181
content/docs/add-react-to-a-website.md
View File

@ -0,0 +1,181 @@
---
id: add-react-to-a-website
title: Add React to a Website
permalink: docs/add-react-to-a-website.html
redirect_from: "docs/add-react-to-an-existing-app.html"
prev: getting-started.html
next: create-a-new-react-app.html
---
Use as little or as much React as you need.
React is designed for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that.
The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
---
- [Add React in One Minute](#add-react-in-one-minute)
- [Optional: Try React with JSX](#optional-try-react-with-jsx)
## Add React in One Minute
In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.
There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.**
Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
### Step 1: Add a DOM Container to the HTML
First, open the HTML page you want to edit. Add an empty `<div>` tag to mark the spot where you want to display something with React. For example:
```html{3}
<!-- ... existing HTML ... -->
<div id="like_button_container"></div>
<!-- ... existing HTML ... -->
```
We gave this `<div>` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.
>Tip
>
>You can place a "container" `<div>` like this **anywhere** inside the `<body>` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers.
### Step 2: Add the Script Tags
Next, add three `<script>` tags to the HTML page right before the closing `</body>` tag:
```html{5,6,9}
<!-- ... other HTML ... -->
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
```
The first two tags load React. The third one will load your component code.
### Step 3: Create a React Component
Create a file called `like_button.js` next to your HTML page.
Open this [this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js) and paste it into the file you created.
>Tip
>
>This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [main concepts guide](/docs/hello-world.html) and a [hands-on tutorial](/tutorial/tutorial.html). For now, let's just get it showing on the screen!
After the starter code, add two lines to the bottom of `like_button.js`:
```js{3,4}
// ... the starter code you pasted ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
```
These two lines of code find the `<div>` we added to our HTML in the first step, and then display our "Like" button React component inside of it.
### That's It!
There is no step four. **You have just added the first React component to your website.**
Check out the next sections for more tips on integrating React.
**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)**
**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)**
### Tip: Reuse a Component
Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it:
[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda)
[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip)
>Note
>
>This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead.
### Tip: Minify JavaScript for Production
Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users.
If you already minify the application scripts, **your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`:**
```js
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
```
If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
## Optional: Try React with JSX
In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display:
```js
const e = React.createElement;
// Display a "Like" <button>
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
```
However, React also offers an option to use [JSX](/docs/introducing-jsx.html) instead:
```js
// Display a "Like" <button>
return (
<button onClick={() => this.setState({ liked: true })}>
Like
</button>
);
```
These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries.
You can play with JSX using [this online converter](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
### Add JSX to a Project
If you want to add JSX to your project, follow these three steps:
1. [Install Node.js](https://nodejs.org/)
2. **Don't miss this step:** Run `npm init -y` in your project folder
3. Run `npm install babel-cli@6 babel-preset-react-app@3`
You can now use JSX!
### Compile JSX with One Command
Create create a folder called `src` and run this terminal command:
```
npx babel --watch src --out-dir . --presets react-app/prod
```
>Note
>
>`npx` is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
>
>If you see an error message saying "You have mistakingly installed the `babel` package", you might have missed [the previous step](#add-jsx-to-a-project). Perform it in the same folder, and then try again.
This command starts an automated watcher for JSX. For example, if you create `src/like_button.js` with this [JSX starter code](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js), Babel will create a compiled `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the JSX file, the transform will re-run automatically.
As a bonus, this will also let you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](http://babeljs.io/docs/en/babel-cli/).
If you notice that you're getting comfortable with build tools and want them to do more for you, [the next section](/docs/create-a-new-react-app.html) describes some of the most popular and approachable toolchains. If not -- those script tags will do just fine!

96
content/docs/add-react-to-an-existing-app.md
View File

@ -1,96 +0,0 @@
---
id: add-react-to-an-existing-app
title: Add React to an Existing Application
permalink: docs/add-react-to-an-existing-app.html
prev: add-react-to-a-new-app.html
next: cdn-links.html
---
You don't need to rewrite your app to start using React.
We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.
While React [can be used](/docs/react-without-es6.html) without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:
* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
* A **bundler**, such as [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
### Installing React
>**Note:**
>
>Once installed, we strongly recommend setting up a [production build process](/docs/optimizing-performance.html#use-the-production-build) to ensure you're using the fast version of React in production.
We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
To install React with Yarn, run:
```bash
yarn init
yarn add react react-dom
```
To install React with npm, run:
```bash
npm init
npm install --save react react-dom
```
Both Yarn and npm download packages from the [npm registry](http://npmjs.com/).
> Note:
>
> To prevent potential incompatibilities, all react packages should use the same version. (This includes `react`, `react-dom`, `react-test-renderer`, etc.)
### Enabling ES6 and JSX
We recommend using React with [Babel](http://babeljs.io/) to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React.
The [Babel setup instructions](https://babeljs.io/docs/setup/) explain how to configure Babel in many different build environments. Make sure you install [`babel-preset-react`](http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli-) and [`babel-preset-env`](http://babeljs.io/docs/plugins/preset-env/) and enable them in your [`.babelrc` configuration](http://babeljs.io/docs/usage/babelrc/), and you're good to go.
### Hello World with ES6 and JSX
We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/), so you can write modular code and bundle it together into small packages to optimize load time.
The smallest React example looks like this:
```js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
```
This code renders into a DOM element with the id of `root`, so you need `<div id="root"></div>` somewhere in your HTML file.
Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library.
[Learn more about integrating React with existing code.](/docs/integrating-with-other-libraries.html#integrating-with-other-view-libraries)
### A Complete Example
You can find step-by-step instructions detailing a basic implementation from scratch, including Babel and Webpack setup [here](https://medium.com/@JedaiSaboteur/creating-a-react-app-from-scratch-f3c693b84658).
### Development and Production Versions
By default, React includes many helpful warnings. These warnings are very useful in development.
**However, they make the development version of React larger and slower so you should use the production version when you deploy the app.**
Learn [how to tell if your website is serving the right version of React](/docs/optimizing-performance.html#use-the-production-build), and how to configure the production build process most efficiently:
* [Creating a Production Build with Create React App](/docs/optimizing-performance.html#create-react-app)
* [Creating a Production Build with Single-File Builds](/docs/optimizing-performance.html#single-file-builds)
* [Creating a Production Build with Brunch](/docs/optimizing-performance.html#brunch)
* [Creating a Production Build with Browserify](/docs/optimizing-performance.html#browserify)
* [Creating a Production Build with Rollup](/docs/optimizing-performance.html#rollup)
* [Creating a Production Build with webpack](/docs/optimizing-performance.html#webpack)
### Using a CDN
If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `umd` folders. See the [CDN](/docs/cdn-links.html) page for links.

4
content/docs/cdn-links.md
View File

@ -2,11 +2,11 @@
id: cdn-links
title: CDN Links
permalink: docs/cdn-links.html
prev: add-react-to-an-existing-app.html
prev: create-a-new-react-app.html
next: hello-world.html
---
The UMD builds of React and ReactDOM are available over a CDN.
Both React and ReactDOM are available over a CDN.
```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

93
content/docs/create-a-new-react-app.md
View File

@ -0,0 +1,93 @@
---
id: create-a-new-react-app
title: Create a New React App
permalink: docs/create-a-new-react-app.html
redirect_from: "docs/add-react-to-a-new-app.html"
prev: add-react-to-a-website.html
next: cdn-links.html
---
Use an integrated toolchain for the best user and developer experience.
This page describes a few popular React toolchains which help with tasks like:
* Scaling to many files and components.
* Using third-party libraries from npm.
* Detecting common mistakes early.
* Live-editing CSS and JS in development.
* Optimizing the output for production.
The toolchains recommended on this page **don't require configuration to get started**.
## HTML with `<script>` Tags
If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
This is also the best way to integrate React into an existing website. You can always add a larger toolchain if you find it helpful!
## Recommended Toolchains
The React team primarily recommends these solutions:
- [Create React App](#create-react-app) (best for [single-page](/docs/glossary.html#single-page-application) apps)
- [Next.js](#nextjs) (best for Node.js apps)
- [Gatsby](#gatsby) (best for static websites)
- [More Flexible Toolchains](#more-flexible-toolchains)
### Create React App
**[Create React App](http://github.com/facebookincubator/create-react-app)** is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
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 and npm >= 5.2 on your machine. To create a project, run:
```bash
npx create-react-app my-app
cd my-app
npm start
```
>Note
>
>`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
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. Under the hood, it uses [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
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).
### Next.js
**[Next.js](https://nextjs.org/)** is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment.
Learn Next.js from [its official guide](https://nextjs.org/learn/).
### Gatsby
**[Gatsby](https://www.gatsbyjs.org/)** is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
### More Flexible Toolchains
The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:
- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).
- **[nwb](https://github.com/insin/nwb)** is particularly great for [publishing React components for npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb). It [can be used](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for creating React apps, too.
- **[Parcel](https://parceljs.org/)** is a very fast JavaScript bundler that requires no configuration.
- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
## Creating a Toolchain from Scratch
A JavaScript build toolchain typically consists of:
* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).

105
content/docs/getting-started.md
View File

@ -0,0 +1,105 @@
---
id: getting-started
title: Getting Started
permalink: docs/getting-started.html
next: add-react-to-a-website.html
redirect_from:
- "docs/"
- "docs/index.html"
- "docs/getting-started-ko-KR.html"
- "docs/getting-started-zh-CN.html"
- "docs/installation.html"
- "download.html"
- "downloads.html"
- "docs/try-react.html"
- "docs/tooling-integration.html"
- "docs/package-management.html"
- "docs/language-tooling.html"
- "docs/environments.html"
---
This page is an overview of the React documentation and related resources.
**React** is a JavaScript library for building user interfaces. Learn what React is all about on [our homepage](/) or [in the tutorial](/tutorial/tutorial.html).
---
- [Try React](#try-react)
- [Learn React](#learn-react)
- [Staying Informed](#staying-informed)
- [Versioned Documentation](#versioned-documentation)
- [Something Missing?](#something-missing)
## Try React
React is designed for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.
### Online Playgrounds
If you're 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). 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 we'd only recommend using this for simple demos.
### Add React to a Website
You can [add React to an HTML page in one minute](/docs/add-react-to-a-website.html). You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
### Create a New React App
When starting a React project, [a simple HTML page with script tags](/docs/add-react-to-a-website.html) might still be the best option.
As your application grows, you might want to consider a more integrated setup. There are [several recommended solutions](/docs/create-a-new-react-app.html) for creating JavaScript applications with React. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem.
## Learn React
People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a more practical approach, we hope you'll find something useful in this section.
Like any unfamiliar approach, React does have a learning curve. With practice and some patience, you will get the hang of it.
### JavaScript Resources
The React documentation assumes some familiarity with programming in the JavaScript language. You don't have to be an expert, but it's harder to learn both React and JavaScript at the same time. We recommend going through [this JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level. It will likely take you between 30 minutes and an hour but will help you feel more confident learning React.
Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](http://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
### Practical Tutorial
If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). In this tutorial, we build a tic-tac-toe game in React. You might be tempted to skip it because you're not building games -- but give it a chance. The techniques you'll learn in the tutorial are fundamental to building *any* React apps, and mastering it will give you a much deeper understanding.
### Main Concepts
For an introduction to the most important React concepts, check out [the step-by-step guide to main concepts](/docs/hello-world.html). Every next chapter in it builds on the knowledge introduced in the previous chapters so you won't miss anything as you go along.
### Thinking in React
Many React users credit reading [Thinking in React](/docs/thinking-in-react.html) as the moment React finally "clicked" for them. It's probably the oldest React walkthrough that was ever written but it's still just as relevant.
### Recommended Courses
Sometimes people find third-party books and video courses more helpful than the official documentation. We maintain [a list of commonly recommended resources](/community/courses.html), some of which are free.
### Advanced Concepts
Once you're comfortable with the [main concepts](#main-concepts) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html).
### API Reference
This documentation section is useful when you want to learn more details about a particular React API. For example, [`React.Component` API reference](/docs/react-component.html) can provide you with details on how `setState()` works, and what different lifecycle hooks are useful for.
### Glossary and FAQ
[Glossary](/docs/glossary.html) contains an overview of the most common terms you'll see in the React documentation. There is also a FAQ section dedicated to short questions and answers about common topics, including [making AJAX requests](/docs/faq-ajax.html), [component state](/docs/faq-state.html), and [file structure](/docs/faq-structure.html).
## Staying Informed
The [React blog](/blog/) is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted there first.
You can also follow the [@reactjs account](https://twitter.com/reactjs) on Twitter, but you won't miss anything essential if you only read the blog.
Not every React release deserves its own blog post, but you can find a detailed changelog for every release [in the `CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react) page.
## Versioned Documentation
This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation [on a separate page](/versions). Note that documentation for past versions is snapshotted at the time of the release, and isn't being continuously updated.
## Something Missing?
If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation repository](https://github.com/reactjs/reactjs.org/issues/new) with your suggestions for improvement, or tweet at the [@reactjs account](https://twitter.com/reactjs). We love hearing from you!

6
content/docs/hello-world.md
View File

@ -4,12 +4,6 @@ title: Hello World
permalink: docs/hello-world.html
prev: cdn-links.html
next: introducing-jsx.html
redirect_from:
- "docs/"
- "docs/index.html"
- "docs/getting-started.html"
- "docs/getting-started-ko-KR.html"
- "docs/getting-started-zh-CN.html"
---
The smallest React example looks like this:

12
content/docs/nav.yml
View File

@ -1,11 +1,11 @@
- title: Installation
items:
- id: try-react
title: Try React
- id: add-react-to-a-new-app
title: Add React to a New App
- id: add-react-to-an-existing-app
title: Add React to an Existing App
- id: getting-started
title: Getting Started
- id: add-react-to-a-website
title: Add React to a Website
- id: create-a-new-react-app
title: Create a New React App
- id: cdn-links
title: CDN Links
- title: Main Concepts

41
content/docs/try-react.md
View File

@ -1,41 +0,0 @@
---
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
### Main Concepts
- Head over to the [Main Concepts](/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-an-existing-app.html): Add React to a build system or a larger app.

12
content/tutorial/tutorial.md
View File

@ -59,12 +59,18 @@ You can now skip the second setup option, and go to the [Overview](#overview) se
### Setup Option 2: Local Development Environment
**This is completely optional and not required for this tutorial!**
This is completely optional and not required for this tutorial!
<br>
<details>
<summary><b>Optional: Instructions for following along locally using your preferred text editor</b></summary>
This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow:
1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed.
2. Follow the [installation instructions](/docs/add-react-to-a-new-app.html) to create a new project.
2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project.
```bash
npm install -g create-react-app
@ -94,6 +100,8 @@ Now if you run `npm start` in the project folder and open `http://localhost:3000
We recommend following [these instructions](http://babeljs.io/docs/editors) to configure syntax highlighting for your editor.
</details>
### Help, I'm Stuck!
If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](/community/support.html#reactiflux-chat) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out.

2
src/components/LayoutHeader/Header.js
View File

@ -116,7 +116,7 @@ const Header = ({location}: {location: Location}) => (
<HeaderLink
isActive={location.pathname.includes('/docs/')}
title="Docs"
to="/docs/hello-world.html"
to="/docs/getting-started.html"
/>
<HeaderLink
isActive={location.pathname.includes('/tutorial/')}

4
src/pages/index.js
View File

@ -168,7 +168,7 @@ class Home extends Component {
},
}}>
<CtaItem>
<ButtonLink to="/docs/hello-world.html" type="primary">
<ButtonLink to="/docs/getting-started.html" type="primary">
Get Started
</ButtonLink>
</CtaItem>
@ -311,7 +311,7 @@ class Home extends Component {
<Container>
<Flex valign="center">
<CtaItem>
<ButtonLink to="/docs/hello-world.html" type="primary">
<ButtonLink to="/docs/getting-started.html" type="primary">
Get Started
</ButtonLink>
</CtaItem>

Write Preview
Loading…
Cancel
Save