- ReactJS is very simple to implement because of its simple syntax and architecture as compared to the competitors.
- Virtual DOM concept of ReactJS makes it very efficient and fast.
- Because of VDOM the page render on browser is a regular page which makes it good for SEO.
- It is open source and developed by Facebook.
Facebook keeps React up to date, even made it compatible with ES6. But as we know not all browsers support all the properties of ES6. So we use Babel for this purpose. Babel compiles the ES6 code into ES5 code so that it can run in the old browser.
Webpack is a module bundler. It manages static assets and minifies and compiles files like SaaS, Less, Typescript. Webpack checks for import and require statement in files and builds a dependency graph.
What and how webpack will work is determined by webpack.config.js.
First we have to make sure NodeJS and NPM is installed. Using npm we will install all the packages we need.
First we will create a package.json file to save all the dependencies we need. Type this command in the terminal and enter the details it asks.
Now let’s install react and react DOM.
Next we will need webpack and webpack development server. To install this, type this command in the terminal.
Now as the bundling tool is installed we need our ES6 transpiler i.e. Babel. To install, type these command in terminal-
Babel loader is for minifying and compiling files while presets ES2015 is for different plugins like arrow function, classes and duplicate keys.
Now create a file helloWorld.js and add this code-
Create another file content.js in the same directory and add this code –
In the same directory now create another file main.js where we will import these two files –
Create index.js file with following content –
Now as we know the webpack is a module bundler and can bundle multiple module files into one. Let’s create a webpack.config.js file and add the following config.
Let’s see what happened with the configuration file. First we imported the path and webpack. Require will search for the webpack module everywhere and it will import it from there.
Entry will be the file where we are importing all js and adding routing while output will be the compiled file. Loader is used to minify and compile files. Here we are using only babel loader so we defined only that. We can also add other loader according to the dependencies.
Finally we need to link this file into the main index file.
Now open the terminal and run the webpack server by typing this –
Now in your browser, go to this “http://localhost:8080/webpack-dev-server/ and you will see your app in your browser.
Now as our environment is setup you can check the official documentation to learn more about ReactJS.