Setup a React App using Webpack, Babel and TypeScript

    **@types/react:** contains type definations for React.

    **@types/react-dom:** contains type definations for React DOM.

2. We will need to let Babel know that we are including typescript in the project. So, let's go ahead and install the package **@babel/preset-typescript** as a dev dependency.

    ```


    npm install @babel/preset-typescript --save-dev

    Your **package.json** file should look something like this.

    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1614875520420/ugOzSsHPE.png" alt="package.json" />

4. We have all the required packages now. It's time to make some changes in our *webpack.config.js* and *.babelrc* file.

    Replace the below code with the one present in your **.babelrc** file.

    ```


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

As you can see, we are adding a new preset which is the *@babel/preset-typescript* to our already existing set of presets.

Time to make changes to our **webpack.config.js** file now. Copy the below code and replace the existing code which is present in the file.

```

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

module.exports = {
    entry: "./src/index.tsx",
    output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
    mode: process.env.NODE_ENV || "development",
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    devServer: { contentBase: path.join(__dirname, "src") },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: ["ts-loader"],
            },
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                use: ["file-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src", "index.html"),
        }),
    ],
};

5. Time to use TypeScript. But wait, we need something to specify that this directory is a TypeScript project, right! We also need to provide the compiler options in which our TypeScript files will be compiled. For that we will need a new file named as **tsconfig.json**.

    Let's go ahead and create that file.

    ```


    touch tsconfig.json

For now, remove the existing code from the **tsconfig.json** file and replace it with the below code.

```

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false,
        "jsx": "react-jsx"
    },
    "include": [
        "src"
    ]
}

    Let's go over the attributes now.

    **"target": "es5" =>** will compile es6 or above code to es5 so that it is compatible with browsers.

    **"include": [src]" =>** specifies that only the files in the *src* folder should be included.

    **"sourceMap": true =>** Generates corresponding ‘.map’ file so that it can be used in the production code for debugging.

    **"strict": true =>** enables a wide range of type checking behavior that results in stronger guarantees of program correctness.

    **"allowJs": true =>** allows JavaScript files to be imported inside your project, instead of just .ts and .tsx files.

    To learn more about the various attributes used in the file visit this [link](https://www.typescriptlang.org/tsconfig).

6. Last but not the least, its time to rename our JavaScript files (**.js**) to TypeScript - React (**.tsx**).

      <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1614876953079/38HnYETS7.png" alt="react-with-typescript" />

     *renamed index.js & App.js to index.tsx & App.tsx respectively*

7. Go ahead and run the below command to start the app.

    ```


    npm run start

The app will be served at **http://localhost:8080**.