P.S. This post is not on the React framework, its on the configuration of tools before starting on React.

Before starting on building a draggable & sortable todo-list React app, I followed tutorials to learn React and eventually used the create-react-app to start. Create-react-app had all the tools and build configurations preconfigured but I wanted to know what were the tools used. So I found this tutorial online which teaches you how to build a react starter kit that you can use to build apps on. Below are the tools that the starter kit uses.

NPM

We add a package.json file to record our npm dependencies. Stuff that we add in the later steps are npm packages: Babel, Webpack, React etc. Adding a “node_modules” in .gitignore tells git to ignore the “node_modules” folder. It can be auto generated so we don’t need it! Since its now an npm project, the “npm install” command can be used to install all dependencies.

Babel

Babel transforms the ES6 + JSX JS that we’ll be writing into ES5 JS that browsers can understand. We’ll write in a special syntax called JSX, which lets you put HTML-like code inside Javascript.

Webpack

Webpack bundles all our JS together into a single file. This includes all the JS file that we write & the npm packages. Reason: A single .js file is easier to deploy & usually downloads faster than multiple small files. Webpack will work with Babel to convert our code from ES6/7 -> ES5 while we work. Webpack also minifies our .js file for production.

babel-loader is a Webpack ‘loader’. It supports running Babel from Webpack.

Express

A React dev env needs some way to show your app in a browser => which means, we’ll need a server. We’ll set up Express as our server.

Main file added here is server.js: It will run an Express server, which will run Webpack. Webpack will rerun whenever we change one of our JS files.

server.js is server-side JS. We can run it with the node server.js command. We’ll be adding a start script to run the server tooooo

Start by creating www/index.html as our first web page. Express is configured to serve all the files in the folder.

React

Finally, we add the React npm package! For websites on learning React, I think the official doc is worth a read!