2

How to install ReactJs in Laravel

 1 year ago
source link: https://www.laravelcode.com/post/how-to-install-reactjs-in-laravel
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How to install ReactJs in Laravel

  70238 views

  2 years ago

Laravel React

If you optate to build a React application with Laravel, then the first and foremost thing is you must ken how to install React in Laravel 7. We will utilize laravel/ui Package to install react in laravel with Bootstrap 4.
If you are a neophyte in React development, then you must check out our detailed tutorial: Engender React MERN Stack CRUD Web Application.

React is an open-source JavaScript library for developing user interfaces. It is managed by Facebook and a community of individual developers and organisations. React provides a base in the app development for single-page or mobile applications.

Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller architectural pattern and based on Symfony.

Install Laravel Project

To install React in Laravel, We first need to install a brand new Laravel project

composer create-project laravel/laravel --prefer-dist laravel-react-js

Get into the Laravel project.

cd laravel-react-js

Install laravel/ui

Laravel/UI is an official package that offers a login and registration user interface scaffolding for React, Vue and jQuery in Laravel project.

Run below command to install laravel ui composer package.

composer require laravel/ui

Install React in Laravel

We have installed the composer UI package, and now we have to run the given below command to install the React in Laravel.

php artisan ui react

Install Required Packages

I assume that you have the Node and NPM installed on your development machine.

You can check the Node and NPM installation using the below command.

# for node
node -v

# for npm
npm -v

The following command install all the javascript packages which are required for our project.

npm install

The above command creates a node_modules folder and automatically installed all the packages that are registered in the package.json file.

Set Up React Component in Laravel 7

If you run the laravel app, it won’t load and display the React component in the Laravel view. So, i will create a React component inside the resource/js/User.js and paste the following code in it.

We have also defined a ROOT DOM element 'user' inside the React component. It will fetch any element into the browser’s document object model.

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

function User() {
    return (
        <div className="container mt-5">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card text-center">
                        <div className="card-header"><h2>React Component in Laravel</h2></div>

                        <div className="card-body">I'm tiny React component in Laravel app!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default User;

// DOM element
if (document.getElementById('user')) {
    ReactDOM.render(<User />, document.getElementById('user'));
}

We have to register the React component inside the resources/js/app.js file.

require('./bootstrap');

 // Register React components
require('./components/Example');
require('./components/User');

In this step, we will add the compiled CSS path, React Root DOM and the compiled JavaScript files inside the Laravel layout. The div with the id="user" is the same id that we have declared in the document.getElementById('user').

Place the given below code inside the views/welcome.blade.php template.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>

    <!-- React root DOM -->
    <div id="user">
    </div>

    <!-- React JS -->
    <script src="{{ asset('js/app.js') }}" defer></script>

</body>
</html>

Finally, we have to run the command to compile the JavaScript and CSS files for Laravel and React.js project.

npm run watch

Your code has been complied, now run the command to view your app in the browser.

php artisan serve
Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK