Learn React Essentials in 5 Minutes

First things first, React is a JavaScript library used to build user interface, specifically single page application. It was developed by Facebook and has a lot of online communities that provide lots of support. It is one of the easiest libraries to use. While it has become very popular among startups (like Airbnb , Dailymotion, Grammerly, IMDb and our own Flipkart and Freecharge), there are a host of other companies that are also moving towards React.

To start development and to write any simple code and run it via web pack we need to include 4 libraries:

• React
• ReactDOM
• Babel-loader
• Webpack

Let's get into some more details about each library

React Library

npm install react --save

The React package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and some other helpers related to elements and component classes. These are universal helpers that you need to build components.

ReactDOM

npm install reactdom --save

Now, if you are wondering why we need to install ReactDOM and what the difference between React and ReactDOM IS, here you are - ReactDOM is a glue between React and Dom.

Prior to V0.14, all ReactDOM functionality was part of React. The reason React and ReactDOM were split into libraries was due to arrival of React Native. React contains functionality utilized in web and mobile apps while ReactDOM functionality is only utilized in web apps.

Bit of Trivia for you — there was a point when developers wanted to use React common for both web and mobile. For some unknown reason, this did not happen. Now, React Native is an entirely different package used for mobile apps.

Babel Library

npm install babel- --save

Even though React is a JavaScript library, the important thing to note is that we are not going to code React in JavaScript. React coding has its own flavor called JSX (JavaScript extended)

Why Babel? Since the code written in React will be of JSX format, and we all know that browsers only understand JavaScript (JS), Babel is used to translate JSX to JS so that browser(s) will understand and execute our code. Again, in Babel, we have three libraries, which we need to pick depending on our application development requirements.

Babel-CLI: Babel comes with built in CLI, which can be used to compile files from the command line. This can be used in the initial stages of learning React. Otherwise, in general, it's a bad idea to run globally using this.

Babel-Core: This can be used if you want to use the Node API.

Babel-Loader: This can be used when using Webpack. This library will be used when building real time applications.

Webpack

npm install webpack -g --save

npm install webpack-dev-server -g --save

Webpack is a module bundler. At a high level, module bundling is simply the process of stiching together a group of modules and their dependencies into a single file or group of files in the correct order.

Why do we need a module bundler? When you're coding, you'd divide your program into modules and then organize these modules into different files and folders. Chances are you will also have a group of modules for the libraries you are using (ex. Bootstrap or underscore-react). As a result, each of these files has to be included in your main HTML file in a <script> tag, which will then be loaded by the browsesr. When a user visits your homepage, each file with a different <script> will have to be loaded individually, which will increase your page load time.

To get around this problem, we'd bundle or concatenate all our files into one big file in order to reduce the number of requests.

So how does Webpack work?

Webpack analyzes our entry files for dependencies to other files. These files, also known as modules, are included in our bundle-js. This Webpack will give each module a unique ID and save all modules accessible by ID in the bundle-js file. Only the entry module is executed on start up. A small run time provides the require function and executes the dependencies when required.

We can run Webpack in three modes:

1. Run manually: Each time, modify a file and run webpack.

2. Run in watch mode: Webpack can cache unchanged modules and output files between compilations. When using watch mode, Webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it’ll run the compilation again. When caching is enabled, Webpack keeps each module in memory and will reuse it if it isn’t changed.

3. Run in development server: The development server is even better. This binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled. The dev server uses Webpack’s watch mode and it also prevents Webpack from emitting the resulting files to disk. Instead, it keeps and serves the resulting files from memory.

That's all for today! Stay tuned for the sample codes!

Here are some more beginner resources on React:

• The React Quick Start Guide
• Setting Up a React.js Environment Using Npm, Babel 6 and Webpack
• React Beginner Tutorial: Building a Board Game from Scratch
• Build a WhatsApp Messenger Clone in React (Class)