Blog


Cómo crear una aplicación web con Symfony y React

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

10 / 03 / 2023 Symfony

Paso 2: Crear un nuevo proyecto de SymfonyIniciar un proyecto desarrollado con Symfony y React es una tarea emocionante y desafiante al mismo tiempo. Symfony es un framework de PHP que te permite construir aplicaciones web de alta calidad, mientras que React es una biblioteca de JavaScript que te permite crear interfaces de usuario interactivas.

En este tutorial, te vamos a guiar a través de los pasos necesarios para crear un proyecto de Symfony y React desde cero.

Paso 1. Instalar Symfony

Lo primero que necesitas hacer es instalar Symfony en tu sistema. Symfony se puede instalar de varias formas, pero la forma más sencilla es utilizar el instalador de Symfony. Para hacer esto, sigue estos pasos:

1. Descarga el instalador de Symfony desde https://symfony.com/download.

2. Ejecuta el siguiente comando en tu terminal:

wget https://get.symfony.com/cli/installer -O - | bash
3. Una vez que se complete la instalación, puedes ejecutar el siguiente comando para verificar que Symfony se haya instalado correctamente:
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!



ARTÍCULOS RELACIONADOS