DEV Community: Alfredo Carreón Urbano

Create a project in React without create-react-app/vite 2023 (Spanish)

Alfredo Carreón Urbano — Sun, 08 Jan 2023 17:27:43 +0000

Introducción

Anteriormente escribí una publicación sobre cómo crear una aplicación de React desde cero, ha pasado algún tiempo y ha quedado obsoleta la configuración.

Objetivo

Así que mi objetivo es crear un proyecto con una nueva configuración y comprender lo que se necesita para crear una aplicación de React.

Tener nociones de cómo funciona por detrás y tener un cierto control sobre la estructura de la aplicación.

Herramientas antes de iniciar

Un editor de código, puedes usar VSCode o el editor de tu preferencia.
Un navegador actualizado.
Terminal de comandos.
Tener instalado Node y npm.
Tener instalado Git y tener una cuenta en Github.

1. Crear un repositorio en GitHub

Vamos a crear un nuevo repositorio en Github.

Completamos el formulario a nuestro agrado, después de crear nuestro proyecto vamos a clonarlo.

Vamos a nuestra terminal, elegimos nuestro directorio para clonar nuestro proyecto.

git clone URL_REPOSITORIO

2. Crear proyecto e instalar dependencias

Utilizamos el comando:

npm init -y

Se crea nuestro package.json con una configuración por defecto.

{
  "name": "react-app-2023",
  "version": "1.0.0",
  "description": "Create a project in React without create-react-app 2023 (Spanish)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AlfredoCU/react-app-2023.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AlfredoCU/react-app-2023/issues"
  },
  "homepage": "https://github.com/AlfredoCU/react-app-2023#readme"
}

Ahora vamos a instalar las dependencias de configuración:

npm install --save @babel/core @babel/preset-env @babel/preset-react babel-loader babel-plugin-transform-class-properties css-loader html-loader html-webpack-plugin react-hot-loader sass-loader style-loader webpack webpack-cli webpack-dev-server

También instalamos las siguientes dependencias:

npm install react react-dom sass prop-types

Usted puede agregar más paquetes si lo desea, como styled-component, Tailwind CSS, Axios, Redux, Apollo y GraphQL. Yo solamente voy a instalar lo necesario para un proyecto pequeño.

3. Creando archivos de configuración

Vamos a crear los siguientes archivos de configuración en la raíz de nuestro proyecto.

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}

.prettierrc

{
    "tabWidth": 2,
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "htmlWhitespaceSensitivity": "css",
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "parser": "babel-ts",
    "printWidth": 80,
    "proseWrap": "preserve",
    "semi": true,
    "singleQuote": false,
    "trailingComma": "none",
    "useTabs": false
}

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.html$/,
        use: "html-loader"
      },
      /* Choose only one of the following two: if you're using 
        plain CSS, use the first one, and if you're using a 
        preprocessor, in this case SASS, use the second one */
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    })
  ]
};

package.json

 "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development --port 3000",
    "build": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

4. Estructura de proyecto

Vamos muy bien, ahora vamos a crear la estructura de nuestro proyecto, la cual es la siguiente:

Al final de la publicación se encuentran los enlaces del repositorio donde podrá ver todo el código.

5. Ejecutamos los comandos

Para correr el proyecto en http://localhost:3000/:

npm start

Para construir nuestro proyecto:

npm run build

Terminamos 😀

Conclusión

Es probable que en tu vida laboral te asignen proyectos muy grandes y con varios años de desarrollo, los cuales tengan una configuración creada desde 0.

También puede que te enfrentes a desafíos para conseguir un trabajo y te pidan crear un proyecto con una configuración creada por ti.

Así que espero que esta publicación sea de mucha ayuda y feliz año nuevo 🥳

Tailwind CSS (Spanish)

Alfredo Carreón Urbano — Sat, 24 Oct 2020 21:20:30 +0000

Introducción

Como desarrolladores hemos experimentando con varios entornos de trabajo para la creación de sitios web personalizables, siempre buscamos nuevas alternativas de mejorar CSS para diseñar nuestras interfaces.

Nos hemos topado con un sin fin de retos, anular estilos, mantener una especificidad buena, utilizar la metodología para aumentar significativamente la velocidad de desarrollo y el mantenimiento, esto puede ser complicado cuando se trata de aplicaciones grandes.

Y lo más preocupante es hacer un diseño personalizado que destaque del resto, creando identidad, valores y todo lo que representa ese producto o idea.

Hay muchos entornos de trabajo que cuentan con componentes ya diseñados, los cuales son geniales y nos ayudan a disminuir horas de desarrollo, pero tiene sus desventajas esto puede ocasionar estilos genéricos, pérdida de identidad o originalidad.

Y como experiencia puedo decir que eso es terrible.

Tailwind

Quiero hablar sobre Tailwind CSS es un framework para construir sitios web con estilos personalizados, y si tu como yo quieres personalizar colores, tamaños de borde, pesos de fuente, espaciado, puntos de interrupción, sombras y mucho más, sin problemas de personalizar tus componentes como sucedería en otro entorno de trabajo, esto puede ayudarte.

Tailwind está escrito en PostCSS una herramienta para transformar CSS en JavaScript, lo cual te garantiza crear interfaces hermosas y potentes.

Instalación

La instalación es muy simple y no hay mejor lugar que la documentación oficial: Tailwind CSS installation.

Plugin

Si tu entorno de trabajo es VSCode, te recomiendo instalar el siguiente plugin: Tailwind CSS IntelliSense.

Te ayuda a:

Autocompletado.
Resaltado de sintaxis.
Informe de error de sintaxis.

Antes de iniciar

Tailwind no cuenta con componentes prediseñados, pero se puede argumentar que cuenta clases preexistentes llamadas utilidades, listas para usarse.

La utilidad es primero

Tengo que reconocer que al principio no me gustaba la idea de implementar un diseño sin ninguna línea de CSS.

Tailwind quiere resolvernos problemas al nombrar nuestras clases, no creando ninguna clase utilizando las preexistentes.
Normalmente en nuestros proyectos los estilos se vuelven cada vez más grandes y complejos, con las utilidades todo es reutilizable, con la idea de evitar escribir CSS lo más que se pueda.
CSS está definido de manera global en toda su aplicación y cuando esta crece puede ser difícil de administrar, aumentando la posibilidad de tener conflictos de nombres de estilos, en Tailwind se evita este problema con sus clases en el HTML que son locales.

Existen los módulos de CSS o la biblioteca de Styled Components que de otra forma también resuelven estos problemas, pero lo que lo hace único a Tailwind CSS son sus utilidades.

Ya no me sentía aferrado a hacer estilos de CSS, la productividad al trabajar en sólo un archivo era buena, algo que me gustó mucho fue construir componentes simples o complejos a partir de un conjunto de utilidades.

<div class="mt-10 max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img
      class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full"
      src="https://picsum.photos/100/100"
      alt="Photo Profile"
    />
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Victor Urbano</p>
      <p class="text-sm leading-tight text-gray-600">Developer</p>
      <div class="mt-4">
        <button class="text-green-500 hover:text-white hover:bg-green-500 border border-green-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">
          Message
        </button>
      </div>
    </div>
  </div>
</div>

Me preocupaba el mantenimiento del código, tener tantas clases en una etiqueta es algo que a simple vista no es de mi agrado, para resolver esto podemos extraer las utilidades usando la función @apply para crear abstracciones alrededor de patrones de utilidad comunes.

.container-card {
    @apply mt-10 max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden;
}

.content-card {
    @apply px-6 py-4;
}

.content-card__img {
    @apply block mx-auto h-16 rounded-full;
}

.content-card__info {
    @apply mt-4 text-center;
}

.content-card__name {
    @apply text-xl leading-tight;
}

.content-card__work {
    @apply text-sm leading-tight text-gray-600;
}

.content-card__btns {
    @apply mt-4;
}

.content-card__btn {
    @apply text-green-500 border border-green-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal;
}

Se reduce bastante las utilidades dejando un html más limpio, reutilizando estilos y facilitando el mantenimiento del CSS.

<div class="container-card">
  <div class="content-card sm:flex sm:items-center">
    <img
      class="content-card__img sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24"
      src="https://picsum.photos/100/100"
      alt="Photo Profile"
    />
    <div class="content-card__info sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="content-card__name">Victor Urbano</p>
      <p class="content-card__work">Developer</p>
      <div class="content-card__btns">
        <button class="content-card__btn hover:text-white hover:bg-green-500">
          Message
        </button>
      </div>
    </div>
  </div>
</div>

Pruebas

Realice unas pruebas de colores, tipografía, tamaños, grid, flexbox, etc. Y fue muy cómodo poder trabajar, hay utilidades que puedes intuir qué es lo que realizan ya que su identificador es igual que en CSS.

Sorpresa 🎁

Tailwind CSS ofrece ejemplos de componentes gratuitos y otros de paga, pero no son muchos, así que les dejo dos sitios web los cuales cuentan con una gran variedad de componentes.

Conclusión

No te olvides del CSS, aumenta tu productividad y te mantienes creativo creando diseños originales.

Puedo concluir que es una alternativa nueva, increíble y potente que te recomiendo que pruebes y puedas compartir tu experiencia.

Feliz Codificación :D

Styled Components Basics (Spanish)

Alfredo Carreón Urbano — Mon, 25 May 2020 04:11:46 +0000

Introducción.

Styled Components es una alternativa de mejorar CSS para diseñar componentes en React.

Y es que tiene bastantes ventajas para utilizar esta hermosa librería para diseñar nuestros componentes.

Sin errores al asignar nombres a nuestras clases CSS, esto gracias a que se generan nombres únicos, evitando sobrescribir alguna clase.
Eliminación de CSS no utilizable.
Mejora el mantenimiento, nunca tendrá que buscar en diferentes archivos para encontrar el estilo que afecta a su componente, por lo que el mantenimiento es muy fácil.
Sigue escribiendo CSS estándar y deje que el componente con estilos se encargue del resto.
Puede crear estilos de componentes globales sin problemas.

Estos son algunos beneficios, pero aún hay más.

Instalación.

La instalación es muy simple con el comando:

npm install --save styled-components

Plugin.

Si tu entorno de trabajo es VSCode, te recomiendo instalar el siguiente plugin:

vscode-styled-components

Te ayuda a:

Resaltado de sintaxis para componentes con estilo en JavaScript y TypeScript.
CSS IntelliSense detallado mientras trabaja en cadenas con estilo.
Informe de error de sintaxis.

Antes de iniciar.

Puedes tener un componente así:

const Test = () => (
  <div className="container">
    <h1 className="title">Title</h1>
    <p className="description">Paragraphs</p>
  </div>
}

Normalmente cuando trabajas con CSS puedes realizar algo como esto:

.container {
  padding: 10px;
  background-color: #0ac1a8;
  font-family: "Lato", sans-serif;
}

.title {
  margin: 1em 0 0 0;
  letter-spacing: 0.8px;
}

.description {
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
}

Y tener tus estilos y componente en archivos diferentes, pero con styled-components estos estilos se mantienen en el mismo archivo.

Importamos la librería.

Antes de iniciar debes de importar las librerías para iniciar a trabajar.

import React from "react";
import styled from "styled-components";

Creando un componente de estilos.

Cuando está definiendo estilos, en realidad está creando componentes de React, el ejemplo anterior puedes transformarlo de esta manera:

const Test = () => (
  <Container>
    <Title>Title</Title>
    <Description>Paragraph</Description>
  </Container>
);

const Container = styled.div`
  padding: 10px;
  background-color: #0ac1a8;
  font-family: "Lato", sans-serif;
`;

const Title = styled.h1`
  margin: 1em 0 0 0;
  letter-spacing: 0.8px;
`;

const Description = styled.p`
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
`;

Puedes observar que mantiene CSS normal, y cada uno de los componentes se comporta como una etiqueta HTML.

Si abres tú navegador en "inspeccionar elemento", podrás observar una estructura HTML normal y se genera nombres únicos para evitar sobrescribir cada una de las clases de CSS.

CSS esta definido de manera global en toda su aplicación y cuando está crece puede ser difícil de administrar, aumentando la posibilidad de tener conflictos de nombres de estilos, lo que resuelve styled-components al generar nombres únicos a las clases.

Puedes crear componente con cualquier etiqueta HTML, img, p, h1, div, span, etc.

Módulos CSS.

Puedes hacer que CSS tome un comportamiento similar a Styled Components utilizando módulos CSS.

El CSS dentro de un módulo está disponible sólo para el componente que lo importó, y no tiene que preocuparse por los conflictos de nombres.

import styles from './styles.css'

const Test = () => (
  <div className={styles.container}>
    <p className={styles.paragraph}>Welcome!</p>
    <input
      className={styles.input}
      placeholder="user"
      type="text"
      inputColor="#20534c"
    />
    <input className={styles.input} placeholder="password" type="password" />
    <button className={styles.button} onClick={this.login}>
      Login
    </button>
  </div>
);

Pero esto genera un código muy sucio, a comparación de Styled
Components.

const Test = () => (
  <Container>
    <Paragraph>Welcome!</Paragraph>
    <Input placeholder="user" type="text" inputColor="#20534c" />
    <Input placeholder="password" type="password" />
    <Button onClick={this.login}>Login</Button>
  </Container>
);

Usando props (accesorios).

Puedes enviar props a tus componentes de estilo, para crear diferentes comportamientos gracias a las funciones interpoladas.

const Test = () => (
  <Container>
    <Button login color="white">
      Login
    </Button>
    <Button bold color="#0ac1a8">
      Register
    </Button>
  </Container>
);

const Container = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
`;

const Button = styled.button`
  width: 100px;
  margin: 10px;
  font-size: 1em;
  border-radius: 3px;
  padding: 0.25em 1em;
  border: 2px solid #0ac1a8;
  color: ${(props) => props.color};
  font-weight: ${(props) => props.bold && "bold"};
  background-color: ${(props) => (props.login ? "#0ac1a8" : "#ffffff")};
`;

Como puedes ver hay varias formas de pasar props a nuestro componente de estilos.

Obtener el color desde el componente Test.

color: ${(props) => props.color};

Utilizar un operador ternario para intercambiar el color de fondo.

background-color: ${(props) => (props.login ? "#0ac1a8" : "#ffffff")};

También puedes utilizar && (cortocircuito).

font-weight: ${(props) => props.bold && "bold"};

O si deseas varios cambios puedes realizar lo siguiente.

${(props) =>
  props.login &&
  ` color: white; 
  font-weight: normal; 
  background-color: #0ac1a8;`}

Y de esta forma reducir tu código a sólo una prop.

Importante: Los componentes de estilos pasan atributo HTML conocido por el DOM, excepto las props ya que son personalizados.

const Test = () => (
  <>
    <Input placeholder="name" type="text" inputColor="#20534c" />
    <Input placeholder="lastname" type="text" />
  </>
);

const Input = styled.input`
  margin: 0.5em;
  padding: 0.5em;
  border-radius: 3px;
  border: 1px solid #00bfa5;
  color: ${(props) => props.inputColor || "#1976d2"};
`;

Resultado:

Styled Components es suficientemente inteligente para filtrar atributos HTML y enviarlos al DOM como placeholder y type, pero el prop inputColor no pasa al DOM.

Herencia de estilos.

Puedes crear un nuevo componente que herede de otro y sobrescribir los estilos del mismo tipo.

const Test = () => (
  <>
    <Title>Login</Title>
    <SubTitle>Register</SubTitle>
  </>
);

const Title = styled.h1`
  color: #0ac1a8;
  font-family: "Lato", sans-serif;
`;

const SubTitle = styled(Title)`
  color: #303030;
`;

De esta forma hereda los estilos y sobrescribe los del mismo tipo.

Podemos heredar componentes propios o de terceros y modificar sus estilos.

Modificar etiqueta.

En el ejemplo anterior hay dos h1.

<h1 class="sc-fzoXzr dMpzlw">Login</h1>
<h1 class="sc-fzoXzr sc-fzpjYC iywToi">Register</h1>

Puedes modificar la etiqueta con as, es una prop que permite modificar la etiqueta del componente.

const Test = () => (
  <>
    <Title>Login</Title>
    <SubTitle as="h2">Register</SubTitle>
  </>
);

El resultado es el siguiente.

<h1 class="sc-fzoXzr dMpzlw">Login</h1>
<h2 class="sc-fzoXzr sc-fzpjYC iywToi">Register</h2>

De esta forma puedes heredar estilos y modificar las etiquetas de tus componentes.

Usando CSS.

Para usar la función auxiliar es necesario importarla.

import styled, { css } from "styled-components";

Puedes definir estilos CSS de esta manera:

const Paragraph = css`
  font-size: 1em;
  letter-spacing: 1.6px;
  ${(props) => (props.font ? "font-weight: 300;" : "font-weight: 400;")};
`;

Esto puede ser útil cuando tienes estilos similares que puedes usar en varios componentes:

const AboutBio = styled.p`
  ${Paragraph};
  color: #00bfa5;
`;

const AboutAddress = styled.p`
  ${Paragraph};
  color: #1976d2;
`;

Esto no genera otras clases CSS, sólo se incorporan los estilos a las dos clases.

Modificar estilos de hijos.

Si necesita modificar los estilos de uno de los elementos secundarios, puede agregar selectores.

const List = styled.li`
  color: #303030;
  list-style: none;
  font-weight: bold;
  font-family: "Roboto", sans-serif;

  a {
    color: #0ac1a8;
  }
`;

La referencia "a" se aplicará a los hijos de cualquier profundidad, si sólo desea referirse a los hijos directos debe de usar > a.

SCSS.

El preprocesador que utiliza Styled Components, Stylis, admite una sintaxis similar a SCSS para los estilos de anidamiento.

const Test = () => (
  <>
    <List>Hello world!</List>
    <List>Hello world!</List>
    <List className="something">Hello world!</List>
    <div>Hello world!</div>
    <List>Hello world!</List>
    <div className="something-else">
      <List>Hello world!</List>
    </div>
  </>
);

const List = styled.div`
  color: #303030;
  font-family: "Roboto", sans-serif;

  &:hover {
    font-weight: bold;
  }

  & ~ & {
    background-color: red;
  }

  & + & {
    background-color: greenyellow;
  }

  &.something {
    background-color: orange;
  }

  .something-else & {
    background-color: grey;
  }
`;

Refiriéndose a otros componentes.

En lugar de sólo referirse a cualquier tipo de selectores, también puede referirse a otros componentes de estilos.

const Title = styled.h1`
  color: blue;
`;

const Content = styled.div`
  ${Title} {
    color: green;
  }
`;

Esto anulará los estilos originales de Title.

Animaciones.

Puedes hacer animaciones importando keyframes.

import styled, { keyframes } from "styled-components";

Y crear una animación como en CSS.

const change = keyframes`
  0% { transform: scale(0.7,0.7) }
  100% { transform: scale(1.5,1.5) }
`;

const Text = styled.span`
  font-size: 1.2rem;
  padding: 2rem 1rem;
  display: inline-block;
  animation: ${change} 2s linear infinite;
`;

Estilos globales.

Puedes crear estilos globales importando createGlobalStyle.

import { createGlobalStyle } from "styled-components";

De esta forma tener estilos globales para toda tu aplicación.

const StyledGlobal = () => <GlobalStyle />;

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    color: #303030;
    background-color: #f6f6f6;
    font-family: 'Lato', sans-serif;
  }
`;

export default StyledGlobal;

Importa el componente global en el componente raíz de su aplicación.

import StyledGlobal from "../utils/StyledGlobal";

Espero les guste :)

Explicit and implicit return in function (Spanish)

Alfredo Carreón Urbano — Sun, 24 May 2020 06:22:52 +0000

Antes de iniciar.

Explícito: Que expresa algo con claridad.
Implícito: Que está incluido, sin que está lo especifique.

Retorno explícito.

Las funciones regulares y las funciones flecha pueden comportarse de forma similar, ya que podemos devolver un valor explícitamente, utilizando la palabra reservada “return”.

Función regular.

function add(x,y) { // Statements
  return x + y;
}

Función flecha.

const add = (x,y) => {
  return x + y;
}

Retorno implícito.

Las funciones flecha tiene una ventaja sobre las funciones regulares, ya que las funciones flecha pueden devolver un valor de forma implícitamente, simplemente omitimos las llaves que normalmente envuelven el cuerpo de una función.

Nota: El implícito es exclusivo de las funciones flecha.

const increment = x => ++x; // Expression

Cuando se usan retornos implícitos, los objetos deben estar entre paréntesis para que las llaves no se confundan con la apertura del cuerpo de la función.

const obj = () => { name: "Victor" }; // return undefined
const obj = () => ({ name: "Victor" }); // return { name: "Victor"}

¿Cuándo usarlos?

Si tu función necesita varias declaraciones entonces retorna de forma explícita, de lo contrario use la forma implícita y ahorra lineas de código.

Espero les guste :)

Use Strict - JS (Spanish)

Alfredo Carreón Urbano — Sat, 16 May 2020 02:59:03 +0000

Introducción.

Use strict ya no es necesario desde el ECMAScript 6, pero me motive a escribir esta publicación, ya que últimamente he estado trabajando en proyectos muy viejos, mejorando el control y limpieza en código.

¿Qué es use strict?

Use strict se refiere a un "modo estricto", esta es una funcionalidad de ECMAScript 5 que permitió en su momento desarrollar todo un código o partes del mismo, ejecutarse en un contexto "estricto".

Es una expresión literal, es compatible con versiones anteriores JS e innecesaria en ECMAScript 6.

La funcionalidad de utilizar el use strict es indicar que el código o parte de esté, debe ejecutarse previniendo que se tomen ciertas acciones erróneas o malos hábitos de programación y de esta manera arrojando más excepciones.

Beneficios:

Obtenemos errores comunes (mala sintaxis) en nuestro código y nos muestra la excepción.
Las partes más inseguras (peligrosas) o inútiles en JS están prohibidas o lazan errores en ejecución.
Es más legible el código evitando funcionalidades confusas y malos hábitos de programación.
Utilizar use strict mejora nuestro código y facilita escribir código más seguro.
Cuando use strict esta desactivado permite propiedades, variables y objetos no existentes (no declarados) haciendo inseguro el código.

¿Cómo usar use strict?

Use strict se encuentra desactivado por default, para activar el modo estricto en un script, es necesario agregar la directiva entre comillas dobles "use strict".
Colocar la directiva depende hasta qué punto deseas utilizarla, es decir si se coloca en el inicio del archivo el modo estricto afectara a todo el script, pero también puede utilizarse en una función en específico.

Modo estricto en todo el script:

"use strict";

x = 7; // ReferenceError: x is not defined 

// Variables declared successful execution.
var x = 7, y = 7;
var res = x + y;

Modo estricto en una función:

// Code in non-strict mode.
name = "Alfredo";

function fun() {
    // Code in strict mode.
    "use strict";
    lastName = "Urbano"; // ReferenceError: x is not defined 
    var lastName = "Urbano"; // Variable declared successful execution.
}

// Code in non-strict mode.
fun();
nickName = "Ferillo";

Los navegadores que soportan 'use strict' son:

Fuente: Can i use

Conclusión.

¡Puedes usar el modo estricto en todos tus programas de JS! Si deseas tener un mejor control en tu código, más seguro, escribir código más limpio y evitar usar variables no declaradas, usa el modo estricto de ECMAScript 5.

Referencias.

Espero les guste :)

Create a project in React without create-react-app (Spanish)

Alfredo Carreón Urbano — Thu, 16 Apr 2020 21:21:32 +0000

Hola a todos, esta es la publicación actualizada y resumida 🥳

Create a project in React without create-react-app/vite 2023 (Spanish)

Alfredo Carreón Urbano ・ Jan 8 '23

#javascript #webdev #beginners #tutorial

Introducción

El comando de create-react-app nos ahorra mucho tiempo de configuración para iniciar nuestros proyectos en React.

Pero no vamos a usar create-react-app, nosotros mismos vamos a crear la configuración de nuestro proyecto desde cero.

Si deseas gestionar tu mismo la configuración de tu proyecto desde cero, entonces puede que esta publicación sea útil para ti.

Objetivo

Mi objetivo es que se pueda comprender lo que se necesita para crear una aplicación de React y los conceptos básicos de agrupación.

Tener nociones de como funciona por detrás y tener un cierto control sobre la estructura de la aplicación.

Herramientas antes de iniciar

Un editor de código, puedes usar VSCode, Atom o el editor de tu preferencia.
Un navegador actualizado.
Terminal de comandos.
Tener instalado Node y npm.
Tener instalado Git y tener una cuenta en Github.

1. Crear Repositorio en Github

Primero vamos a crear un nuevo repositorio en Github.

Agregamos un nombre.
Agregamos una descripción.
Seleccionamos publico, esto para poderlo compartir con la comunidad.
Damos clic para inicializar un README en nuestro proyecto.
Agregamos un archivo .gitignore con configuración Node.
Agregamos una licencia MIT, para indicar que nuestro código es libre y que otros desarrolladores puedan utilizarlo y modificarlo.

Después de crear nuestro proyecto vamos a clonarlo.

Vamos a nuestra terminal, elegimos nuestro directorio para clonar nuestro proyecto.

Utilizamos el comando:

git clone URL_REPOSITORIO

2. Iniciar proyecto, instalación de React y ReactDOM

Utilizamos el comando:

npm init -y

Se crea nuestro package.json con una configuración por defecto.

{
  "name": "curriculumvitae",
  "version": "1.0.0",
  "description": "- Crear un proyecto desde 0 con React JS.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AlfredoCU/curriculumvitae.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AlfredoCU/curriculumvitae/issues"
  },
  "homepage": "https://github.com/AlfredoCU/curriculumvitae#readme"
}

Ahora vamos a instalar React y ReactDOM con el siguiente comando:

 npm install react react-dom --save

Paquetes instalados:

+ react-dom@16.13.1
+ react@16.13.1
added 8 packages from 3 contributors and audited 22 packages in 2.845s
found 0 vulnerabilities

Nota: es importante observar que las versiones de estos paquetes se encuentren con cero vulnerabilidades para evitar problemas en producción.

3. Instalación y configuración de Babel

Babel es una herramienta que nos ayuda a transpilar nuestro código React y JavaScript modernos a un código JavaScript que pueda entender los navegadores.

Vamos añadir babel a nuestro proyecto con el siguiente comando:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

Paquetes instalados:

+ @babel/preset-react@7.9.4
+ babel-loader@8.1.0
+ @babel/core@7.9.0
+ @babel/preset-env@7.9.5
added 174 packages from 83 contributors and audited 2091 packages in 25.106s
found 0 vulnerabilities

Ahora vamos a instalar un plugin para transpilar clases o funciones flecha en funciones normales.

Utilizamos el comando:

npm install babel-plugin-transform-class-properties --save-dev

Paquete instalado:

+ babel-plugin-transform-class-properties@6.24.1
added 22 packages from 7 contributors and audited 11297 packages in 9.881s
found 0 vulnerabilities

Vamos a crear un archivo en la raíz del proyecto llamado .babelrc el cual tendrá toda la configuración requerida de Babel, puedes descubrir todas las posibles configuraciones en: https://babeljs.io/docs/en/config-files

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}

4. Instalación y configuración de Webpack

Webpack es una herramienta que nos puede ayudar a compilar todos nuestros archivos de JavaScript en un sólo archivo o paquete que podemos usar en producción.

Utilizamos el comando:

npm install webpack webpack-cli html-webpack-plugin html-loader --save-dev

Paquetes instalados:

+ html-webpack-plugin@4.2.0
+ webpack@4.42.1
+ html-loader@1.1.0
+ webpack-cli@3.3.11
added 458 packages from 303 contributors and audited 7546 packages in 109.415s
found 0 vulnerabilities

Vamos a escribir la configuración de Webpack en un archivo en la raíz del proyecto llamado webpack.config.js, puedes aprender más sobre cómo configurar estos archivos en: https://webpack.js.org/configuration

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],
};

5. Estructura del proyecto

Vamos a crear la estructura de nuestro proyecto.

Crear la carpeta src/ para guardar nuestro código JavaScript.
Crear la carpeta public/ para archivos estáticos de nuestro proyecto como index.html, iconos, imágenes, etc.
El archivo src/index.js será el archivo principal de JavaScript donde vamos a importar el resto de componentes y contenedores de nuestra aplicación.
Vamos a crear nuestros componentes en la carpeta src/components y los contenedores de estos componentes en la carpeta src/containers.

Nota: Todos nuestros componentes deben comenzar con una letra mayúscula a pesar de que los archivos sigan alguna otra convención.

Debemos de verificar que la carpeta node_modules/ se encuentre en el archivo .gitignore para no subirlo a Github ni a producción porque es una carpeta muy pesada y puede dañar nuestro proyecto.

También agregar la carpeta dist/ en el archivo .gitignore, esta carpeta almacenara la compilación de nuestro proyecto.

6. Creando nuestros archivos

Ya esta hecha la estructura de nuestro proyecto, vamos a crear un componente llamado src/components/About.jsx lo cual sólo nos mostrara un "Hola Mundo".

import React from "react";

const About = () => {
  return (
    <div>
      <h1> Hola Mundo! </h1>
    </div>
  );
};

export default About;

Creamos un archivo src/index.js, vamos añadir nuestro componente para después enviarlo a nuestro archivo index.html.

import React from "react";
import ReactDOM from "react-dom";
import About from "./components/About";

ReactDOM.render(<About />, document.getElementById("app"));

Creamos un archivo public/index.html hacemos la referencia por medio del id "app" para que busque y empujar nuestra aplicación.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

7. Creando nuestro servidor local

Vamos a usar Webpack Dev Server para crear un servidor local que nos permita visualizar los cambios de nuestro proyecto en tiempo real, es decir, sin recargar el navegador.

Utilizamos el comando:

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

Paquete instalado:

+ webpack-dev-server@3.10.3
added 175 packages from 117 contributors and audited 11142 packages in 31.689s
found 0 vulnerabilities

También, vamos a crear dos nuevos scripts en nuestro package.json.

build para compilar nuestro proyecto (para producción).
start para iniciar un servidor con live reload en el puerto 8080 (para desarrollo).

"scripts": {
  "start": "webpack-cli serve --open --mode development",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
}

Puedes encontrar más información sobre Webpack Dev Server y Live Reload en: https://webpack.js.org/configuration/dev-server/

Utilizamos el comando:

npm run build

Nos creara una carpeta llamada dist, donde almacena la compilación del proyecto:

...
Hash: 9769c65335e6604e9abb
Version: webpack 4.42.1
Time: 5643ms
Built at: 2020-04-15 21:49:06
       Asset       Size  Chunks             Chunk Names
./index.html  226 bytes          [emitted]  
   bundle.js    128 KiB       0  [emitted]  main
...

Estructura final del proyecto.

Utilizamos el comando:

npm run start

Corre nuestro servidor:

...
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
...

¡Listo!

Espero les guste :)

API COVID-19 Data Visualization with React JS (Spanish)

Alfredo Carreón Urbano — Mon, 13 Apr 2020 22:34:32 +0000

Introducción:

Nos encontramos viviendo un momento complicado en todo el mundo a causa de la pandemia de COVID-19 que cada día crece de manera exponencial.

Como desarrollador soy nuevo en la industria y por fortuna mi trabajo me da la libertad de trabajar desde casa.

Y creo que ante el caos llega la creatividad.

En mis tiempos libres pensé en crear una aplicación en React que consume información de una API sobre los casos actuales de COVID-19 para reforzar y obtener nuevos conocimientos.

De alguna forma dar mi aporte a la comunidad, ya que considero que mantenerse informados es la mejor manera de prevenir el contagio.

Por lo que mi motivación de realizar este proyecto es ser parte de una comunidad, ayudar a los demás y crecer de manera profesional (así como persona).

Tecnologías y herramientas que utilice son las siguientes:

React: es una biblioteca de JavaScript para construir interfaces de usuario.
Moment: es una biblioteca para analizar, validar, manipular y mostrar fechas y horas en JavaScript.
Particles: es una biblioteca ligera de JavaScript para crear partículas, en la cual también existe un componente para utilizar en React.
Material UI: para varios estilos utilice esta increíble kit de componentes. Si gustas tener más opciones, esta publicación te ayudara mucho 20+ Best React UI Component Libraries / Frameworks for 2020, creado por Chris Fitzgerald.
gh-pages: usada para hacer un deploy de nuestra aplicación a github pages. Si quieres aprender a hacer un deploy esta publicación te ayudara mucho How to deploy React App to GitHub Pages, creado por Ibrahim Ragab.

API:

Investigué cual sería una buena API para utilizar en mi aplicación, y me encontré con una gran cantidad, entre las cuales se encuentran:

Coronavirus COVID19 API: proporciona casos actuales y más información sobre COVID-19.
COVID19-Tracker-REST API: proporciona casos actuales y más información sobre COVID-19.
Coronavirus Data API (thevirustracker.com): proporciona estadísticas globales, estadísticas de país, cronología completa y cronología de país para el coronavirus.
Coronavirus Smartable (smartable.ai): La API de estadísticas y noticias de coronavirus ofrece estadísticas e información de noticias COVID-19 más recientes e históricas por país o estado.
COVID-19 Elsevier Research API: Una API de motor de búsqueda de conjuntos de datos de investigación (indexando conjuntos de datos de más de 60 repositorios de datos científicos en todo el mundo).

Así como muchas más, publicadas en: https://covid-19-apis.postman.com/ la cual puedes utilizar para crear tus proyectos.

Código:

En esta aplicación se utilizo “Coronavirus COVID19 API” ya que para mi es una de las más completas y organizadas, pero conforme la fui probando llegue a tener algunos problemas y la información tarda en ser actualizada. Por estas razones espero en un futuro probar con otra API.

class App extends Component {
  state = {
    data: [],
  };

  stateData = (dataApi) => {
    this.setState({ data: dataApi });
  };

  getData = async () => {
    let response = await fetch("https://api.covid19api.com/summary");
    let data = await response.json();
    this.stateData(data);
  };

  componentDidMount() {
    this.getData();
  }

  render() {
    const { data } = this.state;

    return (
      <>
        <header className="app-header">
          <h1>COVID-19</h1>
        </header>
        <Grid container direction="row" justify="center" alignItems="center">
          <InfoGlobal
            date={data.Date}
            NewConfirmed={data.Global && data.Global.NewConfirmed}
            TotalConfirmed={data.Global && data.Global.TotalConfirmed}
            NewDeaths={data.Global && data.Global.NewDeaths}
            TotalDeaths={data.Global && data.Global.TotalDeaths}
            NewRecovered={data.Global && data.Global.NewRecovered}
            TotalRecovered={data.Global && data.Global.TotalRecovered}
          />
        </Grid>
        <Grid container direction="row" justify="center" alignItems="center">
          <SearchInfo Countries={data.Countries} />
        </Grid>
        <Grid container direction="row" justify="center" alignItems="center">
          <CountryInfo Countries={data.Countries} />
        </Grid>
      </>
    );
  }
}

export default App;

Pueden ver el proyecto completo en mi repositorio de Github: https://github.com/AlfredoCU/Covid-19
Y la aplicación funcional en: https://alfredocu.github.io/Covid-19/

APP:

Experiencia:

Fue genial realizar este pequeña aplicación en mi tiempo libre, me siento muy motivado de poder hacer cosas que me gustan, y en un futuro poder crear aplicaciones más complejas y divertidas.

Este es mi primera publicación espero les haya gustado.