Step by Step react-typescript-babel-webpack project installation

5 min readDec 30, 2024

Hi everyone;

This article is not complete tutorial about react, typescript,babel and webpack. Maybe this article helps you for creating skeleton of your project.

In this article, I tell you about

Create react,typescript,babel,webpack project steps
Typescript configuration definitations
Babel configuration definitations
Webpack configuration definitations

OK. Let’s start

You had NodeJs installation before and you have to choose an IDE (like VSCode)

Steps:

Create a folder
Inside folder,open a terminal

yarn init

npm init

Definitation : You use this command to set up a new or existing npm package. This command is need to create package.json file

3. Create src and build folder

4. In root folder, create index.html file.

Add below code block

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React,Typescript,Babel,Webpack App</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

5. Install React and ReactDOM (Terminal)

yarn add react react-dom

npm install react react-dom

Definitation : These command installs react and react-dom libs and adds them into package.json

6. Create index.tsx file under src folder

Note : Later I will write code

7.Install Typescript (Terminal)

yarn add -D typescript @types/react @types/react-dom

npm install --save typescript @types/react @types/react-dom

8. Create tsconfig.json file and edit it

{
     "compilerOptions": {
       "target": "ES6",
       "module": "ESNext",
       "moduleResolution":,
       "lib": [
         "DOM",
         "ESNext"
       ] ,
       "jsx": "preserve",
       "noEmit": true ,
       "isolatedModules": true ,
       "esModuleInterop": true ,
       "strict": true ,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true ,
       "resolveJsonModule": true,
       "allowJs": true ,
       "checkJs": true ,
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules", "build"] 
   }

Parameter Definitations :

“include” : Unless you define, all of files/resource etc adds to product’s source. I only want the files under that src folder to be included.
“exclude”: These files don’t include to product’s source. I don’t want to include node_modules and build files.
“target” : While typescript are compaling, you specify that typescript use which ECMAScript version. For example ‘ES5’, ‘ES2015’, ‘ES2016’, ‘ES2017’, ‘ES2018’, ‘ES2019’, ‘ES2020’, or ‘ESNEXT’
“module”: You specify that typescript use which transpiler code generation system. For example ‘none’, ‘commonjs’, ‘amd’, ‘system’, ‘umd’, ‘es2015’, ‘es2020’, or ‘ESNext’
“moduleResolution”: Specify module resolution strategy. How to resolve dependencies. ‘node’ (Node.js)
“lib” : While compaling, which libs are included to use EcmaScript classes in source.

For example :
DOM -> to use querySelector like document.querySelector(“xxx”)
Note : Unless you use this param, typescript only use “target” definitation.

“jsx” : Specify transpiler JSX code generation

For example : ‘preserve’, ‘react-native’, ‘react’ or ‘react-jsx’
In general use ‘preserve’, later we use Babel to transpiler.

“noemit” : If you set false, generate JS files or don’t.
“isolatedModules”: Setting the isolatedModules flag tells TypeScript to warn you if you write certain code that can’t be correctly interpreted by a single-file transpilation process.
“esModuleInterop” : With flag esModuleInterop we can import CommonJS modules in compliance with ES6 modules.
“strict” : Using type checking in compile time.

Set true for other parameters like noImplicitAny, noImplicitThis, alwaysStrict, strictBindCallApply, strictNullChecks, strictFunctionTypes, strictPropertyInitialization.
If you want to set false for strict parameter and you can add other parameters like “noImplicitAny”: true

“skipLibCheck” : In compile time, not need to type check all dependencies in package.json
“forceConsistentCasingInFileNames” : When this option is set, TypeScript will issue an error if a program tries to include a file by a casing different from the casing on disk.
“resolveJsonModule”: You don’t need require code to call json file

Like :
import config from “./config.json”

“allowJs” : Allow JavaScript files to be imported inside your project, instead of just .ts and .tsx files.
“checkJs” : Works in tandem with allowJs. When checkJs is enabled then errors are reported in JavaScript files.

9. Install Babel (Terminal)

yarn add --dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript @babel/preset-react

npm install @babel/core @babel/cli @babel/preset-env @babel/preset-typescript @babel/preset-react

Note: if you use asyn/await, you have to install @babel/runtime @babel/plugin-transform-runtime libs

10. Create .babelrc files in root and edit it

{
     "presets": [
         "@babel/preset-env",
         [
             "@babel/preset-react",
             {
                 "runtime": "automatic"
             }
         ],
         "@babel/preset-typescript"
     ],
     "plugins": [
         [
             "@babel/plugin-transform-runtime",
             {
                 "regenerator": true
             }
         ]
     ]
 }

First run plugins. First written plugin first runs.

Preset has lots of plugins. You can define presets instead of writing a lot of plugins. In presets, last written preset first runs.

11. Install Webpack

yarn add --dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader html-webpack-plugin clean-webpack-plugin

npm install --dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader html-webpack-plugin clean-webpack-plugin

12. Create webpack.config.js in root folder and edit it

const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');

 module.exports = {
     entry: path.resolve(__dirname, 'src', 'index.tsx'),
     output: {
         path: path.resolve(__dirname, 'dist'),
         filename: 'bundle.js',
     },
     mode: 'development',
     module: {
         rules: [
             {
                 test: /\.[jt]sx?$/,
                 use: ['babel-loader'],
                 exclude: /node_modules/,
             },
             {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader'],
             },
             {
                 test: /\.scss$/,
                 use: ['style-loader', 'css-loader', 'sass-loader'],
             },
             {
                 test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                 type: 'asset/resource',
             },
             {
                 test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                 type: 'asset/inline',
             },
         ],
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.js', '.jsx'],
     },
     plugins: [
         new HtmlWebpackPlugin({
             template: path.resolve(__dirname, './index.html'),
         }),
         new CleanWebpackPlugin(),
     ],
     devServer: {
         static: path.join(__dirname, './src'),
         port: 3001,
         hot: 'only',
         compress: true,
         open: true,
     },
 };

Definitation :

Webpack is NodeJs based module bundler. Webpack works on multi resource folder. It does some operations (like transpile, concat, minify etc) over folder.

Parameter definitation :

entry : Entry is a property that indicates webpack which module(s) / file(s) it should use to begin building out the internal dependency graph(s) of the project / application. Entry file is index.tsx
output: Configuring the output configuration options tells webpack how to write the compiled files to disk. dist folder
mode: Configure development or production
ruleset :

— Loaders : Webpack only processes js and json files. If you want to process other file types, you have to use Loaders

— Plugins : Plugins are the backbone of webpack. Webpack itself is built on the same plugin system that you use in your webpack configuration.

As a asset management, bundle minimization, optimization tasks.

13. Edit package.json file

Add webpack scripts

{
    "name": "xxxx",
    "version": "1.0.0",
    "description": "xxxxxxx",
    "main": "index.js",
    "scripts": {
      "dev": "webpack --mode=development",
      "start": "webpack-dev-server --mode=development",
      "build": "webpack --mode=production"
    },
    "author": "yyyyyyy",
    "license": "ISC",
    "dependencies": {

       ...

    }

14. Edit index.tsx file under src folder

import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'

 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 )

15. Create App.tsx file under src folder

export default function App() {
   return (
     
       <div>
         <p>React Typescript Babel Webpack Example</p>
       </div>
   )
 }

16. Build project with Webpack (Terminal)

npm run dev

These command create build.js file under dist folder.

You check this file (build.js), you can see non-optimize context.File has comment line. Becuse we run webpack on development mode

17. Run project (Terminal)

npm run start

Visit : http://localhost:3001/

Your project is ready.

I installed before webpack-dev-server. This dependency create local server.

npm run start script runs “webpack-dev-server — mode=development” (package.json)

18. Build for production (Terminal)

npm run build

These command create build.js file under dist folder.

You check this file (build.js), you can see full optimize and minify context. Because we run webpack on production mode.

I hope it was useful. I said before, this article is not full tutorial but maybe it helps you for creating skeleton of your project

Thanx for reading

Step by Step react-typescript-babel-webpack project installation

Written by Serdar A.

No responses yet