Quick Start | React

This tutorial is a continuation of the webpack tutorial. It is a quick procedure for getting started with React. We will continue using webpack and babel for transpiling React's JSX syntax. By continuing this tutorial, you will quickly set up your first React.js project.

Getting Started

You will need a few more dependencies to get started using React. These dependencies include babel-preset-react, react and react-dom. While you may use npm to install these dependencies, you can just as easily copy/paste the contents of this package.json file.

package.json

{
  "name": "react_project",
  "version": "1.0.0",
  "description": "sample description",
  "main": "index.js",
  "scripts": {
    "test": "echo 'Error: no test specified' && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  }
}

Be sure to run npm install to update your Node project with the appropriate dependencies.

Configure Babel

As a continuation of our last tutorial, we are using the babel-loader with webpack to transpile our index.js file. This means all we need to do is configure a .babelrc file in our root directory with the es2015 and react presets.

.babelrc

{
  'presets':[
    'es2015', 'react'
  ]
}

Rendering HTML with React

Now that you've got your environment properly configured, it's time to jump into React. Open your index.js file and replace it with the following:

import React from 'react';
import ReactDOM from 'react-dom';

const element = (
  <h1>Hello World</h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Notice how we've used ES6 standards to import the React libraries as well as define an HTML element constant. We then use ReactDom.render() to access the element with an id of #root and replace its contents with that of our element constant.

Head over to your index.html file and give the h1 tag the root id:

<h1 id='root'> <h1>

Now run webpack in your root directory via:

node node_modules/webpack/bin/webpack

Note you could simply run webpack if you install it globally with the -g switch. For this tutorial, we're referencing the local webpack instance for the project.

Wrapping up

After running webpack successfully, open your index.html file in the browser. If all went according to plan, you should now see the header 'Hello World' rendered in the browser.

Conclusion

Although this is a simple example, it quickly demonstrates how to get started using the React library with webpack. By using webpack with babel, we can easily import required libraries and use ES6 standards along with JSX to easily render UI components with React.

Your thoughts?