Quickstart for React and Webpack in 8 minutes or less

The first step to getting started with React is to set up the package management system. The flood of React tutorials and workshops out there can be a bit overwhelming and targeted to varying levels of experience. If you’re a beginner looking for a bare bones setup, it’s easy.

No really, it is.

This is one way to set up your basic architecture and build your first React component in 8 minutes or less.

Download React

First, make sure you have Node.js already installed on your machine. In the terminal, initialize npm in your project folder. This will prompt a bunch of questions (go ahead and accept the defaults) and write a package.json file with the options you selected. We can now use npm to require modules that we will need.

Let’s start with installing the latest versions of react and react-dom. At the time of this publication, 15.3.0 is the most recent version.

$ npm init 
$ npm install --save react@15.3.0
$ npm install --save react-dom@15.3.0

Install dependencies related to Babel

Install the latest versions of Babel, a JavaScript compiler that allows us to write JSX and ES6(ES2015) and compiles it into something browsers can read.

$ npm install --save-dev babel-loader@6.2.4 babel-core@6.11.4 babel-preset-es2015@6.9.0 babel-preset-react@6.11.1

JSX enables us to write HTML-ish code within our Javascript, that Babel will then compile into regular JavaScript. Since some older browsers don’t understand ES6, Babel also compiles ES6 to ES5.

Create root view

Make a new folder called public/ and a new file called index.html inside. This will be the root view of our application.

$ mkdir public 
$ cd public 
$ touch index.html 

In index.html, create a div for our first component and include a script tag to reference bundle.js. In the next step, we will transpile all of our react components into JavaScript and inject it into a single file called bundle.js.

Configure Webpack

Return to the project’s root level in the terminal. Install Webpack as a global module on your machine if you haven’t already done so.

Create a file called webpack.config.js in your project’s root folder.

$ cd ..
$ npm install webpack –g 
$ touch webpack.config.js

In webpack.config.js, export an object that has all the Webpack configuration details.

• entry tells Webpack where to begin processing all the JSX, called Main.js here. This is the root component that will subsequently render all the children components.
• output tells Webpack where to output the transpiled Javascript, called bundle.js here. This file will be the only script tag to include in your HTML file.
• loader tells Babel what to do with our code, the transformations to undergo using packages previously installed with Babel.

Create React component

Now it’s time to create our first React component. In the project’s root level in the terminal, make a new folder called app/ and a new folder called components/ inside. Create a file called Main.js.

$ mkdir app
$ cd app
$ mkdir components
$ cd components
$ touch Main.js

In Main.js, import the previously installed ‘react’ and ‘react-dom’ packages by assigning them to the variables React and ReactDOM, respectively.

Create a React component called Main using the createClass method. Within the component, render is one property to pass in that specifies what the UI looks like for this element when rendered to the view. In this case, we are publishing “Hello World” using JSX, the HTML-ish looking syntax that Babel will transpile into regular JavaScript.

Lastly, use ReactDOM to render the Main parent component, and tell it where to render.

Run Webpack in the terminal with a watcher that will recompile upon updates. Open index.html in your browser and you should see Hello World.

$ webpack -w

And there it is.