Creating a Laravel 11 with React JS Web Page [Easy Tutorial]

Introduction to Laravel 11 and React JS

Laravel 11 and React JS are two pivotal technologies in contemporary web development, each bringing distinct advantages. Laravel is a PHP framework with an elegant syntax, comprehensive documentation, and a robust set of tools for backend development. It streamlines routing, authentication, and caching tasks, making it a developer’s go-to for building scalable and secure web applications. React JS is a front-end framework that allows us to change the components dynamically.

Requirements

• Composer Composer website
• Node JS Node.js — Run JavaScript Everywhere
• XAMPP optional or PHP > 8 XAMPP download | SourceForge.net or follow the tutorial here Change PHP Version in XAMPP [Easy tutorial]
  • MySQL or any database
• Visual Studio Code or any code editor Visual Studio Code – Code Editing. Redefined

Setting Up Your Development Environment

To start creating a Laravel 11 web page with React JS using Node JS, the first step is to set up your development environment properly. This involves installing several essential tools and configuring your project. Let’s begin by installing Node JS and NPM (Node Package Manager), which are prerequisites for this project. You can download Node JS from the official Node JS website. Follow the installation instructions specific to your operating system. NPM is in Node JS, so we won’t need extra installation.

PHP version

You will have to use PHP >8.0.0, to do this, you can install XAMPP or change its versions to PHP 8 Change PHP Version in XAMPP [Easy tutorial], open your file explorer under C:\xampp\htdocs, you can also open a terminal and run

cd C:\xampp\htdocs

Installing Laravel

Next, you’ll need Composer, a dependency manager for PHP, to install Laravel. Download Composer from the official Composer website and follow the installation guide. After this, you can create a new Laravel project. Open your terminal and run under C:\xampp\htdocs folder:

composer create-project --prefer-dist laravel/laravel laravel-project "11.*"

This command will install Laravel 11 in a directory named ‘laravel-project’. Navigate to this directory:

cd laravel-project

With Laravel set up, the next step is to integrate React into your Laravel project. Start by installing the required NPM packages:

composer require laravel/ui

Set up React js

To add react js we can execute one of the next commands:

php artisan ui react

or if we want to have an auth login with react js:

php artisan ui react --auth

Now, run npm install:

npm install 

Build the changes in react js locally:

npm run dev 

Ensure that these lines are added in your website in the blade.php of your website, you can place these under the layouts themes, these are the ones that render the react js in the web page:

@viteReactRefresh
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
@viteReactRefreshnpm

Next, create a React component. Make a new directory named components inside resources/js and add a file named Example.jsx. Here is a simple example of a React component:

import React from 'react';
import ReactDOM from 'react-dom/client';

function Example() {
    return (
        <>
        <div className="card-body">I'm an example component!</div>
        </>
    );
}

export default Example;

if (document.getElementById('example')) {
    const Index = ReactDOM.createRoot(document.getElementById("example"));

    Index.render(
        <React.StrictMode>
            <Example/>
        </React.StrictMode>
    )
}

Then add this component in C:\xampp\htdocs\laravel-project\resources\js\app.js

import './components/Example';

Finally, compile your assets by running:

npm run dev

Your development environment is now set up, and you are ready to start building your Laravel 11 web page with React JS. This setup ensures that React components are properly integrated and handled within the Laravel framework.

php artisan serve

This command will run your website in http://127.0.0.1:8000 but you can also specify the port

php artisan serve --port=8080

Pass props between Laravel and React JS

Add the next lines in your React Js component, here we are passing the var welcome message

export default Example;

if (document.getElementById('example')) {
    const Index = ReactDOM.createRoot(document.getElementById("example"));
    const props=Object.assign({},document.getElementById('example').dataset)
    Index.render(
        <React.StrictMode>
            <Example welcomemessage={props.welcomemessage}/>
        </React.StrictMode>
    )
}

and don’t forget to add the props in the class

function Example(props) {
    const welcomemessage=props.welcomemessage
    return (
              <div>Showing {welcomemessage}</div>
    );
}

From the Laravel blade, we will pass the value between double {{}}, here we can pass any var

<div id=”example” data-welcomemessage=”{{‘Hi welcome to the page’}}”></div>