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-es2015 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:

import React from ‘react’;
import ReactDOM from ‘react-dom’;

ReactDOM.render(

Hello, world!

,
document.getElementById(‘root’)
);
This code renders into a DOM element with the id of root so you need

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.

Development and Production Versions
By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.

Advertisements