How to install & use ReactJS in TypeScript with Laravel 8 & Laravel Mix 6
Tags: laravelreact, laravelmix, reacttypescript
Published: 2021-02-22 06:55:43

---
title: How to install & use ReactJS in TypeScript with Laravel 8 & Laravel Mix 6
published: true
description: Learn how to use ReactJS with TypeScript using Laravel & Laravel Mix from scratch. Originally published on: https://sadhakbj.medium.com/how-to-setup-reactjs-in-typescript-with-laravel-8-laravel-mix-6-6bf8748befc7
tags: laravelReact, laravelMix, reactTypeScript
//cover_image: https://direct_url_to_image.jpg
---

Laravel is one of the most loved web frameworks available. It makes development so easier and fun. React is one of the most loved JavaScript Library because of it’s simplicity. In this article we will learn to implement Reactjs in TypeScript with Laravel Mix (Laravel Mix is a tool for compiling and optimizing assets in a Laravel app).

## Why TypeScript?

Many developers love TypeScript. The reason is it simplifies JavaScript code, as it adds the readability and writability and makes easier to debug. It gives us all the benefits of the modern JavaScript (ES6 & beyond) also can help us to avoid painful bugs that developers commonly run into when writing JavaScript by type checking the code.

### Let’s get started:

We can start by scaffolding a new laravel app using the command: 
```console
laravel new larareacts
```

Install typescript globally on your local machine:
```
yarn global add typescript
```
or 
```
npm install -g typescript
```

Now let’s install React & react -dom with their types:
```
yarn add react react-dom @types/react @types/react-dom
```

Also we need to install ts-loader and typescript as dev dependencies:
```
yarn add ts-loader typescript @babel/preset-react --dev

```
Now we need to generate tsconfig.json file using the following command:
`tsc --init --jsx react`

Now let’s update our webpack.mix.js file:
```js
const mix = require("laravel-mix");
mix.ts("resources/js/app.tsx", "public/js").react();
```
Now let’s create a index file inside: resources/js named index.tsx :
```js
import React from "react";
import { render } from "react-dom";
import App from "./components/App";
render(<App />, document.getElementById("app"));
```
We need to create a root App component inside resources/js/components folder with the following contents:
```ts
import React, { useState } from "react";

export interface IUser {
    name: string;
    age: number;
}
const App = () => {
    const [users, setUsers] = useState<IUser[]>([
        {
            name: "Bijaya",
            age: 25,
        },
        {
            name: "Ram",
            age: 25,
        },
    ]);

    return (
        <div>
            <h1>Users list</h1>
            <ul>
                {users.map((user: IUser) => {
                    return (
                        <li key={user.name}>
                            {user.name} is {user.age} years old
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default App;
```
Also within our welcome.blade.php update the content to have something like this:
```html
<body>
  <div id="app"></div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>
```
Compile the assets with the command: 
```console
yarn dev
```
or
```console
npm run dev
```
Run Laravel server: 
```console
php artisan serve
```
 and access: http://localhost:8000

### YOU CAN WATCH MY VIDEO ON INSTALLING REACT WITH TYPESCRIPT FROM SCRATCH:
YouTube: {% youtube kdQkITAtwZA %}