Billy Chandler

Billy Chandler

1559923246

Setting up Reactjs using Webpack 4 and Babel 7

In this tutorial we will be setting up our very own reactjs from scratch using webpack and babel, so grab your pen and paper lets spin the learning wheel.

Almost everyone who started out to learn reactjs was introduced to create-react-app, which is an awesome way to bootstrap any reactjs project. We were happy with it since you can just run a simple command, then boom your reactjs app development is ready. But at some point in your career you’d want to configure everything from scratch to fit a particular purpose.

Table of Contents

  • Setting up the Project
  • Setting up Webpack
  • Setting up Babel
  • Setting up React
  • Connecting React Component to the DOM
  • Finishing Touches
  • Conclusion

Setting up the Project

Before you can get started, you should make sure to have an installed editor and terminal on your machine. In addition, you will need an installed version of node with npm. Make sure to have setup everything of it before you continue to read.

Before we start writing any code, lets create a new directory where our project will stay. In any location on your computer, run the following in your terminal

mkdir webpack-babel-react-starter
cd webpack-babel-react-starter

We need to initialise our project with a package.json file, since we are going to install some packages that is vital for the setup. Simply run yarn init -y

For this tutorial i will be making use of yarn as my package manager, if you are using npm, make sure you run the corresponding command, it should work as expected.

Setting up Webpack

Webpack is one of the most popular bundler out there. It internally builds a dependency graph when it processes your application, this graph maps every module your project needs and generates one or more bundles. Since version 4.0.0, webpack does not require a configuration file to bundle your project, nevertheless it is incredibly configurable to better fit your needs.

let’s install it by running:

yarn add webpack --dev

We also need to install the webpack cli

yarn add webpack-cli --dev

After installing this two packages, you will notice a new addition in our project, the node_modules and devDependencies section in our package.json file. Next thing to do is to add the webpack you just install into the package.json file.

"scripts": {
  "build": "webpack --mode production"
}

At this point you don’t really need a configuration file to get started, which is a cool addition to webpack 4

Setting up Babel

Modern javascript is written in ES6 or ES7, but not every browser understands this modern javascript, it’s at this juncture we need babel to do the heavy lighting for us. Babel is a tool-chain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Checkout there docs for more info about what they can do for you.

React components are mostly written in ES6, with the concept of imports, class and other ES6+ features, which older browsers do not understand. Webpack on it’s own does not know how to transform or better still transpile the ES6 code to ES5 code. But their is hope for us, webpack have this concept of loaders, a webpack loader takes something as the input and produces something else as the output.

For our setup, we will use babel-loader which is webpack loader that will transpile our ES6 code for us. Before we start using babel-loader, we need to install some packages and setup babel preset env which will target the particular javascript version we want to transpile to.

let’s install all the dependencies:

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --dev

We also need to setup our babel config file, create a new file in the root directory called .babelrc and write the following configuration to it

{
  "presets": ["@babel/env", "@babel/react"]
}

The above configuration will ensure that babel transpiles our react code, which is JSX and any other ES6+ code we have to ES5 code.

Now is the perfect time to create a minimal webpack configuration for our project. Create a webpack.config.js file in the root directory and write the following configuration for it

module.exports = {
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

What the above configuration does is that for every file with a js or jsx extension, excluding the node_modules folder and it’s content, webpack uses babel-loader to transpile the ES6 code to ES5. With this done, lets head over to writing our react component.

Setting up React

We will be creating a very simple react component, that renders a text and a button, but in order to make use of react we need to install some dependencies, react and react-dom .

yarn add react react-dom

After installing those, create a new folder in the root directory, let’s call it src inside it create index.js file

In the index.js file write the following code:

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return (
    
      
        
          React Page {" "}
        
        

        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more
        
      
    
  );
};

export default Index;

It’s time to test things out and see how powerful webpack is. Open up your terminal once again and run

yarn run build

If it’s successful you should see a dist folder created for us by webpack, and inside it is an index.js file which have minified version of our ES5 code. Why is the code minified, if you remember in our build script in package.json we specified a --mode production flag after the webpack command, under the hood, webpack will generate a minified version of our ES5 code. To see a readable format of the transpiled code, you can swap the --mode production with --mode development

Yay!, the output was great but that’s not what we really want for our react app, we want our transpiled code to be visible in our browser. So let’s setup html and also css(scss) to work with our webpack.

Connecting React Component to the DOM

We need to setup an html file so that our react component can be rendered on the dom, but we can’t just create a random html file and hook up our react to it using react dom. So to achieve this we need to install the package html-webpack-plugin

yarn add html-webpack-plugin --dev

Adjust your webpack.config.js file to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

If you notice, we are adjusting the input and output so we have a bit more control over the naming and target of our files.

Nextup is to create an html file inside src folder, let’s call it index.html and then paste the following code into it



  
    
    
    React, Webpack, Babel Starter Pack
    
  
  
     You need to enable JavaScript to run this app. 
    
    

  

Since we are in the src let’s make some adjustments to our react component, first we create a new folder components then inside this folder a two files app.js and app.scss then make this following adjustments to our code:

In ./src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/app";

ReactDOM.render(, document.getElementById("app"));

In ./src/components/app.js

import React from "react";
import "./app.scss";

const App = () => {
  return (
    
      
        
          React Page {" "}
        
        

        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more now
        
      
    
  );
};

export default App;

In ./src/components/app.scss

body {
  background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1);
  background-size: 300% 300%;
  -webkit-animation: Background 25s ease infinite;
  -moz-animation: Background 25s ease infinite;
  animation: Background 25s ease infinite;
}

.full-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
//you need to setup file-loader in webpack before you can use images
  background: url("../../assests/image/background.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  //_ works with row or column_

  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

h1 {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 4em;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6);

  &:after {
    display: block;
    color: #fff;
    letter-spacing: 1px;
    font-family: "Poiret One", sans-serif;
    content: "React project powered by webpack and babel with support for sass";
    font-size: 0.4em;
    text-align: center;
  }
}

.button-line {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 1.4em;
  opacity: 0.8;
  padding: 20px 40px;
  text-decoration: none;
  transition: all 0.5s ease;
  margin: 0 auto;
  display: block;

  &:hover {
    opacity: 1;
    background-color: #fff;
    color: grey;
  }
}

@-webkit-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

We will be adding some styling in addition to the html and react component that we will render in the dom. So before we run our code to test it, we need to configure our webpack so it will know how to handle any .css or .scss file being passed through it.

yarn add css-loader sass-loader mini-css-extract-plugin node-sass --dev

sass-loader being installed here is used by webpack to convert our .scss to a .css file that the browser understands, and under the hood it makes use of node-sass to achieve this. Then mini-css-extract-plugin as the name suggests, abstract all our css files into a single css file, instead of the normal behaviour that webpack offers, which is to bundle your css file with the final .js output file which then injects the css into your rendered html output when you run the code.

Open up your webpack config file and adjust your code to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

There is a point to note here, the order of your loaders in the webpack config file matters a lot, because webpack processes the loaders from right to left. So using the test for css files for example, it will run sass-loader first, then css-loader and finally MiniCssExtractPlugin.

There is one more thing to do, let’s install webpack dev server, this will create a development server for us and monitor our files for any changes during development.

yarn add webpack-dev-server --dev

Then open your package.json file and make the following adjustments in your scripts tag

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

That’s to much code right?, so let’s test our code by running yarn run dev

Setting up Reactjs using Webpack 4 and Babel 7 if everything went well, you should see something like this on your browser.

Setting up Reactjs using Webpack 4 and Babel 7

Finishing Touches

If you followed this tutorial step by step, I’m quite confident that you will end up knowing and mastering the usage of webpack and babel. Going forward i want us to add two more features to this project, just to demonstrate that you can extend or add more features tomorrow when working on a more advanced react project than this.

Open your terminal and install this packages

yarn add file-loader @babel/plugin-proposal-class-properties --dev

file-loader will handle all the scenario where we want to import an image or an svg or even a gif while @babel/plugin-proposal-class-properties will handle react class components and static class properties.

In webpack.config.js adjust it to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name]-[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

In .babelrc file, also adjust it to look like this

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Finally run yarn run dev to make sure everything is stile working.

Conclusion

If you made it thus far, congratulation you deserve a pizza, because not everybody that started out to learn something new eventually completes it. I want you to work on what you’ve learnt in this tutorial, extend the configuration and build something awesome from it. You can checkout the github link to the complete code.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

#reactjs #webpack #javascript #css #sass

What is GEEK

Buddha Community

Setting up Reactjs using Webpack 4 and Babel 7

I am Developer

1611112146

Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make

Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.

This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Table in Database
  • Setup Database Credentials
  • Create Controller
  • Create View
  • Create Route
  • Start Development Server

https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/

#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js

Billy Chandler

Billy Chandler

1559923246

Setting up Reactjs using Webpack 4 and Babel 7

In this tutorial we will be setting up our very own reactjs from scratch using webpack and babel, so grab your pen and paper lets spin the learning wheel.

Almost everyone who started out to learn reactjs was introduced to create-react-app, which is an awesome way to bootstrap any reactjs project. We were happy with it since you can just run a simple command, then boom your reactjs app development is ready. But at some point in your career you’d want to configure everything from scratch to fit a particular purpose.

Table of Contents

  • Setting up the Project
  • Setting up Webpack
  • Setting up Babel
  • Setting up React
  • Connecting React Component to the DOM
  • Finishing Touches
  • Conclusion

Setting up the Project

Before you can get started, you should make sure to have an installed editor and terminal on your machine. In addition, you will need an installed version of node with npm. Make sure to have setup everything of it before you continue to read.

Before we start writing any code, lets create a new directory where our project will stay. In any location on your computer, run the following in your terminal

mkdir webpack-babel-react-starter
cd webpack-babel-react-starter

We need to initialise our project with a package.json file, since we are going to install some packages that is vital for the setup. Simply run yarn init -y

For this tutorial i will be making use of yarn as my package manager, if you are using npm, make sure you run the corresponding command, it should work as expected.

Setting up Webpack

Webpack is one of the most popular bundler out there. It internally builds a dependency graph when it processes your application, this graph maps every module your project needs and generates one or more bundles. Since version 4.0.0, webpack does not require a configuration file to bundle your project, nevertheless it is incredibly configurable to better fit your needs.

let’s install it by running:

yarn add webpack --dev

We also need to install the webpack cli

yarn add webpack-cli --dev

After installing this two packages, you will notice a new addition in our project, the node_modules and devDependencies section in our package.json file. Next thing to do is to add the webpack you just install into the package.json file.

"scripts": {
  "build": "webpack --mode production"
}

At this point you don’t really need a configuration file to get started, which is a cool addition to webpack 4

Setting up Babel

Modern javascript is written in ES6 or ES7, but not every browser understands this modern javascript, it’s at this juncture we need babel to do the heavy lighting for us. Babel is a tool-chain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Checkout there docs for more info about what they can do for you.

React components are mostly written in ES6, with the concept of imports, class and other ES6+ features, which older browsers do not understand. Webpack on it’s own does not know how to transform or better still transpile the ES6 code to ES5 code. But their is hope for us, webpack have this concept of loaders, a webpack loader takes something as the input and produces something else as the output.

For our setup, we will use babel-loader which is webpack loader that will transpile our ES6 code for us. Before we start using babel-loader, we need to install some packages and setup babel preset env which will target the particular javascript version we want to transpile to.

let’s install all the dependencies:

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --dev

We also need to setup our babel config file, create a new file in the root directory called .babelrc and write the following configuration to it

{
  "presets": ["@babel/env", "@babel/react"]
}

The above configuration will ensure that babel transpiles our react code, which is JSX and any other ES6+ code we have to ES5 code.

Now is the perfect time to create a minimal webpack configuration for our project. Create a webpack.config.js file in the root directory and write the following configuration for it

module.exports = {
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

What the above configuration does is that for every file with a js or jsx extension, excluding the node_modules folder and it’s content, webpack uses babel-loader to transpile the ES6 code to ES5. With this done, lets head over to writing our react component.

Setting up React

We will be creating a very simple react component, that renders a text and a button, but in order to make use of react we need to install some dependencies, react and react-dom .

yarn add react react-dom

After installing those, create a new folder in the root directory, let’s call it src inside it create index.js file

In the index.js file write the following code:

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return (
    
      
        
          React Page {" "}
        
        

        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more
        
      
    
  );
};

export default Index;

It’s time to test things out and see how powerful webpack is. Open up your terminal once again and run

yarn run build

If it’s successful you should see a dist folder created for us by webpack, and inside it is an index.js file which have minified version of our ES5 code. Why is the code minified, if you remember in our build script in package.json we specified a --mode production flag after the webpack command, under the hood, webpack will generate a minified version of our ES5 code. To see a readable format of the transpiled code, you can swap the --mode production with --mode development

Yay!, the output was great but that’s not what we really want for our react app, we want our transpiled code to be visible in our browser. So let’s setup html and also css(scss) to work with our webpack.

Connecting React Component to the DOM

We need to setup an html file so that our react component can be rendered on the dom, but we can’t just create a random html file and hook up our react to it using react dom. So to achieve this we need to install the package html-webpack-plugin

yarn add html-webpack-plugin --dev

Adjust your webpack.config.js file to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

If you notice, we are adjusting the input and output so we have a bit more control over the naming and target of our files.

Nextup is to create an html file inside src folder, let’s call it index.html and then paste the following code into it



  
    
    
    React, Webpack, Babel Starter Pack
    
  
  
     You need to enable JavaScript to run this app. 
    
    

  

Since we are in the src let’s make some adjustments to our react component, first we create a new folder components then inside this folder a two files app.js and app.scss then make this following adjustments to our code:

In ./src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/app";

ReactDOM.render(, document.getElementById("app"));

In ./src/components/app.js

import React from "react";
import "./app.scss";

const App = () => {
  return (
    
      
        
          React Page {" "}
        
        

        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more now
        
      
    
  );
};

export default App;

In ./src/components/app.scss

body {
  background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1);
  background-size: 300% 300%;
  -webkit-animation: Background 25s ease infinite;
  -moz-animation: Background 25s ease infinite;
  animation: Background 25s ease infinite;
}

.full-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
//you need to setup file-loader in webpack before you can use images
  background: url("../../assests/image/background.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  //_ works with row or column_

  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

h1 {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 4em;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6);

  &:after {
    display: block;
    color: #fff;
    letter-spacing: 1px;
    font-family: "Poiret One", sans-serif;
    content: "React project powered by webpack and babel with support for sass";
    font-size: 0.4em;
    text-align: center;
  }
}

.button-line {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 1.4em;
  opacity: 0.8;
  padding: 20px 40px;
  text-decoration: none;
  transition: all 0.5s ease;
  margin: 0 auto;
  display: block;

  &:hover {
    opacity: 1;
    background-color: #fff;
    color: grey;
  }
}

@-webkit-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

We will be adding some styling in addition to the html and react component that we will render in the dom. So before we run our code to test it, we need to configure our webpack so it will know how to handle any .css or .scss file being passed through it.

yarn add css-loader sass-loader mini-css-extract-plugin node-sass --dev

sass-loader being installed here is used by webpack to convert our .scss to a .css file that the browser understands, and under the hood it makes use of node-sass to achieve this. Then mini-css-extract-plugin as the name suggests, abstract all our css files into a single css file, instead of the normal behaviour that webpack offers, which is to bundle your css file with the final .js output file which then injects the css into your rendered html output when you run the code.

Open up your webpack config file and adjust your code to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

There is a point to note here, the order of your loaders in the webpack config file matters a lot, because webpack processes the loaders from right to left. So using the test for css files for example, it will run sass-loader first, then css-loader and finally MiniCssExtractPlugin.

There is one more thing to do, let’s install webpack dev server, this will create a development server for us and monitor our files for any changes during development.

yarn add webpack-dev-server --dev

Then open your package.json file and make the following adjustments in your scripts tag

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

That’s to much code right?, so let’s test our code by running yarn run dev

Setting up Reactjs using Webpack 4 and Babel 7 if everything went well, you should see something like this on your browser.

Setting up Reactjs using Webpack 4 and Babel 7

Finishing Touches

If you followed this tutorial step by step, I’m quite confident that you will end up knowing and mastering the usage of webpack and babel. Going forward i want us to add two more features to this project, just to demonstrate that you can extend or add more features tomorrow when working on a more advanced react project than this.

Open your terminal and install this packages

yarn add file-loader @babel/plugin-proposal-class-properties --dev

file-loader will handle all the scenario where we want to import an image or an svg or even a gif while @babel/plugin-proposal-class-properties will handle react class components and static class properties.

In webpack.config.js adjust it to look like this

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name]-[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

In .babelrc file, also adjust it to look like this

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Finally run yarn run dev to make sure everything is stile working.

Conclusion

If you made it thus far, congratulation you deserve a pizza, because not everybody that started out to learn something new eventually completes it. I want you to work on what you’ve learnt in this tutorial, extend the configuration and build something awesome from it. You can checkout the github link to the complete code.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

#reactjs #webpack #javascript #css #sass

How to Send E-mail Using Queue in Laravel 7/8

Today I will show you How to Send E-mail Using Queue in Laravel 7/8, many time we can see some process take more time to load like payment gateway, email send, etc. Whenever you are sending email for verification then it load time to send mail because it is services. If you don’t want to wait to user for send email or other process on loading server side process then you can use queue.

Read More : How to Send E-mail Using Queue in Laravel 7/8

https://websolutionstuff.com/post/how-to-send-e-mail-using-queue-in-laravel-7-8


Read Also : Send Mail Example In Laravel 8

https://websolutionstuff.com/post/send-mail-example-in-laravel-8

#how to send e-mail using queue in laravel 7/8 #email #laravel #send mail using queue in laravel 7 #laravel 7/8 send mail using queue #laravel 7/8 mail queue example

Dylan  Iqbal

Dylan Iqbal

1558829901

Learn ReactJS with Webpack 4, Babel 7, and Material Design

Quick and simple, fast guide on integrating ReactJS with Webpack, Babel and Material Design. This is a short tutorial which will get your ReactJS app running with Webpack and Babel.

**React **is a JavaScript library for building user interfaces and it has three main characteristics:

  • Declarative
  • Component-Based
  • Learn Once, Write Anywhere

**Webpack **is an open source JavaScript module bundler. Its main purpose is to bundle **JavaScript **files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. **Webpack **takes modules with dependencies and generates static assets representing those modules.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of **JavaScript **in current and older browsers or environments. Here are the main things **Babel **can do for you:

  • Declarative
  • Component-Based
  • Learn Once, Write Anywhere

#reactjs #webpack #javascript #web-development

Why Use WordPress? What Can You Do With WordPress?

Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?

WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:

1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.

2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.

3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.

4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.

5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.

6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.

Read More

#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website