
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
Tienes que actualizar el tutorial, porque laravel ahora usa el paquete laravel/ui para usar diferentes frameworks en el front end.
Bueno
Hola Artyom, te dejo información y para los otros que quieran usarlo en Laravel 7.
En lugar de usar:
php artisan preset react
Usen:
composer require laravel/ui
php artisan ui react
gracias