REACT-LARAVEL

https://www.youtube.com/watch?v=-Ynn1dW9Hx0

https://www.youtube.com/watch?v=Yw08RQ_h1mk

https://www.youtube.com/watch?v=_tC3DsQe1Is&t=56s

REACT

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

1 junio, 2019 - por Artyom - 4 comentarios.

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>

2. Instala Node en tu ambiente

Si no lo tienes instalado ya, hazlo. Es una de esas herramientas que te ayudan a mejorar tu día a día sin tanto esfuerzo. Genera este comando en el root de tu proyecto.

npm install
ó
npm install --no-bin-links /* Si estas desarrollando en Windows */

3. Ve al archivo webpack.mix.js

/* Reemplaza: */
mix.js(‘resources/assets/js/app.js’, ‘public/js’)/* por: */
mix.react(‘resources/assets/js/app.jsx’, ‘public/js’)

Tu archivo webpack debería quedar así:

let mix = require('laravel-mix');
	/*
	|--------------------------------------------------------------------------
	| Mix Asset Management
	|--------------------------------------------------------------------------
	|
	| Mix provides a clean, fluent API for defining some Webpack build steps
	| for your Laravel application. By default, we are compiling the Sass
	| file for the application as well as bundling up all the JS files.
	|
	*/
	mix.react('resources/assets/js/app.jsx', 'public/js')
	.sass('resources/assets/sass/app.scss', 'public/css');

Webpack.mix.js

4. Ve a la ruta del archivo resources/assets/js/app.js

Cambia el nombre de este por app.jsx y coloca tu primer código React, puede ser el común Hello World!.

/**
	* In this file we will be using Reactjs for build our application example
	* so, below we have our clasic welcome code - Hello World -
	*/
	require('./bootstrap');
	import React, {Component} from 'react';
	import ReactDOM from 'react-dom';
	/**
	* Here goes all magic
	*/
	class App extends Component {
	render() {
	return (
	<h1>Hello World! </h1>
	);
	}
	}
	ReactDOM.render(
	<App />,
	document.getElementById('app')
	);

5. Desde tu gestor de comandos de Node ejecuta lo siguiente:

- npm install --only react react-dom cross-env- npm install --save react react-dom- npm update- npm run dev // Para compilar en modo desarrollo los mix de laravel- npm run watch // Para ver en tiempo real los cambios que se vayan efectuando con React.

6. Sustituye en tu layout o sección HEAD de tu archivo Blade de preferencia el callback de los scripts a:

<head>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <script src="{{ mix('js/app.js') }}"></script>
</head>

7. Dentro de tu etiqueta body, borra todo el contenido:

Haz que el contenido de tu archivo inicial (layout, welcome ó home) quede de la siguiente forma para que comience a renderizar:

<!doctype html>
	<html lang="{{ app()->getLocale() }}">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>React Example Project</title>
	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
	<link href="{{ mix('css/app.css') }}" rel="stylesheet">
	<script src="{{ mix('js/app.js') }}"></script>
	</head>
	<body>
	<div class="container" id="app">
	<!-- Here go your React Render App -->
	</div>
	</body>
	</html>

Si sigues todos estos pasos todo estará bien y funcionando. Además, te dejo el link del repo en Github por si quieres chequear algo más a fondo en la estructura del proyecto.

jmanzo/react-example-project

react-example-project - A brief example of how implement Reactjs with Laravel Project

github.com

PD: Si quieres ver de manera correcta la sintaxis en Sublime text (el que yo uso), tienes que instalar un paquete para Babel pulsando ctrl/cmd + shift + p y buscando Babel e instalar. Con esto ya SublimeText estará preparado para mostrarte la sintaxis de ES6.

Sintaxis de Babel para Javascript

Si tienes alguna sugerencia, error o comentario colócalo abajo y vere como puedo ayudarte. Cheers!

¿Cómo instalar React JS en Laravel 8?

Para llevar a cabo una instalación correcta, debemos empezar primero con Laravel y luego React, obviamente antes debemos preparar el entorno como un servidor local, NodeJS, etc para lograr integrarlos.

Pasos para instalar e integrar Laravel con React

1.- Entorno

• Windows 10
• Visual Studio Code
• Google Chrome
• Tener instalado un servidor Local en este caso XAMPP
• Tener instalado Node JS y funcionando correctamente NPM

2.- Instalar Laravel

Abrimos Visual Studio Code en la carpeta c:>xampp/htdocs, luego abrimos una terminal y digitamos el siguiente comando artisan para instalar Laravel.

composer create-project laravel/laravel --prefer-dist pyreact

3.- Instalar React JS

Accedemos al proyecto pyreact donde ejecutamos en la terminal los siguientes comandos artisan:

Prepara los archivos para procesar las interfaces

composer require laravel/ui

Instala los archivos necesarios para React JS

php artisan ui react

Verificamos la versión e instalación de Node JS

# for node
node -v

Verificamos el gestor de dependencias Javascript NPM

# for npm
npm -v

Todo ello para que finalmente ejecutemos el siguiente comando artisan y podamos instalar todo el entorno correspondiente para  compilar al resultante de React JS

npm install

En ocasiones podemos encontrar un error por la falta de recursos para levantar ejecutar el observador... para ello podemos ejecutar 

npm run dev

Y esto puede corregir el error con la inclusión y el procesamiento 

4.- Testing 

Una pequeña prueba de React donde logramos visualizar en la vista el componente que por default nos trae la instalación de React. El cual está identificado con el ID example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="example"></div>
    <script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>

Podemos realizar un cambio en el content del componente. luego dedemos ejecutar el siguiente comando para actualizar los cambio y/o compilarlos.

npm run watch

Para poder ver, ejecutamos el comando artisan para levantar el proyecto Laravel 8.

php artisan serve

En adelante iremos publicando más tutoriales de React Js con Laravel para aprender a usar y aprovechar estas dos grandes tecnologías en el desarrollo FrontEnd y BackEnd respectivamente.

 

No hay descargable

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

1 junio, 2019 - por Artyom - 4 comentarios.

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>