DEV Community

Bijaya Prasad Kuikel
Bijaya Prasad Kuikel

Posted on • Updated on

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:

Top comments (3)

Collapse
 
iamhabbeboy profile image
Azeez Abiodun Solomon

Great, really helpful. Thanks

Collapse
 
sadhakbj profile image
Bijaya Prasad Kuikel

Thank you.

Collapse
 
banchap profile image
banchap • Edited

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

probably it's typo and you mean app.tsx, not index.tsx?