¿Reaccionar.js tiene sentido para un sitio estático basado en contenido?

14

Estoy bastante entusiasmado con el modelo react.js porque hace que la manipulación DOM sea tan fluida y comprensible. Pero me pregunto cómo podría aprovecharse para un sitio que es en gran parte estático con grandes bloques de texto e imágenes que no se mueven. ¿Se interpondría en el camino? Parece incómodo tener componentes con KB de texto en su estado.

javascript web-development html

— jiggy
fuente

44

Tienes un martillo y estás pensando si este tornillo podría usarse como un clavo. Normalmente, las decisiones relacionadas con la tecnología deben tomarse en la línea "Nuestros requisitos son X, Y, Z. ¿Qué tecnologías nos permitirán llegar al menor costo?", No "Tengo la solución, pero ¿podría darnos yo un problema? El hecho de que ya tenga experiencia con React inclina la decisión a su favor, pero ¿qué requisitos cumpliría? ¿Qué valor agregaría al cliente o usuario?

— amon

44

Bueno, eso es lo que estoy tratando de determinar. ¿React es un martillo o una caja de herramientas? Ciertamente sobresale en el tipo de casos de uso que tiene Facebook y no he visto nada que indique que apestaría en otros casos. Definitivamente es menos convincente, pero eso no significa que no esté perfectamente bien.

— jiggy

1

De hecho, tengo la misma pregunta (s). Me encanta todo lo relacionado con los componentes React, pero para los sitios controlados por contenido con solo unas pocas líneas de JavaScript, parece centrarse mucho en el acoplamiento HTML-JS y más en estados y eventos que en HTML-CSS limpio. Me encantaría algo como React components en otro lenguaje de plantillas.

— JeroenVdb

10

Sepa lo que quiere hacer, luego elija la tecnología.

Desde ese punto de vista, React.js parece ser excesivo para una web en su mayoría estática.

Desde el sitio web de React:

Creamos React para resolver un problema: crear grandes aplicaciones con datos que cambian con el tiempo.

React es un martillo para una uña específica. Eso indicaría que se interpondrá en la creación de un sitio web mayormente estático.

— Miyamoto Akira
fuente

2

La generación de páginas estáticas es un uso anticipado de React, como se menciona en la documentación para React.renderToStaticMarkup

Similar a renderToString, excepto que esto no crea atributos DOM adicionales como data-react-id, por ejemplo , que React usa internamente. Esto es útil si desea usar React como un simple generador de páginas estáticas, ya que eliminar los atributos adicionales puede ahorrar muchos bytes.

Algunos han llamado al uso de reaccionar aquí en exceso. Sin embargo, cuando quiero algo muerto, no tengo problemas para matarlo en exceso. El hecho de que reaccionar puede hacer mucho más de lo necesario para este caso de uso no es un argumento en contra de reaccionar.

Sin embargo, pueden surgir problemas si desea realizar código asincrónico. Imaginemos lo siguiente:

function SchoolClass({classId}) {
   const students = await query("SELECT name FROM student WHERE class = ?", classId);
   return <ul>
      {_.map(students, ({name}) => <li>{name}</li>}
   </ul>
}

Pero esto no funcionará, porque la función devuelve un elemento Promise, no React, y por lo tanto no es compatible con React. Si estuviera ideando un marco generador de sitio estático al estilo React, probablemente lo permitiría. Sin embargo, dado que React se centra en clientes de aplicaciones web, no está permitido.

— Winston Ewert
fuente