Configuring ReactJS from scratch

Walthrough of creating a ReactJS application from scratch with every step documented. This should be good enough for someone that is a total beginner.

The code for this post is located on github.

Techology Stack

Please download and install NodeJS and Webstorm to follow this tutorial webpack and react-materialized will be installed later.

Setup directory

I am going to create my project in the ~/Projects/bbq/bbqweb directory.

Create the folder & change into it.

Initialize the directory with npm.

Press return for each question. When complete you should have a package.json file in your directory.

Install react, babel, and webpack.

Install webpack

Install react

Check your setup

List your directory and you should now have a package.json file and a node_modules directory. If you list the contents of the node_modules directory you will find a bunch of directoies for all the components you just installed with those two npm i commands.

Create the .babelrc config file.

Create the following file in your new project directory with your favorite text editor. Make sure it is properly named. Windows users will need to make sure there is not a .txt file extension on the end after saving.

Create the index.html file.

This is the file that serves up the application to the browser and is the first resource loaded by the web browser. The file is basically only going to point to your webpack bundle.


 

This HTML file will not do anything yet. We still need to configure webpack and create the ReactJS index file. Don’t worry that there is no src/public/bundle.js file. We are going to get that created next.

Create the webpack.config.js

Babel is used to transpile the code we write for ReactJS into a more supported form of JavaScript. This lets us write modern code that would not be directly supported by all browsers. This file configures babel to understand ReactJS.

Configure npm to run and build your application

Edit your package.json file and edit the scripts section to look like mine below. You are adding the dev and build scripts to this file to make things a little easier.

Create the ReactJS entry point to your application index.jsx

Edit the new file named src/app/index.jsx, paste in the code below, and save it.


To run the application type npm run dev in the project root folder.  This will start a mini web server.  Just point your web browser to http://localhost:3000 and you should see your web application.