Quick Start | React

Quick Start | React

March 15, 2017

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.

'

Join the conversation...



Submit

yeah this is good. lots of these quick starts to React but i think this does a good job covering the basics of the library and the environment you need to really get going with React.
Posted by Brad on April 7, 2017
love this min series of sorts. keep it up...maybe we we see some state change stuff soon?
Posted by John Ferry on March 16, 2017
great tutorial thanks for a quick guide
Posted by Sara Porter on March 16, 2017
may i recommend setting the watch flag in your webpack config to true. then you just run webpack once and don't have to keep running it each time...also install it globally for sure..
Posted by Todd A on March 16, 2017



More by the stackchief