First thing we need to do is setup our development environment and hook up React. Our end goal will be to get a basic message up on screen. Let's create a new directory and download the packages we need.
This is a basic HTML page. We are including Bootstrap and its basic theme for some simple styles. We also are adding some styles in a style tag to help with the sizing of some elements. In the body, we are adding our container element and our main app bundle.
Now that we have all that setup, let's create a webpack config that we can use to build our project. Create a file in the root of your project called webpack.config.js and put the following in it.
Here we are exporting our config object like normal. We point webpack to start at our app.js file and tell everything to output to a build directory. We run all HTML files though the file loader. This essentially just moves the file to our build directory. Also, we run our JS files through the babel loader to make sure they are transpiled to code that most browsers these days understand. Lastly, we are including a plugin that will give us pretty output in the console.
Last thing. Let's create some npm scripts so that we don't need to remember the commands we need to run our application. Add the following scripts to your package.json file in the scripts section.