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 Ecommerce Templates

      React is the most popular library for the development of e-commerce applications. React eCommerce templates for building eCommerce apps are a combination of several...

    What is React Yarn? How to Install It?

    Introduction to React Yarn The technical community shares hundreds and thousands of pieces of code every day in the community of JavaScript. As a result,...

    React Editor: Features, Installation and Limitations

    Why do we need the react editor?  There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the...

    React Babel: Everything You Need to Know About It

    Introduction About React Babel: React Babel is a very well known and well-implemented open-source transcompiler of JavaScript. We use it mainly to convert the ECMA...

    React Websocket: Usage, Installation and much more

    Introduction About React Websocket:  If you want to create a long-running connection between a client and a server then use React Websocket. Let's take an...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here