Laravel + React js : Como crear el proyecto e integrar React

El contenido de post explicará cómo crear proyecto en laravel e instalar React y mostrar el componente React en la aplicación web.

Primero, descargue el instalador de Laravel usando Composer para crear proyecto.

composer create-project laravel/laravel proyecto-react

En cualquier aplicación Laravel nueva, puede usar el comando preset con la opción de React :

php artisan preset react

El comando ejecuta automáticamente eliminará todo lo relacionado con Vue.js y lo sustituirá por React.

Y después debemos instalar la librería para poder ejecutar React.js

npm install 

Recuerda que el componente de React esta en la carpeta de proyecto-react/resources/js/components y debemos crear un componente llamado «Componente.js»

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Componente extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Hola, Este es el componente.</div> 
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('componente')) {
    ReactDOM.render(<Componente />, document.getElementById('componente'));
}

Después agregar para importar el componente en el app.js en la carpeta proyecto-react/resources/js

require('./components/Componente');

Para compilar los componentes en React js

npm run watch-poll

Y por ultimo agregar un componente en la vista de welcome.blade.php

<div id="componente"></div>
<script src="{{ asset('js/app.js') }}" ></script>

Espero que haya aprendio y les sirva. Saludos