CÓMO CREAR UNA APLICACIÓN WEB CON SYMFONY Y REACT

symfony check:requirements

Paso 2: Crear un nuevo proyecto de Symfony

Una vez que hayas instalado Symfony, es hora de crear un nuevo proyecto. Para hacer esto, sigue estos pasos:

1. Abre tu terminal y navega hasta el directorio donde deseas crear el proyecto.

2. Ejecuta el siguiente comando:

symfony new my-project

Donde "my-project" es el nombre que deseas darle a tu proyecto. Este comando creará un nuevo proyecto de Symfony en el directorio actual.

Paso 3: Instalar y configurar Webpack Encore

Webpack Encore es una herramienta que te permite integrar React en un proyecto de Symfony de forma sencilla. Para instalar y configurar Webpack Encore, sigue estos pasos:

1. Abre tu terminal y navega hasta el directorio de tu proyecto.

2. Ejecuta los siguientes comandos para instalar Webpack Encore: 

composer require symfony/webpack-encore-bundle
yarn install

3. Abre el archivo webpack.config.js recién creado y asegúrate de que tenga la siguiente configuración:

var Encore = require('@symfony/webpack-encore');

Encore
    .enableReactPreset()
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

Para poder usar "enableReactPreset()" tendrás que añadir algunas librerías. Para ello, ejecuta el siguiente comando desde la carpeta de tu proyecto:

yarn add react react-dom prop-types @babel/preset-react --dev

Paso 4: Crear la aplicación de React

Una vez que hayas instalado y configurado Webpack Encore, es hora de crear la aplicación de React. Para hacer esto, edita el archivo llamado "app.js" que se encuentra dentro de la carpeta "assets/js" y agrega el siguiente código:

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

interface Props {
  prop1: string;
  prop2: string;
}

const App = ({ prop1, prop2 }) => (
  <div>
    <h1>{prop1} {prop2}!</h1>
  </div>
);

const root = document.getElementById('root');

ReactDOM.render(<App prop1={ prop1 } prop2={ prop2 } />, root);

En este ejemplo, definimos un componente de React llamado "App" que utiliza las propiedades "prop1" y "prop2" que pasamos desde la plantilla de Symfony. Luego, usamos la función "ReactDOM.render" para renderizar el componente en el elemento con el id "root" que definimos en la plantilla.

Paso 5: Configurar el controlador y la vista de Symfony

El siguiente paso es configurar el controlador y la vista de Symfony para que puedan renderizar la aplicación de React. Para hacer esto, sigue estos pasos:

1. Crea un nuevo controlador ejecutando el siguiente comando en tu terminal:

php bin/console make:controller DefaultController

2. Abre el archivo "src/Controller/DefaultController.php" y reemplaza el código existente con el siguiente:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class DefaultController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function index(): Response
    {
        return $this->render('default/index.html.twig', [
            'prop1' => 'Hola',
            'prop2' => 'Mundo',
        ]);
    }
}

Este controlador define una acción que renderiza la vista "default/index.html.twig" pasándole dos propiedades a la plantilla prop1 y prop2.

3. Agrega el siguiente código al archivo "index.html.twig" que se encuentra en el directorio "templates/default/":

{% extends 'base.html.twig' %}

{% block body %}
    <div id="root"></div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
{% endblock %}

Este código define un bloque de contenido que incluye la etiqueta div con el id "root" y llama a la función "encore_entry_script_tags()" para incluir el archivo JavaScript generado por Webpack Encore.

Paso 6: Compilar y ejecutar el proyecto

Una vez que hayas completado los pasos anteriores, es hora de compilar y ejecutar el proyecto. Para hacer esto, sigue estos pasos:

1. Abre tu terminal y navega hasta el directorio de tu proyecto.

2. Ejecuta el siguiente comando para compilar los assets de Webpack Encore:

yarn encore dev --watch

Este comando compila los archivos JavaScript y CSS y los guarda en el directorio "public/build". El argumento "--watch" hace que Webpack Encore observe los cambios en los archivos y los vuelva a compilar automáticamente.

3. En otra terminal, ejecuta el siguiente comando para iniciar el servidor web de Symfony:

symfony server:start

Este comando inicia el servidor web de Symfony y lo configura para escuchar en el puerto 8000.

4. Abre tu navegador web y navega a la dirección "http://localhost:8000". Deberías ver la aplicación de React en acción.

Hasta aquí hemos instalado Symfony, configurado Webpack Encore, creado una aplicación de React, configurado el controlador y la vista de Symfony y compilado y ejecutado el proyecto. Si sigues estos pasos, estarás en camino de crear aplicaciones web de alta calidad que utilicen las mejores herramientas disponibles. ¡Buena suerte en tu proyecto!