Basic React App Setup with TypeScript, Babel, Webpack and Material UI [Installation]

In this post, I’ll walk you through how to setup a basic ReactJS Application with the bare minimum things required to start with for newbies, like me. Basically I’ll be sharing with you my experience with setting up my first ReactJS App.

I started just 2 weeks back. Yet to learn a lot. But I felt like sharing the procedure I followed. I won’t go in-depth in why or which is the best way. Its just a basic setup. You can the make changes as per your requirements. I’ll try to keep things as simple as possible.

React Installation with TypeScript:

I’ll be using yarn throughout. You can use npm.

To install, go to your desired directory and run:

yarn create react-app example-react-app — typescript

Next we will install babel and its dependent packages:

yarn add @babel/core babel-loader @babel/preset-react @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread --save-dev

Now add a file in the root of the project, .babelrc and and use the packages we have installed. It should look like this:

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

Now lets add webpack and webpack-cli to our application.

Run the following commands:

yarn add webpack webpack-cli --save-dev
yarn add html-webpack-plugin --save-dev
yarn add css-loader style-loader --save-dev

We have installed Webpack and Webpack-CLI. Now we need to add a Webpack Configuration file to our project.

It should look like this:

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

module.exports = {
  // webpack will take the files from ./src/index
  entry: './src/index',
  // and output it into /dist as bundle.js
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  // adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      // we use babel-loader to load our jsx and tsx files
    {
      test: /\.(ts|js)x?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      },
    },
    // css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
      exclude: /node_modules/,
      use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
    }
  ]
},
devServer: {
  historyApiFallback: true,
},
plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    favicon: './public/favicon.ico'
  })
 ]
};

After adding the webpack configuration, change the scripts part in your package.json file:

"scripts": {
  "bundle": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --mode development --open --hot",
  "build": "webpack --mode production"
},

One more thing left to do. We don’t want to run the app again after we make any changes. For that we need to add the webpack-dev-server

yarn add webpack-dev-server --save-dev

Now you run your app.

yarn start

If you encounter an error ::

ERROR in ./src/logo.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

You just need to install a package, file-loader to handle image types. This will solve your issue/error.

yarn add file-loader

Installation: Material UI for React

To add material-ui to your project, run:

yarn add @material-ui/core

After you install the material-UI package, add the following in the index.html file in the head section:

//Any font of your choice
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

If you want to use Material SVG Icons, then install:

yarn add @material-ui/icons

Reference:

1. ReactJS Official Documentation
2. ReactJS Tutorial: Basic Concepts — TutorialsPoint
3. Material-UI Official Documentation