Como Desarrollar Plantilla Blogger con ReactJS - [Parte I]

-

Para crear este blog utilizo tecnología disponible de forma libre y gratuita. Hago uso de NPM, CRA, ReactJS, MUI y Blogger.

Imagen con logos de Blogger, ReactJS, BabelJS y HTML5

Blogger permite crear un blog de la nada. No se requieren conocimientos en desarrollo web para empezar a publicar entradas. Tan simple como seguir estos pasos:

  1. Crear una cuenta Google
  2. Crear un blog
  3. Seleccionar un tema
  4. Escribir una entrada y listo.

Si requieres una explicación paso a paso más profunda, te comparto el siguiente video.

Una de las desventajas de Blogger es que sus plantillas no son modernas, y su editor de tema no permite la personalización con nuevos framework de desarrollo en Front-End, cómo por ejemplo: Angular, ReactJS o VueJS.

Para poder utilizar ReactJS se requiere editar directamente el HTML de la plantilla de Blogger. Actualmente el sistema de platillas cuenta con las versiones 1 y 2. La versión 1 es menos restrictiva a lo que incluyamos en el HTML y la versión 2 tiene un corrector de sintaxis que dificulta el uso de componentes modernos como JSX. Por eso deberás activar la versión 1, ya que la versión 2 viene activada por defecto.

Preparación

Desarrollaremos una plantilla muy sencilla tan solo para ejemplificar el uso de ReactJS en Blogger.

Requisitos

Para este ejemplo se utilizan los siguientes elementos:

  • ReactJS
  • BabelJS
  • Material UI
  • Plantilla HTML

Como paso inicial creamos el esqueleto HTML de nuestra plantilla. El ejemplo básico de siempre es:

<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Blog</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

Puedes guardar el contenido de la plantilla en un archivo index.html. Para editar el código fuente puedes utilizar cualquier editor de texto como Sublime Text o VSCode.

Dependencias

Ahora es necesario agregar las dependencias. Como la aplicación no será compilada de JSX a Javascript utilizaremos la versión CDN de las librerías ReactJS y BabelJS. En el archivo editaremos el head agregando al final lo siguiente:


<!-- Cargar Babel. -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Cargar React. -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

Al agregar BabelJS podremos generar código JSX directamente en el navegador.

Desarrollo

Iniciamos el código Javascript de la plantilla. Todo el código siguiente será incluido en una solo etiqueta <script type="text/babel"></script>. El código de esta plantilla está basado en el código ejemplo de Material UI que se puede ver en el repositorio de github.

Imports y Estilos

Primero debemos crear las declaraciones generales que utilizaran todos los componentes que se verán más adelante. En el siguiente código se importan los componentes de Material UI.

const {
  Box,
  Button,
  Card,
  CardActionArea,
  CardContent,
  CardMedia,
  colors,
  Container,
  createTheme,
  ...
} = MaterialUI;

También es necesario declarar los estilos que se utilizarán en todos los componentes, por simplicidad los declaro en un solo objeto, sin embargo lo correcto sería tener la parte correspondiente en cada uno de sus componentes.

const useStyles = makeStyles((theme) => ({
  footer: {
    backgroundColor: theme.palette.background.paper,
    // marginTop: theme.spacing(8),
    padding: theme.spacing(6, 0),
  },
  mainGrid: {
    marginTop: theme.spacing(3),
  },
  sidebarAboutBox: {
    padding: theme.spacing(2),
    backgroundColor: theme.palette.grey[200],
  },
  sidebarSection: {
    marginTop: theme.spacing(3),
  },
  ...
}));

Componentes ReactJS

Ahora corresponde la definición de los componentes regulares en una página web; footer, main, aside y navbar. Como lo mencioné anteriormente la plantilla esta basada en el código que se proporciona como ejemplo para un blog en Material UI. A continuación para fines demostrativos el código del footer:

function Footer(props) {
  const classes = useStyles();
  const { description, title } = props;
  return (
   <footer className={classes.footer}>
     <Container maxWidth="lg">
       <Typography variant="h6" align="center" gutterBottom>
        {title}
       </Typography>
       <Typography variant="subtitle1" align="center" color="textSecondary" component="p">
        {description}
       </Typography>
     <Copyright />
       </Container>
   </footer>);}

También un extracto del aside:

function Sidebar(props) {
  const classes = useStyles();
  const { archives, description, social, title } = props;
  return (
    <Grid item xs={12} md={4}>
    <Paper elevation={0} className={classes.sidebarAboutBox}>
      <Typography variant="h6" gutterBottom>
       {title}
      </Typography>
      <Typography>{description}</Typography>
    </Paper>
    <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
      Archives
    </Typography>
    {archives.map((archive) => (
      <Link display="block" variant="body1" href={archive.url} key={archive.title}>
        {archive.title}
      </Link>
     ))}
     <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
      Social
     </Typography>
     {social.map((network) => (
     <Link display="block" variant="body1" href="#" key={network}>
       <Grid container direction="row" spacing={1} alignItems="center">
         <Grid item>
           <network.icon />
         </Grid>
       <Grid item>{network.name}</Grid>
       </Grid>
      </Link>
      ))}
    </Grid>);}

Entrypoint

Finalmente es necesario ejecutar el componente principal, en nuestra plantilla se llama App. Este componente lo enlazaremos con el div de nuestra plantilla HTML para que ahí se muestre todo el código renderizado de los componentes.

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>,
  document.querySelector('#root'));

Código completo

El código completo de la plantilla lo comparto a continuación:

Despliegue

Ya tenemos una plantilla lista, si quieres ver el resultado simplemente descarga el código completo al archivo index.htmly ábrelo con tu navegador para que veas el resultado.

Blogger

Para ver nuestra plantilla ya en Blogger es necesario acudir a la sección de Tema en la interfaz de Blogger. Ahí ya con la versión 1 de plantillas activada seleccionamos Editar HTML

Captura de pantalla de la sección Tema en Blogger

Pegamos el contenido del archivo index.html en el editor. Quedando de la siguiente forma:

Captura de pantalla del editor HTML de Blogger

Con esto ya podemos ir a la url de nuestro blog y ver el resultado.

Siguientes paso

Es importante aclarar que el código que se ha compartido corresponde a la versión 4 de Material UI. Actualmente existe la versión 5 que ha traído cambios incompatibles con la versión que utilizamos. 

Hace falta enlazar la plantilla con el contenido de nuestro blog. Para no hacer esta entrada más grande, en la siguiente entrada explicaré las modificaciones necesarias para lograrlo.

Entradas más populares de este blog

Como Desarrollar Plantilla Blogger con ReactJS - [Parte II]

-
Imagen
En mi entrada anterior compartí el código de una plantilla ReactJS con Material UI para Blogger, sin embargo aún no se enlaza con el contenido de las entradas de Blogger. En esta entrada veremos como realizar la conexión entre el Front desarrollado y el Back de Blogger. Comenzamos con los requisitos: Tener un blog de Blogger Configurar platillas clássicas en la sección de temas. Modificaciones de código Reutlizaremos gran parte del código de la platilla anterior, con la diferencia que a través de las tags de Blogger insertaremos el contenido de los posts en la forma de un objeto JSON. Para esto haremos una intercalación entre el código Javascript de ReactJS y las tags de Blogger. La primera parte que modificaremos es justo antes de import de los componentes de Material UI. Agregamos dos lineas de código que van a generar una bandera con un valor que dependerá de si la página actual es un post o es el home. Las líneas de códgio son las siguientes: const isHome = true...
Read more »