* **[Create React App](https://github.com/facebook/create-react-app)** - An officially supported way to start a client-side React project with no configuration
* **[Next.js](https://nextjs.org/)** - Framework for server-rendered or statically-exported React apps
* **[Gatsby](https://www.gatsbyjs.org/)** - Blazing-fast static site generator for React
* **[Gatsby](https://www.gatsbyjs.org/)** - Static site generator for React optimized for speed
* **[nwb](https://github.com/insin/nwb)** - A toolkit for React apps, libraries and other npm modules for the web
* **[razzle](https://github.com/jaredpalmer/razzle)** - Create server-rendered universal JavaScript applications with no configuration
* **[Neutrino](https://neutrino.js.org/)** - Create and build modern JavaScript applications with zero initial configuration
* **[Parcel](https://parceljs.org)** - Blazing fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react)
* **[Parcel](https://parceljs.org)** - Fast, zero configuration web application bundler
@ -36,7 +36,7 @@ The React team primarily recommends these solutions:
### 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.
[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:
@ -56,13 +56,13 @@ When you're ready to deploy to production, running `npm run build` will create a
### 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.
[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 solutions** 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.
[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/).
@ -74,7 +74,7 @@ The following toolchains offer more flexiblity and choice. We recommend them to
- **[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 blazing fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react)
- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
@ -52,21 +52,28 @@ As your application grows, you might want to consider a more integrated setup. T
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.
* If you prefer to **learn by doing**, start with our [practical tutorial](#practical-tutorial).
* If you prefer to **learn concepts step by step**, start with our [guide to main concepts](#step-by-step-guide).
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.
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.
>Tip
>
>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.
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
### Step-by-Step Guide
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.
If you prefer to **learn concepts step by step,** our [guide to main concepts](/docs/hello-world.html) is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won't miss anything as you go along.
@ -24,13 +24,15 @@ Click the link above to open an online editor. Feel free to make some changes, a
## How to Read This Guide
This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one.
>Tip
>
>This guide is designed for people who prefer **learning concepts step by step**. If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). You might find this guide and the tutorial complementary to each other.
In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
**If you prefer to learn by doing, you might also want to check out the [Tutorial](/tutorial/tutorial.html).** It goes at a faster pace than this guide, and is more practically oriented. You might find this guide and the tutorial complementary to each other.
Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one.
This tutorial doesn't assume any existing React knowledge.
## Before We Start the Tutorial
While you can learn React from the [step-by-step introduction to concepts](/docs/hello-world.html), many people prefer to learn by doing. This tutorial doesn't assume any existing React knowledge, and dives straight into the most important topics you'll encounter daily in React development.
We will build a small game during this tutorial. **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 deep understanding of React.
We will build a small game during this tutorial, but the concepts you will learn are fundamental to React, and apply to any apps developed with it.
>Tip
>
>This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other.
Dan Abramov
7 years ago