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": […