React Setup and Build Tools

In the previous post we saw how to setup the environment to develop a Hello World React App, we saw that we used a set of npm packages and tools like webpack, bable etc to setup the environment, in this post we shall see the purpose of each of the tools in setting up the React Environment.

Setting up React dev Environment using Webpack and babel

Modern web development frameworks like Angular / React are complex and involves complex environment setup before we could write our Hello World program. Setting up the development environment for React is a tedious task. In this post we will try to set up the development environment and display Hello World using a react component.

1. First let us create a folder ReactHelloWorld, we will setup the environment and create the Hello World component in this folder.

2. Next make sure node is installed in the pc, if not installed already install the latest version of Node.js. We can check if Node is installed by running the command node –v, if Node is installed this command will return the version of Node.js Installed in the pc.

ReactHelloWorld>node –v
v8.12.0