DEV Community: Camilo Rincon

Setting up ESLint & Prettier With Webpack in VSCode 🧑‍💻

Camilo Rincon — Sun, 23 Oct 2022 01:39:02 +0000

In our third part of the series, we will be setting up the configuration for ESLint and Prettier within VSCode.

We will be setting up our ESLint and Prettier without going through either Webpack nor Babel. If you would still like to set up the project like it is in GitHub then follow the quick set-up guide. Visit the previous articles for a more in-depth explanation of what is happening behind the scenes here.

Versions Being Used:

React 18
Babel 7
Webpack 5
TypeScript 4
ESlint 8
Prettier 2

Quick Set-Up

In order to quickly initialize the project, run the following commands:

a. Create package.json file

npm init -y

b. Install React, Babel, Webpack, TypeScript, and other needed packages

npm install --save-dev --save-exact react react-dom @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader file-loader typescript @types/react @types/react-dom @babel/preset-typescript

c. Create the Babel configuration file .babelrc and paste the following code:

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript"
  ]
}

d. Create the TypeScript configuration file tsconfig.json and paste the following code:

{
  "compilerOptions": {
    // Emit Configuration
    "noEmit": true,

    // Type Checking Configuration
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "exactOptionalPropertyTypes": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitThis": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitOverride": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    // Strict Rules - v4.8
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "useUnknownInCatchVariables": true,

    // Modules Configuration
    "baseUrl": "./",
    "module": "ES2022",
    "moduleResolution": "node",

    // Language and Environment Configuration
    "target": "ES2022",
    "jsx": "react-jsx",

    // JavaScript Support Configuration
    "allowJs": true,
    "checkJs": true,

    // Interop Constraints Configuration
    "esModuleInterop": true,
    "isolatedModules": true
  },
  "include": ["src/**/**/*"],
  "exclude": ["node_modules"]
}

e. Create the webpack.config.js file and paste the following code:

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

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  output: {
    filename: "bundle.[fullhash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        exclude: /node_modules/,
        use: ["file-loader"]
      }, 
    ],
  },
};

f. Create a folder called "src" with the following files:

App.tsx

const App = () => (
  <div>
    <h1>Hello, World!</h1>
  </div>
);

export default App;

index.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const rootElement = document.querySelector('#root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = createRoot(rootElement);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

f. Creating the tscheck, build, and start scripts
In the package.json file, add these lines to your scripts section:

"tscheck": "tsc",
"build": "webpack --config webpack.config.js --mode production",
"start": "webpack serve --open"

Now that we have all of the above set-up, the quick set-up should be able to run. If you have any questions or would like to learn more on what is happening above, visit my previous article here.

Implementing ESLint and Prettier

Background Information:

As a developer, it is always good practice to ask ourselves, why do I need to do this? What use cases would I need to implement this? Is the implementation worth the work compared to the alternative? These are the questions that we are going to be answering.

1. ESLint vs. Prettier

First things first, "ESlint vs Prettier" should really always be said: ESLint and Prettier. This is because the jobs between these two tools are meant to accomplish different tasks. ESLint will lint our code while Prettier will simply format our code.

Linting: Is the way to enforce our code to adhere to certain coding practices. Some examples would include ensuring all console.logs() and un-used variables are deleted while more specific rules would be like not allowing the use of continue statements.

Formatting: We only care about how the code visually looks, does not involve catching errors or coding rules. An example would be ensuring that all lines of code are 100 in length and then auto-formatting the code to adhere to this rule.

Now that we have a clearer definition, ESLint will be used as a linter while Prettier will be taking care of our formatting.

2. Why ESLint and Prettier?

Why would we ever need tools like ESLint and Prettier? As an individual developer, these tools would be in the "nice to haves" categories and are not "100%" necessary. This is because individual developers working on a project can adhere to their own coding rules and styles.

Though what happens when we now have a team? Maybe multiple teams of developers all working together and each developer having their own coding rules and styling? This can quickly complicate our projects as each pull request (PRs) can have a lot more "un-needed" styling changes and code rules that will then be debated. This makes reviewing PRs a bit more overwhelming than needed and takes time away from really constructively critiquing the actual needed change. This is where ESLint and Prettier come into play.

ESLint will ensure each developer is adhering to certain coding requirements that a team agrees on. Prettier will then ensure that every file will have the same "look and feel" across the project. These two tools will make sure that the team(s) will have better unity and any PRs will have have minimal changes. All of this fulfills a need in having a consistent, front-end project.

If you have any additional benefits of using ESLint and Prettier leave a comment!💬

3. Implementation Choice

Before starting our set-up, there are three different ways that I know on how we can utilize ESLint; all depending on if we want either Babel, Webpack, or NPM to be linting our code. In this article, we are going to have our ESLint not depend on any other tool other than having NPM run our linting.

My personal reason in organizing the ESLint like this is to have a separation of concerns. I believe having the ability to have our tools (and code) decoupled creates less dependencies and thus, creates less hassle for whenever things eventually break from either updates, configuration changes, or changes to the code itself.

Since we are going to implementing ESLint like with NPM, we will have to add another line in our scripting process.

1. Installing ESLint and Prettier

In order to install ESLint, we need to include the following in our dev dependencies:

npm install --save-dev --save-exact eslint eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslint
- Is a tool to identify and report on code patterns.
eslint-plugin-react
- React specific linting rules for ESLint .
eslint-plugin-react-hooks
- Enforces the Rules of Hooks, is a part of the Hooks API for React.
eslint-config-prettier
- Turns off ESLint rules that would conflict with Prettier's formatting.
prettier
- An opinionated code formatter. Used to enforce a consistent style.
@typescript-eslint/parser
- ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
@typescript-eslint/eslint-plugin
- ESLint plugin which provides lint rules for TypeScript codebases.

2. Configuring ESLint

In order to configure ESLint, we need to create the .eslintrc.json file in the root directory our current project.

Background: Within this file, we can implement different plugins and extensions for ESLint. Some of the basic fields that are in the configuration files are as follows:

env
- Environments your script is designed to run in.
extends
- Allows ESLint to use a pre-existing ESLint configuration and will make overrides.
parser
- Converts code to an Abstract Syntax Tree (AST).
parserOptions
- Tells ESLint what version of JavaScript we are targeting.
plugins
- Are additional rules that can be used in order configure your ESLint.
settings
- Is shared settings that specify information that should be consistent across all of its rules.
rules
- Where we can configure the different rules our plugins and ESLint has to offer.

Setting up .eslintrc.json: Here is my .eslintrc.json that I use, if you have any suggestions please drop a comment!

{
  "env": {
    "browser": true,
    "es2022": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "settings": {
    "react": {
      "version": "999.999.999"
    }
  },
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

Here are some explanations over a few configurations:

env
- We are going to add support for the es6 global variables by setting es2022 to true.
extends
- Here we utilize the recommended ESLint and plugin rules. We need to make sure to place Prettier last in order to override any rules that would cause conflict between Prettier and the other packages.
parser
- We are selecting the @typescript-eslint/parser since our project has TypeScript.
parserOptions
- Since we are utilizing React, we are wanting to turn on jsx. We are also going to add support for the latest ecma syntax by setting ecmaVersion to latest.
plugins
- We are needing to modify some of the rules for these plugins which is why we included them here.
settings
- We are wanting to setting the react version here in order to avoid the react warning of not having a version specified. We can place an exact version of react but for now we can leave it as the value shown.
rules
- Since we are using the jsx transform, we can disable the specific rules listed.

Lastly, for setting up our .eslintrc.json we need to create a file similar to .gitignore called .eslintignore. This works very much the same with the main difference of telling ESLint which files we should not check. We will be adding several files for our current project:

node_modules
dist
package-lock.json
webpack.config.js

We do this in order to help speed up the process of linting our project. Add or take away depending on your needs!

3. Configuring Prettier

Now we can create a .prettierrc.json. This is where we will put our code formatting rules that prettier will run and adjust to!

Here is my formatting rules, leave a comment as to what rules you guys like to use!

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

4. Configuring VSCode

With the VSCode IDE, we have the following settings options available for the user to configure:

User Settings
- Settings that will apply globally to any instance of VSCode on your machine.
Workspace Settings
- Settings that are set inside your project that will be applied every time your specific project is open

We will be creating a workspace settings in order to be able to share, and have a coherent environment across teams when sharing our project. The following is what I have in my settings.json:

{
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.formatOnPaste": false, // required
  "editor.formatOnType": false, // required
  "editor.formatOnSave": true, // optional
  "editor.formatOnSaveMode": "file", // required to format on save
  "files.autoSave": "onFocusChange" // optional but recommended
}

With these settings, we will now be able to to use prettier everytime we save.

5. Configuring package.json

Now in the package.json file, we need to add this line to your scripts section:

"lint": "eslint .",
"lint:fix": "eslint . --fix",

This will lint all the code. And will also try to auto-fix any of the linting errors that are brought up.

View everything together in Github.

If you found this helpful or just enjoyed reading the article, consider grabbing me a cup of coffee.

Setting up React, Babel, Webpack, & TypeScript Without Create-React-App👾

Camilo Rincon — Sun, 11 Sep 2022 18:47:58 +0000

Today, we will be looking at how to integrate TypeScript into our existing, manually set-up project of React, Babel, and Webpack that has been done without the create-react-app command.

This article is the second part of a series on how to set up a front-end environment. Of course, this article will have a quick, and brief set-up guide. If you would like a more in-depth guide on how to create a project without create-react-app, visit the previous article here.

Versions Being Used:

React 18
Babel 7
Webpack 5
TypeScript 4

Quick Set-Up

In order to quickly initialize the project, run the following commands:

a. Create package.json file

npm init -y

b. Install React, Babel, Webpack, and other needed packages

npm install --save-dev --save-exact react react-dom @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader file-loader

c. Make sure to create a file called .babelrc and paste the following code:

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

d. Finally, at the root of the project, create a webpack.config.js file and write the following:

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

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "bundle.[fullhash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        exclude: /node_modules/,
        use: ["file-loader"]
      }, 
    ],
  },
};

e. Create a folder called "src" with the following files:

App.js

const App = () => (
  <div>
    <h1>Hello, World!</h1>
  </div>
);

export default App;

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const rootElement = document.querySelector('#root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

f. Creating start and build scripts
Now, in the package.json file, add these lines to your scripts section:

"start": "webpack serve --open",
"build": "webpack --config webpack.config.js --mode production"

Now that we have all of the above set-up, this quick set-up should be able to run. If you have any questions or would like to learn more on what is going on above, visit my previous article here.

Implementing TypeScript

Background Information

Before installing and configuring TypeScript into our application, let us first understand how we plan on integrating and using both TypeScript and Babel together.

Babel: We will be utilizing Babel for transpiling our code only. Furthermore, since we are using Babel 7 we do not need to install the ts-loader since Babel 7 understands TypeScript with the babel-loader; and the additional plugins & preset we will install and set in the .babelrc will add the remaining functionality.

TypeScript: We will be utilizing TypeScript for type-checking only!

Having these two technologies focus on one task we are able to clearly define the different roles each will accomplish. Making the configuration side of things more maintainable. This means that we will have to type-check then transpile the code.

1. Installing TypeScript

In order to install TypeScript, we have to install the following packages:

npm install --save-dev --save-exact typescript @types/react @types/react-dom @babel/preset-typescript

typescript
- Adds optional types to JavaScript.
@types/react
- Type definitions for react.
@types/react-dom
- Type definitions for react-dom.
@babel/preset-typescript
- Allows Babel to understand typescript. Once we have these packages installed, we need to begin modifying our configurations and file names.

2. Modifying Webpack.config.js

We need to make some modifications to the Webpack configuration file. The first modification is pointing the entry path to a .tsx file like so:

entry: "./src/index.js",

entry: "./src/index.tsx",

Then, we need change the rule using the babel-loader under module to:

      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },

This change is to help webpack resolve:

plain JavaScript - js
JavaScript with React enabled - jsx
TypeScript with JavaScript - ts
TypeScript with React enabled - tsx

The final webpack.config.js should look like the following:

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

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  output: {
    filename: "bundle.[fullhash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        exclude: /node_modules/,
        use: ["file-loader"]
      }, 
    ],
  },
};

3. Changing File Names

Time to change all the file extensions from .js to .tsx. This would be two of the following files:

App.tsx
index.tsx

With these file names changed, we can now move on to configure TypeScript.

4. Configuring TypeScript

In order to configure TypeScript, we need to create a tsconfig.json file at the root of our project.

Background Information: Within this file, we can implement different rules to run at compile time. You can learn more about tsconfig.json here.

Some of the basic fields are called the "Root Fields":

Files
- List the files to include in the program. An error will occur if any of the listed files are not found.
Extends
- A string that contains a path to another configuration file to inherit.
Include
- Will specify an array of filenames or patterns that will be included within the program.
Exclude
- Will specify an array of filenames or patterns to exclude from the program.
References
- A way to structure TypeScript programs into smaller pieces. This will help improve the following: build, editor interaction times, enforce logical separation, etc.

Setting Up tsconfig.json: Since we are only using TypeScript as a type-checker, we make sure the following configurations are set in order for both Babel to work properly:

{
  "compilerOptions": {
    // Emit Configuration
    "noEmit": true,

    // Modules Configuration
    "module": "ES2022",

    // Language and Environment Configuration
    "target": "ES2022",
    "jsx": "react-jsx",

    // Interop Constraints Configuration
    "esModuleInterop": true,
  }
...
}

Explanation:

noEmit: true
- Is set to true because we do not want to emit any files since Babel will be in charge of transpiling our code.
module: ES2022 and target: ES2022
- We are are not transpiling our code using TypeScript. This means that we do not need to worry about browser compatibility in this area of configuration.
esModuleInterop: true
- Is set in order to have default import in TypeScript since this is allowed within Babel.
jsx: react-jsx
- Will allow for React's JSX transform.

Here is my tsconfig.json that I use, if you have any suggestions please drop a comment!

{
  "compilerOptions": {
    // Emit Configuration
    "noEmit": true,

    // Type Checking Configuration
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "exactOptionalPropertyTypes": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitThis": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitOverride": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    // Strict Rules - v4.8
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "useUnknownInCatchVariables": true,

    // Modules Configuration
    "baseUrl": "./",
    "module": "ES2022",
    "moduleResolution": "node",

    // Language and Environment Configuration
    "target": "ES2022",
    "jsx": "react-jsx",

    // JavaScript Support Configuration
    "allowJs": true,
    "checkJs": true,

    // Interop Constraints Configuration
    "esModuleInterop": true,
    "isolatedModules": true
  },
  "include": ["src/**/**/*"],
  "exclude": ["node_modules"]
}

Here are some explanation over a few configurations:

compilerOptions
- Covers how the language should work.
- If upgrading TypeScript, the strict rule will add any additional rules automatically. For personal reasons, I like to keep the "magic" of things happening automatically to a minimum which is why I excluded from using the strict: true.
outDir
- Where the compiler will emit compiled JavaScript files.
- Since we are using TypeScript as just a type-checker we will not emit any files, hence the noEmit: true.
module
- Defines output module resolution system that will be used. This is based on what your JavaScript engine is capable of parsing.
target
- Changes which JavaScript features are down-leveled and which are left intact.

You can find a complete list of all configurations for tsconfig.json here.

5. Configuring TypeScript with Babel

In order to configure TypeScript with Babel, we have to go to the .babelrc file and make sure it contains the following:

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript"
  ]
}

6. Run Type Checking

Now in the package.json file, add this line to your scripts section:

"tscheck": "tsc"

This will type check all of the files that were selected in the tsconfig.json file.

View everything together in Github.

If you found this helpful or just enjoyed reading the article, consider grabbing me a cup of coffee.

Setting Up React, Babel, & Webpack Without Create-React-App🚀

Camilo Rincon — Sat, 03 Sep 2022 22:52:00 +0000

First things first, why would anyone want to create a react application manually when we have one line installations like:

npx create-react-app <application-name>

Well, as there is nothing wrong with setting up a react application utilizing this method. We can can learn a lot by seeing what goes on under the hood by doing everything manually. Furthermore, we get the added benefit of having more control over the different processes of loading your front-end onto a browser.

Versions Being Used:

React 18
Babel 7
Webpack 5

Pre-Setup

Background Information: In order to get started we need to begin by installing a package manager. A package manager is a tool developers utilize in order to manage the various software packages. This ranges from installation, upgrading, removing, and dependency resolution. One of the most popular options we will look at is NPM.

1. Node Version Manager (NVM) Installation

We will first be installing a node version manager in order to easily keep track, and manage different versions of node. Since the focus of this article is not about package managers, please follow this article about how to download here.

2. Node Installation

Now that you have NVM installed, you can run the following script:

nvm install <Node Version>

or install the latest version of Node:

nvm install node

finally, to use the specific node version run:

nvm use <Node Version>

and that is it! You should be good to get officially started.

Setting up the project

1. Initializing package.json

Why use package.json: We use the package.json in order for npm (or yarn) to identify your project and understand how to handle the project's dependencies along with:

Start your project
Run scripts
Install dependencies
Publish to the NPM registry

Initializing package.json: Now that you know a little more about the importance of having the package.json, run either of the following commands to initialize the file:

npm init

npm init -y

the difference between the two is that the -y will, by default, say yes to every prompted question. The following questions will be presented if you decide to omit the -y:

package name: (package-name-here)
version: (version)
description: (description of package)
entry point: (file used to start the project)
test command: (script to run test on project)
git repository: (where source code is located)
keywords: (indexed by the NPM registry to find packages when searched)
author: (author of package)
license: (kind of license applied) (typically MIT or ISC)

Learn more about package.json here.

2. Initializing React

Run the following command in the terminal:

npm install --save-dev --save-exact react react-dom

Packages Explained:

react
- Will only have the needed functionality in order to define your React components.
react-dom
- Serves as the entry point to the DOM and server renders for React.

After the command is run, the following will be created:

node_modules
- Used to hold all downloaded dependencies from npm.
package-lock.json
- Used to keep track of exact version of every package installed along with the dependency tree of every package.

*** NOTE: the --save-dev will save these packages as a dev-dependency. --save-exact will save the exact package. ***

3. Initializing Babel

Why use babel: Babel is a JavaScript compiler that converts modern JavaScript into code that can be backwards compatible with older versions of web browsers and environments.

Now that you understand the need for babel, run the following command:

npm install --save-dev --save-exact @babel/core @babel/preset-env @babel/preset-react babel-loader

@babel/core
- Babel compiler core.
@babel/preset-env
- Babel preset for each environment.
@babel/preset-react
- Babel preset for all React plugins.
babel-loader
- Allows transpiling JavaScript files using Babel and Webpack.

Now, create a configuration file called .babelrc and paste the following code:

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

These presets is to activate the package when processing this configuration file.

We are also going to be utilizing React's JSX transform from React 17. In order to achieve this we have to set the "runtime" to "automatic". In Babel 8 the default runtime will be set to automatic.

4. Initializing Webpack (and other basic needs)

Now it is time to install webpack and any other necessary packages. Run this line in the terminal:

npm install --save-dev --save-exact webpack webpack-cli webpack-dev-server

webpack
- Module bundler with the main purpose to bundle JavaScript files for the browser.
webpack-cli
- Command Line Interface (to execute webpack terminal lines).
webpack-dev-server
- Utilize webpack with a development server to provide live reloading.

Now, run the following script:

npm install --save-dev --save-exact html-webpack-plugin style-loader css-loader file-loader

html-webpack-plugin
- Simplifies creation of HTML files to serve your bundles.
- This plugin is useful when webpack bundles include a hash in the file name. Learn more about the importance of hash here.
file-loader
- Resolves import/require() on a file into a url and emits the file into the output directory.
css-loader
- Interprets import and url like import/require and will resolve them.
style-loader
- Inject CSS into the DOM.

Finally, at the root of the project, create a webpack.config.js file and write the following:

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

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "bundle.[fullhash].js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"]
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        exclude: /node_modules/,
        use: ["file-loader"]
      }
    ]
  }
}

Entry:
- Indicates which module webpack should use to begin building out its internal dependency graph. From that entry point, webpack will figure out which other modules and libraries that entry point is dependent on. Learn more about Entry here.
Output:
- Tells webpack where to emit the bundles it creates and how to name these files. Learn more about Output here.
Plugins:
- Plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment. Learn more about Plugins here.
Resolve:
- Changes how the modules are resolved. Learn more about Resolve here.
Modules:
- This field can also be called "Loaders" and allows webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph. This is done because webpack only understands JavaScript and JSON files. Learn more about Loaders here.

Time to Program!

1. Create Hello, World!

Create a folder called "src" with the following files:

App.js

const App = () => (
  <div>
    <h1>Hello, World!</h1>
  </div>
);

export default App;

index.js

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const rootElement = document.querySelector('#root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = createRoot(rootElement);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2. Run program

Now, in the package.json file, add these lines to your scripts section:

"start": "webpack serve --open",
"build": "webpack --config webpack.config.js --mode production"

Command line explained:

npm run start
- Serve will run the webpack-dev-server
- --open will allow webpack to launch browser automatically
npm run build
- --config webpack.config.js provide path to webpack configuration file
- --mode production defines mode to pass to webpack

Now in the terminal just run npm run start and you will see your application run!

Bonus!

Script Commands: When running the command npm run build webpack will build the project and create a "dist" folder. This folder will have all of the information that will be sent to the browser for production mode.

Package Management: Every package is currently saved as a dev-dependency. This is done because it is not necessary to send these packages to the client-side since we are going to be transpiling our code to vanilla JavaScript with Babel. The install commands all come with --save-exact in order to keep control of all package versions.

View everything together in Github.

If you found this helpful or just enjoyed reading the article, consider grabbing me a cup of coffee.