Cómo añadir componentes de React en Webflow

Actualización (noviembre de 2023): Webflow está trabajando actualmente en las Bibliotecas de Código (Code Libraries), que mejorarán significativamente la capacidad de los desarrolladores para añadir y aprovechar componentes de React en Webflow. Para ver un adelanto de lo que está en desarrollo, mira nuestra sesión de Webflow Conf.

___

Webflow es una herramienta de diseño increíble que te permite crear sitios web impresionantes sin tener que escribir ni una sola línea de código. Cuenta con funciones de CMS y recientemente lanzaron Webflow Ecommerce.

Pero a veces, es posible que necesites la potencia de React para aplicaciones más complejas y personalizadas. En este artículo, te enseñaremos cómo hacerlo.

Por ejemplo, hace poco me encargaron trasladar un componente de búsqueda de un sitio antiguo a un sitio de Webflow hecho a medida. El componente consulta una base de datos de horarios de buques de carga para encontrar una lista de barcos que coincidan con los criterios de búsqueda. El usuario introduce su puerto de carga y su puerto de destino, y el componente devuelve una lista de las líneas navieras que coinciden con su búsqueda.

Crear esa función directamente en Webflow habría requerido mucho código personalizado y complicado. React me permitió desarrollar la aplicación fácilmente, y migrarla a Webflow fue igual de sencillo.

Aquí tienes el proceso paso a paso que utilicé para mi proyecto. Puedes usarlo para crear tu propio proyecto de React, configurar un proceso de despliegue e integrar tu proyecto con un sitio de Webflow.

Nota: Este tutorial es bastante más técnico de lo habitual. Para seguirlo, necesitarás estar familiarizado con el uso de la terminal. Obviamente, tener conocimientos generales de JavaScript y, en particular, de React, será de gran ayuda.

Configura tu proyecto de React

Para configurar tu proyecto de React:

1. Crea una carpeta y ponle el nombre de tu proyecto
2. Ejecuta npm init y rellena la información necesaria
3. Instala React y React-DOM ejecutando: npm install --save react react-dom
4. Crea dos directorios, uno llamado src y el otro dist, dentro de la carpeta que creaste
5. Crea el archivo dist/index.html con el siguiente contenido:

<!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>YOUR APP TITLE</title>
</head>
<body>
 <div id="react-target"></div>
 <script src="bundle.js"></script>
</body>
</html>

Usarás este archivo para crear una página web que puedas cargar localmente mientras construyes tu componente de React. Asegúrate de reemplazar YOUR APP TITLE en la etiqueta <title> con el título de tu aplicación.

Observa los dos divs en la sección <body>:

1. El div vacío con el id “react-target” es donde renderizaremos nuestro componente de React
2. La etiqueta script carga un archivo llamado bundle.js que contendrá el código de nuestra aplicación generado por Webpack

A continuación, crea un archivo llamado index.js en tu carpeta src con el siguiente contenido:

import React, {Component} from 'react'
‍
import ReactDOM from 'react-dom'
‍
class App extends Component {
 render() {
   return (
     <div>This is a React component inside of Webflow!</div>
  )
}
}

ReactDOM.render(
React.createElement(App, {}, null),
document.getElementById('react-target')
);

La estructura de tu proyecto debería verse así ahora:

Configura Webpack

Webpack es un empaquetador de módulos. Toma todo tu JavaScript, hojas de estilo, imágenes y cualquier otro código que componga tu aplicación, y lo combina en un solo archivo, al que llamamos bundle.js.

Para configurar Webpack en tu proyecto, deberás hacer lo siguiente:

1. Instala Webpack: en tu directorio raíz, ejecuta lo siguiente para instalar Webpack y las herramientas necesarias para ejecutar un servidor de desarrollo local de Webpack. Esto te permitirá ver lo que estás construyendo mientras trabajas en ello.

npm install --save-dev webpack webpack-dev-server webpack-cli

2. Añade lo siguiente a la sección de scripts de tu package.json:

...
"scripts": {
 "start": "webpack-dev-server --config ./webpack.config.js --mode development --progress --color --port 3000",
 ...
},
...

Esto nos permitirá ejecutar un servidor de desarrollo local para que podamos trabajar en nuestra aplicación localmente en un navegador.

3. Configura Webpack: crea un archivo en tu carpeta raíz llamado webpack.config.js con el siguiente contenido:

const path = require('path')

module.exports = {
 entry: './src/index.js',
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       use: ['babel-loader']
     },
     {
       test: /\.css$/,
       use: ["style-loader", "css-loader"]
     },
     {
       test: /\.(pdf|jpg|png|gif|svg|ico)$/,
       use: [
         {
           loader: 'url-loader'
         },
       ]
     },
     {  
       test: /\.(woff|woff2|eot|ttf|otf)$/,
       loader: "file-loader"
     }
   ]
 },
 resolve: {
   extensions: ['*', '.js', '.jsx']
 },
 output: {
   path: __dirname + '/dist',
   publicPath: '/',
   filename: 'bundle.js'
 },
 devServer: {
   static: {
     directory: path.join(__dirname, 'dist')
   }
 }
};