Dado el siguiente escenario, ¿cómo puedo usar los componentes React/Preact en mi proyecto?
Creo que lo siguiente funcionaría, pero no sé cómo dividir o cargar los paquetes de acuerdo con las siguientes líneas:
¿Cómo puedo agrupar componentes individuales usando webpack para usarlos en páginas html estáticas y mostrarlos donde sea necesario? ¿Cómo configuro webpack para eso?
Esencialmente, transpila React de un montón de archivos JS/JSX en un script JS (usando Babel), que luego se carga en su documento html. Así que sería algo como esto:
<html> <head> // Usual head section stuff </head> <body> <div id="header"> This is the Django site header </div> <div id="sidebar_root" /> <div> Blah blah all the site's body content from Django </div> <div id="footer_root" /> <script src="react_sidebar.js" /> <script src="react_footer.js" /> </body> </html>Y tendría sus componentes React (que tendrían un montón de subcomponentes), uno de los cuales se representa en "react_sidebar.js" y el otro en "react_footer.js". Entonces esos componentes estarían en React y los otros serían Django.
Entonces, para cargar los scripts del paquete React a pedido, solo necesita incluir el script y el div que actúa como su raíz.
PD
Si siempre estuviera cargando la barra lateral y el pie de página juntos (es decir, nunca solo uno o el otro sino siempre ambos), podría combinarlos en React DOM renderizado en un script, por lo que solo tendría que incluir un script en su html