Alquimista de código

En esta ocasión veremos cómo crear una sencilla aplicación con React . Es importante hacer notar que la herramienta https://create-react-app.dev/ ha sido deprecada ( declarada obsoleta ). Así que usaremos Vite para crear la aplicación. En una entrega anterior como instalarlo y usarlo. Recordemos un poco. Debemos contar con estas herramientas instaladas: Node y Npm.  Vite. En caso de no tenerlo instalado, procedemos a teclear esto en una terminal de comandos: $ npm install - g vite Verificamos la instalación con cualquiera de estos comandos: $ vite -- version $ npm list - g vite Crear una aplicación React con Vite nos lleva tan solo unos segundos (aproximadamente): $ mkdir holamundo $ cd holamundo $ npm create vite@latest holamundo - react -- -- template react $ npm install $ npm run dev Se abrirá el navegador en la URL: http://localhost:5173/ Creando una aplicación con React (y Vite) Podemos usar como base el proyecto anteriorm...

Esta vez veremos Vite, la cual es, según la documentación oficial: una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos. Consta de dos partes principales: Un servidor de desarrollo que proporciona mejoras enriquecidas de funcionalidades sobre módulos ES nativos, por ejemplo Hot Module Replacement ( HMR ) extremadamente rápido.  Un comando de compilación que empaqueta tu código con Rollup , preconfigurado para generar recursos estáticos altamente optimizados para producción. Como primer requisito es tener Node Js instalado y después instalar Vite . Podemos instalarlo de esta forma: $ npm install -g vite Una vez instalado creamos un directorio y nos ubicamos en el: $ mkdir holamundo $ cd holamundo Creamos un archivo `` index.html `` < h1 > Bienvenidos a Vite < h1 > Ejecutamos con este comando: $ npx vite Abrimos el navegador en la ruta: ...

Next JS es un framework web de desarrollo (también conocido como "metaframework") front-end de React de código abierto creado por Vercel que habilita funcionalidades como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Next JS utiliza la arquitectura JAMstack, que distingue entre frontend y backend y permite un desarrollo frontend eficiente que es independiente de cualquier API de backend . El marco admite CSS común, así como Scss y Sass precompilados, CSS-in-JS y JSX con estilo. Este framework tiene similitudes con React JS, Vue JS y otras herramientas. Instalando Next JS Requisitos: Node JS en su versión 18.18 o mayor. Instalando manualmente: $ npm install next@latest react@latest react-dom@latest Creando proyecto Next JS Creamos un directorio y nos ubicamos en el: $ mkdir myproject $ cd myproject $ npx create-next-app@latest Al ejecutarse este comando saldrá un prompt para...

En esta ocasión veremos una lista de frameworks y/o librerías para desarrollo de sitios web dinámicos.   Framework o librería   Descripción   Sitio oficial   React JS  Librería para interfaces de usuario web y nativas.   https://es.react.dev/   Angular    Framework de JavaScript de código abierto que permite crear aplicaciones web dinámicas de una sola página.   https://angular.dev/   Vue JS  Framework progresivo para crear páginas dinámicas.   https://vuejs.org/   Astro  El marco web para sitios web basados en contenido.   https://astro.build/   Svelte   Compilador Front End gratuito y de código abierto. Evolución de Ractive JS (https://ractive.js.org/)   https://svelte.dev/   Aurelia  Colección de módulos de JavaScript modernos que, cuando se usan juntos, funcionan como una poderosa plataforma para crear aplic...

Vue Js es considerado un Framework progresivo en el cual se van agregando módulos de acuerdo a la necesidad que vaya surgiendo. Al trabajar con este framework nos encontraremos que es muy similar a Angular y/o React JS. Vue Js , al igual que otras herramientas, es ideal para el desarrollo de aplicacaciones tipo SPA. Pero, ¿qué es una SPA? Una Single-Page Application (SPA) es un tipo de aplicación web que ejecuta todo su contenido en una sola página. Y funciona más o menos así: Al abrir la página web completa se irá cargando el contenido HTML, CSS y Javascript. Al abrir otra sección no se cargará de nuevo todo el contenido, solo esa sección. Así se obtienen diferentes vistas sobre la misma página. Es una forma dinámica de trabajo.  ¿Qué se necesita antes de usar este framework (y cualquier otro similar)? Tener nociones de HTML. Tener nociones de CSS. Tener nociones de Javascript. Un framework, en teoría, nos facilitará la existencia a la hora de desarrollar una aplica...

En pocas palabras, Elm es un lenguaje de programación dedicado al Front-End . El lenguaje promete crear sitios web profesionales con cierta facilidad.  Elm es un lenguaje funcional que se compila en JavaScript. Te ayuda a crear sitios web y aplicaciones web. Tiene un fuerte énfasis en la simplicidad y la calidad de las herramientas. Estructura general de un programa Elm. -- Module El módulo del programa -- Imports Las importaciones (como Java, etc.) -- Main Función principal del programa -- Model El modelo -- View La vista que verá el usuario -- Update Las operaciones a realizar El Hola mundo en Elm: Main.elm -- Module: modulo del programa module Main exposing (..) -- Imports: las importaciones import Html -- Main: funcion principal main = Html . text "Hola, mundo en Elm!!" En el sitio oficial de Elm ( https://guide.elm-lang.org/ ) se puede ver las instrucciones necesarias para su instalación.  Instala...

  React JS es una librería desarrollada por Facebook para aplicaciones web reactivas. Existen dos formas para desarrollar con React JS:     1. Incluyendo un archivo *.js en tus páginas HTML o     2. Desde la terminal con la aplicación create-react-app (de manera a similar a Angular Cli y/o Vue JS Cli). Para eso requieres tener Node JS (y por ende, NPM). index.html <!DOCTYPE html> <html> <head> <title> Aprendiendo React JS </title> <script crossorigin src= "https://unpkg.com/react@17/umd/react.development.js" ></script> <script crossorigin src= "https://unpkg.com/react-dom@17/umd/react-dom.development.js" ></script> <script src= "https://unpkg.com/babel-standalone@6.15.0/babel.min.js" ></script> <script> function inicio(){ alert( "Iniciando con React JS" ); console.log( ...