React, first steps (Webpack and Babel)

  • As these packages are all development devepdancies only we’ll install them doing the following:

    Our should now have the following packages:

    Lets first configure babel so it knows how to transpile our code how we need it to.

  • We’ll create a file for our babel settings.
  • This file just contains some json with some settings which tell babel how to behave.
  • Now we need to set up webpack to use babel and bundle the javascript for us to use in our site.
  • Finally, in order for us to compile the javascript, we need to install the webpack package globally:

    We can then just run:

    This should create in .

Getting started with React can be a big hurdle. Before you can get started creating your react app, youll need an environment that compiles ES6 into Javascri…

@Airzy91: Go check out my write up for getting started with React using Webpack and Babel #reactjs

Getting started with React can be a big hurdle. Before you can get started creating your react app, youll need an environment that compiles ES6 into Javascript that can run in your browser. For this tutorial, I’ll be using Babel and Webpack to do this.

For the tutorial, you’ll need node installed. (I’m using version 6.10.0)

In your project directory run

with a few default properties. Don’t worry about most the settings it asks for to begin with, just give it a name of whatever you’d like to call your project.

looking something like this:

Theres a few node packages we’re going to need to install. I’ll do my best to explain each package and why we need it.

: This allows babel to be used with webpack.

: This preset is what tell babel how to transpile most of the ES6 code we’ll be writing.

: This preset tell babel how to transpile the React code.

As these packages are all development devepdancies only we’ll install them doing the following:

should now have the following packages:

Lets first configure babel so it knows how to transpile our code how we need it to. We’ll create a

file for our babel settings.

This file just contains some json with some settings which tell babel how to behave. For now all we need to do is specify the two presets we want to use.

Now we need to set up webpack to use babel and bundle the javascript for us to use in our site. We’ll create a

file. This is where we’ll export our webpack configuration.

At this point we can start thinking about writing some React code. For that we’ll need to install the react and react-dom node packages.

should now have the following:

we’ll create that first.

there.

Finally, in order for us to compile the javascript, we need to install the webpack package globally:

We can then just run:

in

in your browser and you should see “Hello World!”.

Thats all you’ll need to get started to develop your ReactJS app.

Find the source code for this over at github here.

React, first steps (Webpack and Babel)