December 2015 (perspective of an assistant professor)
Before you can start writing your first line of code in any software project, you must first install and configure your development environment. Setting up these software tools is often 90% of the battle. This process can be especially frustrating in web development due to the Web's loose, open nature and to the blistering pace of change in libraries, frameworks, and support tools. Trends change so fast that it's hard to keep up. In fact, this tutorial – like many of its kind – will probably be outdated in a few months, since the tools will have changed so much. I wrote it in December 2015, so take it with a grain of salt if too much time has elapsed before you read.
In this article, I'll show you how to set up a practical and modern development environment to create web application frontends (i.e., user interfaces) using these now-popular tools:
Step 2: Make a new directory for your app,
npm init --yes # creates a blank package.json file # can write all on one line. --save will save all # installed dependencies to your package.json npm install --save \ react \ react-dom \ babel-core \ babel-loader \ babel-preset-es2015 \ babel-preset-react \ react-hot-loader \ webpack # needs to be global (-g) so you can run it npm install -g webpack-dev-server
If all goes well, after a few minutes, all of these dependencies will be
installed in the
What does each dependency do?
(OMG LOL! Just minutes after I published this article, someone sent me a link to a newer setup with a reference to how react-hot-loader is now outdated! Well it's not perfect, but it works for me for now. Oh wells, such is the bizarre state of modern web development. Moving on ...)
Step 3: Create the following
edit should go into a
As Webpack, Babel, and React inevitably get upgraded in the future, this configuration file may need to change in subtle ways ... so good luck figuring that out!
Step 4: Now create the following
This will be the main entry point into your web app, as specified in
Then create this
This file represents a helper module that your
Finally create this
Your app's directory structure should now look like:
Step 5: Now start the Webpack development server by running this
command in your app's top-level directory (where
webpack-dev-server --hot --inline
If all goes well, Webpack will invoke Babel to create a new
to see your new web app in action! (I've only tested on Google Chrome on a Mac so far.)
For example, edit
After a few seconds of compiling, your browser should automatically refresh to show the new on-screen name as “John”. Congrats, now you're ready to write awesome React and ES6 code!
Step 6 (optional): Let's say you want to use a third-party
referencing it from your HTML file, you can simply
For instance, let's say you wanted to use d3. In your app's top-level directory, run:
npm install --save d3
import 'd3'; // now you can use it! console.log(d3);
Now you can access the
Step 7 (optional): I highly recommend installing the React developer tools to ease debugging. I use it within Google Chrome.