TheLazy.Dev
Portfolio GitHub

Blog

laravelreact |laravelmix |reacttypescript

How to install & use ReactJS in TypeScript with Laravel 8 & Laravel Mix 6

sadhakbj

Bijaya Prasad Kuikel

Posted on February 22, 2021

How to install & use ReactJS in TypeScript with Laravel 8 & Laravel Mix 6

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:

laravel new larareacts
Enter fullscreen mode Exit fullscreen mode

Install typescript globally on your local machine:

yarn global add typescript
Enter fullscreen mode Exit fullscreen mode

or

npm install -g typescript
Enter fullscreen mode Exit fullscreen mode

Now let’s install React & react -dom with their types:

yarn add react react-dom @types/react @types/react-dom
Enter fullscreen mode Exit fullscreen mode

Also we need to install ts-loader and typescript as dev dependencies:

yarn add ts-loader typescript @babel/preset-react --dev
Enter fullscreen mode Exit fullscreen mode

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:

const mix = require("laravel-mix");
mix.ts("resources/js/app.tsx", "public/js").react();
Enter fullscreen mode Exit fullscreen mode

Now let’s create a index file inside: resources/js named index.tsx :

import React from "react";
import { render } from "react-dom";
import App from "./components/App";
render(<App />, document.getElementById("app"));
Enter fullscreen mode Exit fullscreen mode

We need to create a root App component inside resources/js/components folder with the following contents:

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;
Enter fullscreen mode Exit fullscreen mode

Also within our welcome.blade.php update the content to have something like this:

<body>
  <div id="app"></div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

Compile the assets with the command:

yarn dev
Enter fullscreen mode Exit fullscreen mode

or

npm run dev
Enter fullscreen mode Exit fullscreen mode

Run Laravel server:

php artisan serve
Enter fullscreen mode Exit fullscreen mode

and access: http://localhost:8000

YOU CAN WATCH MY VIDEO ON INSTALLING REACT WITH TYPESCRIPT FROM SCRATCH:

YouTube:

💖 💪 🙅 🚩
sadhakbj
Bijaya Prasad Kuikel

Posted on February 22, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to install & use ReactJS in TypeScript with Laravel 8 & Laravel Mix 6
laravelreact How to install & use ReactJS in TypeScript with Laravel 8 & Laravel Mix 6

February 22, 2021