Bable

Babel is a JavaScript compiler which is used to transform ES6 JavaScript code to ES5 JavaScript which the browsers can understand. This transformation is called transpilation. React components are generally written using ES6 classes and JSX syntax, bable loaders are used to transpile ES6 and JSX code to core ES5 JavaScript.

Webpack cannot compile ES6 JavaScript code, hence it used loaders to transpile ES6 and JSX code. In the React sample we used bable-loader in the webpack configuration to compile ES6 and JSX code into native JavaScript code.

For the React Application we used the following 3 bable packages

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