More

    React Webpack Starter: Everything Defined Here!

    Introduction of React Webpack Starter: 

    React JS is an illustrative UI library for creating user-interface. It is an open-source javascript library used to build high-end responsive UI for web applications and native applications which can be accessed using a web browser application present in your device. React JS permits to build summarized components that handle their own position. It provides easier programming models and great performance. React JS is used to create web applications and even mobile applications with help of React Native Extension. It is all managed by Facebook. From creating the components to import and export, all together make it effective. ReactJS is known for its performance and with the help of the virtual DOM concept, the rendering of components becomes faster. Now, due to the underlying XML or HTML syntax, the power of ES6 and the technique of virtual DOM makes React one of the best frontend libraries out there.

     

    What is Webpack?

    In very simple terms, a webpack is a static module bundler. This simply means that, when you build or process your application based on any framework or library with webpack support, the webpack shows its magic and internally builds a dependency graph that maps every module your project needs and generates one or more bundles. Webpack treats any file as dependency if at any time one file depends on another.  This allows webpack to take non-code assets, such as web fonts or images, and also provide them as dependencies for your application. 

    When webpack starts bundling your application, it starts from a list of modules defined on the command line or in its configuration file. From these entry points, webpack recursively builds a dependency graph which includes all the modules that the application needs. Once the dependency graph is ready, webpack sprinkles it’s magic dust and bundles all those modules into a number of smaller bundles often, just one – to be loaded by the browser.

    Entries in webpack are modules and points to other modules through imports. After every module has been evaluated, webpack writes output which includes a bootstrap script. This script is a small runtime that executes the result in a browser.

    An entry point indicates which module webpack should use to begin building out its internal dependency graph. Below is a webpack configuration file’s example.

    webpack.config.js

    module.exports = {

      entry: ‘./path/to/my/entry/file.js’

    };

     

    Dive into React Webpack Starter

    There are a few ways to start working on your very first React application. One way is to write codes for explicitly adding bundler and compiler support on React applications. Another way is to simply run a  single line command on your CLI (Command Line Interface), which automatically does everything for you to build a boilerplate for your application. 

    Note that, it is assumed you already have node (NodeJS) and npm (node package manager) installed on your system which has npx (package runner tool), required in the creation of React-based applications. 

    React webpack allows adding HMR (Hot Module Replacement), which shortens the feedback loop during development. Whenever you change something in your application’s source code, the change will apply in your application running in the browser without reloading the entire page. It allows the application to maintain its state without forcing a refresh.

     

    Few ways to create a webpack supported react starter bundle or kit are:

     

    • Using ‘create-react-app’ command

    create-react-app

    This is a toolchain, and is used for creating a new single-page application using create-react-app command. It creates an environment for learning react, and does not require explicitly adding bundler like webpack, compiler like babel and package manager like npm.

    It sets up your development environment so that you can use the latest JavaScript features. This provides a nice developer experience, and optimizes your application for production. 

    Node >= 8.10 and npm >= 5.6 is required in the system.

    To create a project, run:

    npx create-react-app my-app

    cd my-app

    npm start

     

    • Creating a Toolchain from Scratch

    ReactJS toolchain typically consists of :

    • A package manager, such as Yarn or npm:  It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
    • A bundler, such as webpack: Bundler allows you to write modular code and bundle it together into small packages to optimize load time.
    • A compiler such as Babel: Compiler lets you write a modern JavaScript code that still works in older browsers. Babel is also needed for React, because JSX and its file extension .jsx, aren’t natively supported. 

    Steps for setting up react webpack starter: 

    • Make sure Node and npm are installed in the system.
    • Create a new directory for your react application, and move into the directory.
    • Initialize it with the command npm init  and follow the instructions.
    • Make a Public directory and create a new index.html file in the public directory. Add <div id=”root”></div> tag and <script src=”../dist/bundle.js”></script> within the body of the file. The react app will hook to the root (div with id=”root”)  and the name of script is bundle.js.
    • Install babel using command npm i @babel/core babel-loader @babel/[email protected] @babel/preset-env @babel/preset-react –save-dev 

    babel-core is the main babel package needed to do any transformation in the code.

    In the project root or root directory, create a file called .babelrc, which is a babel configuration file and add these lines in the file and tells that we are going to use env (transforms ES6+ codes to traditional JS) and react (transforms JSX codes to traditional JS) presets.

    {

      “presets”: [“@babel/env”, “@babel/preset-react”]

    }

    • Run command npm install react react-dom –save in the main directory or root directory.
    • Now we need to acquire and configure Webpack. Run this command.

    npm install –save-dev [email protected] [email protected] [email protected] [email protected] [email protected] babel-loader@8.0.2

    Webpack uses loaders to process different types of files for building bundles. 

    To utilize these loaders, we need to configure the webpack and prepare a development server. Create webpack.config.js file in project root and add these lines.

    var path = require(‘path’);

    const webpack = require(“webpack”);

    module.exports = {

      entry: ‘./src/index.js’,

      output: {

        path: path.resolve(__dirname, ‘dist’),

        filename: ‘bundle.js’

      },

      module: {

        rules: [

          {

            test: /\.(js|jsx)$/,

            exclude: /node_modules/,

            use: {

              loader: “babel-loader”

            }

          } 

        ]

      }

    };

    The above code sets rules in webpack which is applicable for .js or .jsx files.

    • It’s time to  finally install React. Run command npm install react react-dom –save and create a file index.js within src directory in project root. If the src folder is not present, then create one. Within the index file, add these lines. 
    1. import React from “react”;
    2. import ReactDOM from “react-dom”;
    3. import App from ‘./App.js’;
    4. ReactDOM.render(<App />, document.getElementById(“root”));

    Now, create another file called App.js within the src folder and add these lines in the file. 

    1. import React from “react”;
    2. function App(){
    3.     return <h1>Hello React,Webpack & Babel !</h1>
    4. }
    5. export default App;
    • To add HMR or hot reload in our react application, simply run command npm install react-hot-loader –save and import hot reloader into App.js.

    Add line: import {hot} from “react-hot-loader”;

    Update line: export default hot(module)(App);

    • Using prebuilt react-webpack starter kits

    A lot of engineers and developers have worked on making React’s application easier to install, configure, and edit. These are the starter kits, which come with a boilerplate (any written text that can be reused in new contexts or applications without significant changes to the original).

    Few of these starter kits are:

    • gatsby 
    • react-starter-boilerplate-hmr
    • react-slingshot
    • universal-react

     

    This URL contains a list of react webpack starter kits, and one can choose as per his liking. 

    https://webpack.js.org/starter-kits/

     

                

     

     

     

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here