Adding Babel

Explore how to install Babel and its necessary plugins to convert React and TypeScript code to JavaScript. Understand the Babel configuration using .babelrc to ensure smooth project setup before adding linting and formatting.

We'll cover the following...

- Installing Babel
- Configuring Babel
- Wrap up

Installing Babel

As mentioned in the last lesson, our project is going to use Babel to convert our React and TypeScript code to JavaScript. Let’s install Babel with the necessary plugins as a development dependency:

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

...

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Adding Babel

Installing Babel