Facebook React JS Repository Installation Guide

React is a JavaScript library for building user interfaces.

  • Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
  • Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
  • Learn Once, Write Anywhere: We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Hello World

The easiest way to get started with React is to use this Hello World example code on CodePen. You don’t need to install anything; you can just open it in another tab and follow along as we go through examples. If you’d rather use a local development environment, check out the Installation section.

The smallest React example looks like this:

It renders a heading saying “Hello, world!” on the page.

The next few sections will gradually introduce you to using React. 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.

A Note on JavaScript

React is a JavaScript library, and so we’ll assume you have a basic understanding of the JavaScript language. If you don’t feel very confident, we recommend refreshing your JavaScript knowledge so you can follow along more easily.

We also use some of the ES6 syntax in the examples. We try to use it sparingly because it’s still relatively new, but we encourage you to get familiar with arrow functionsclassestemplate literalslet, and const statements. You can use the Babel REPL to check what ES6 code compiles to.

Documentation

You can find the React documentation on the website.
It is divided into several sections:

You can improve it by sending pull requests to this repository.

Examples

We have several examples on the website. Here is the first one to get you started:

This example will render “Hello John” into a container on the page.

You’ll notice that we used an HTML-like syntax; we call it JSX. JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using Babel with a React preset to convert JSX into native JavaScript for browsers to digest.

Installation

React is available as the react package on npm. It is also available on a CDN.

React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.

The recommended way to install React depends on your project. Here you can find short guides for the most common scenarios

Try React

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 or CodeSandbox.

Minimal HTML Template

If you prefer to use your own text editor, you can also download this HTML file, 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 section for a step-by-step introduction to React concepts.
  • Try the Tutorial 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.

Include React to a New Application

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 page instead. single HTML file 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 or use it from CDN and without a build step.

Create React App

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.

If you have npm 5.2.0+ installed, you may use npx instead.

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

Other Starter Kits

We have created a curated list of third-party starter kits that we officially recommend.

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 contributed by the community.

Add React to an Existing Application

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 without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:

  • package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
  • bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into small packages to optimize load time.
  • compiler such as Babel. 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 to ensure you’re using the fast version of React in production.

We recommend using Yarn or npm for managing front-end dependencies. If you’re new to package managers, the Yarn documentation is a good place to get started.

To install React with Yarn, run:

To install React with npm, run:

Both Yarn and npm download packages from the npm registry.

Note:

To prevent potential incompatibilities, all react packages should use the same version. (This includes reactreact-domreact-test-renderer, etc.)

Enabling ES6 and JSX

We recommend using React with Babel 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 explain how to configure Babel in many different build environments. Make sure you install babel-preset-react and babel-preset-env and enable them in your .babelrc configuration, and you’re good to go.

Hello World with ES6 and JSX

We recommend using a bundler like webpack or Browserify, so you can write modular code and bundle it together into small packages to optimize load time.

The smallest React example looks like this:

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.

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, and how to configure the production build process most efficiently:

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 page for links.

Download Link to the File:

[sociallocker]

[/sociallocker]

You may also like...