ReactJs : First ReactJs Application

 

What is ReactJs?

React is a Javascript library, by Facebook, that is used for building user interfaces. It helps to build super fast and reactive web applications that runs on user’s browser.  It uses ES6 based javascript syntaxes.

ReactJs builds the UI (User Interface) based on the concept called Component. The UI view is split into reusable and manageable small segments called components. The ReactJs renders the user view based on those components.  Therefore ReactJs is all about splitting the UI into components and render the UI based on those components.

 

What is NPM (Node Package Manager) ?

NPM (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager used in NodeJs.  It enables the path of accessing thousands of  reusable javascript libraries for your project.

NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.

 

NPM (Node Package Manager) and NodeJs Server

Here we are going to create a project that manage its dependencies with NPM.  Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs.  If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available,  it can be used as a development server to deploy the project files.

Configure Babel and Webpack for NPM (Node Package Manager) based project

 

What is NPM (Node Package Manager) ?

NPM (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager used in NodeJs.  It enables the path of accessing thousands of  reusable javascript libraries for your project.

NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.

 

NPM (Node Package Manager) and NodeJs Server

Here we are going to create a project that manage its dependencies with NPM.  Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs.  If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available,  it can be used as a development server to deploy the project files.

Babel and Webpack for compiling and bundling JavaScript ES6 (ES6/ ES7/ ES8)

In this article i am going to explain how to use the Babel compiler  for compiling the javascript from ES6(or higher ES version) to ES5 compliant version. In addition, the webpack will be used for  executing barbel compiler and bundling the multiple javascript dependencies into a single file.

The majority of the internet browsers are supported to run ES5 compliant JavaScript. Therefore if you develop your application with ES6 or any other latest ECMAScript version, you may need to compile or transform it into ES5 compliant version for running it in most of the available browsers.

 

What is Babel?

Babel is a JavaScript transpiler (or known as javascript compiler). Babel enables us to write modern JavaScript that will be “transpiled” to widely-supported ES5 JavaScript. We call this process as “transpiling”.

Want to know more about Babel? Click here