w3resource
React Tutorial

Create React App

In the previous tutorial, we explored how react can be added to a HTML website from the CDN. In this section we will explore the second way of using react, that is, by creating a single page application using the ?Create React App? command.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page 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:

```
npx create-react-app my-app
cd my-app
npm start
start

```

Note: npx on the first line of the snippet above is not a typo ? it?s a package runner tool that comes with npm 5.2+.

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 and webpack, 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 and the User Guide.

Next.js

Next.js 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 as the server environment.

Learn Next.js from its official guide here.

Gatsby

Gatsby is one of the best ways 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 and a gallery of starter kits.

More Flexible Toolchains

The following toolchains offer more flexibility and choice. It is recommend for more experienced users:

  • Neutrino combines the power of webpack with the simplicity of presets, and includes a preset for React apps and React components.
  • nwb is particularly great for publishing React components for npm. It can be used for creating React apps, too.
  • Parcel is a fast, zero configuration web application bundler that works with React.
  • Razzle is a server-rendering framework that doesn?t require any configuration, but offers more flexibility than Next.js.