my_notes();

Historia

React fue creada por Jordan Walke, un ingeniero de software en Facebook, inspirado por los problemas que tenía la compañía con el mantenimiento del código de los anuncios dentro de su plataforma.

Enfocado en la experiencia del usuario y la eficiencia para sus programadores, influenciado por XHP (un marco de componentes de HTML para PHP), nace el prototipo ReactJS 2011.

React

Una biblioteca de JavaScript para construir interfaces de usuario.

React (también llamada React.js o ReactJS) es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página.

Es mantenido por Facebook y la comunidad de software libre. En el proyecto hay más de mil desarrolladores libres.

React intenta ayudar a los desarrolladores a construir aplicaciones que usan datos que cambian todo el tiempo.

Su objetivo es ser sencillo, declarativo y fácil de combinar.

React sólo maneja la interfaz de usuario en una aplicación; React es la Vista en un contexto en el que se use el patrón MVC (Modelo-Vista-Controlador) o MVVM (Modelo-vista-modelo de vista).

También puede ser utilizado con las extensiones de React-based que se encargan de las partes no-UI (que no forman parte de la interfaz de usuario) de una aplicación web.

Declarativo

React te ayuda a crear interfaces de usuario interactivas de forma sencilla.

Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.

Las vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.

Basado en componentes

Crea componentes encapsulados que manejen su propio estado, y conviértelos en interfaces de usuario complejas.

Ya que la lógica de los componentes está escrita en JavaScript y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.

Aprende una vez, escríbelo donde sea

En React no dejamos fuera al resto de tus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente.

React puede también renderizar desde el servidor usando Node, así como potencializar aplicaciones móviles usando React Native.

React Native

React Native es como React, pero utiliza componentes nativos en lugar de componentes web como bloques de construcción.

Entonces, para comprender la estructura básica de una aplicación React Native, debe comprender algunos de los conceptos básicos de React, como JSX, componentes, estado y accesorios.

Si ya conoce React, aún necesita aprender algunas cosas específicas de React-Native, como los componentes nativos.

Cree aplicaciones nativas para Android e iOS usando React

React Native combina las mejores partes del desarrollo nativo con React, la mejor biblioteca de JavaScript de su clase para crear interfaces de usuario.

Use un poco o mucho. Puede usar React Native hoy en sus proyectos existentes de Android e iOS o puede crear una aplicación completamente nueva desde cero.

Escrito en JavaScript: renderizado con código nativo

Las primitivas de React se procesan en la IU de la plataforma nativa, lo que significa que su aplicación usa las mismas API de plataforma nativa que otras aplicaciones.

Muchas plataformas, un React. Cree versiones de componentes específicas de la plataforma para que una única base de código pueda compartir código entre plataformas. Con React Native, un equipo puede mantener dos plataformas y compartir una tecnología común: React.

Antecedentes

En 2015, el diseñador Frances Berriman y el ingeniero de Google Chrome Alex Russell acuñaron el término "aplicaciones web progresivas" para describir las aplicaciones que aprovechan las nuevas funciones compatibles con los navegadores modernos, incluidos los service worker web y los manifiestos de aplicaciones web, que permiten a los usuarios actualizar las aplicaciones web a aplicaciones web progresivas en su sistema operativo (SO) nativo.

Google luego realizó esfuerzos significativos para promover el desarrollo de PWA para Android.

Con la introducción por parte de Apple de la asistencia de los service worker para Safari en 2017, las PWA han pasado a ser compatibles con los dos sistemas operativos móviles más utilizados, Android e iOS.

En 2019, las PWA estaban disponibles en los navegadores de escritorio Microsoft Edge 10 (en Windows) y Google Chrome11 (en Windows, macOS, Chrome OS y Linux).

PWA

Una aplicación web progresiva (PWA por sus siglas en inglés) es un tipo de software de aplicación que se entrega a través de la web, creado utilizando tecnologías web comunes como HTML, CSS y JavaScript.

Está destinado a funcionar en cualquier plataforma que use un navegador compatible con los estándares.

La funcionalidad incluye:

Trabajar sin conexión,
Notificaciones push y
Acceso al hardware del dispositivo

lo que permite crear experiencias de usuario similares a las aplicaciones nativas en dispositivos móviles y de escritorio.

Dado que una aplicación web progresiva es un tipo de página web o sitio web conocido como aplicación web, no hay ningún requisito para que los desarrolladores o usuarios instalen las aplicaciones web a través de sistemas de distribución digital como Apple App Store o Google Play.

Si bien las aplicaciones web han estado disponibles para dispositivos móviles desde el principio, en general han sido más lentas, con menos funciones, y han sido utilizadas en menor medida que las aplicaciones nativas.

Pero con la capacidad de trabajar sin conexión, que antes solo estaba disponible para aplicaciones nativas, los PWA que se ejecutan en dispositivos móviles pueden funcionar mucho más rápido y proporcionar más funciones, cerrando la brecha con las aplicaciones nativas, además de ser portátiles en plataformas de escritorio y móviles.

Los PWA no requieren agrupación o distribución por separado.

La publicación de una aplicación web progresiva es como sería para cualquier otra página web.

Los PWA funcionan en cualquier navegador, pero las características "similares a las aplicaciones", como:

Ser independientes de la conectividad,
Instalarse en la pantalla de inicio y
enviar mensajes

Dependen de la compatibilidad del mismo.

A partir de abril de 2018, esas características son compatibles en diversos grados con los navegadores Microsoft Edge, Google Chrome, Mozilla Firefox y Apple Safari, pero es posible que más navegadores admitan las funciones necesarias en el futuro.

Características

Las aplicaciones web progresivas están diseñadas para funcionar en cualquier navegador que cumpla con los estándares web.

Al igual que con otras soluciones multiplataforma, el objetivo es ayudar a los desarrolladores a crear aplicaciones multiplataforma más fácilmente de lo que lo harían con las aplicaciones nativas.

Según los desarrolladores de Google, las características de una PWA son:

Progresiva: funciona para todos los usuarios, independientemente de la elección del navegador, utilizando principios de mejora progresiva.
Responsiva: se adapta a cualquier factor de forma: computadora de escritorio, dispositivo móvil, tableta o formato que aún no han surgido. Más rápido después de la carga inicial: una vez finalizada la carga inicial, no es necesario volver a descargar el mismo contenido y elementos de página cada vez. Los sitios web ordinarios a menudo utilizan la memoria caché del navegador para evitar volver a descargar los mismos datos de forma redundante, mientras que para las PWA, el navegador asigna su propio espacio de almacenamiento independiente.
Conectividad independiente: los service worker permiten usos fuera de línea o en redes de baja calidad.
Como una aplicación: se siente como una aplicación para el usuario con interacciones y navegación de estilo de aplicación.
Actualizado: siempre actualizado debido al proceso de actualización del trabajador de servicio.
Seguro : se sirve a través de HTTPS para evitar espiar y garantizar que el contenido no haya sido manipulado.
Detectable : identificable como una "aplicación" por manifest.json y el registro del service worker, y detectable por los motores de búsqueda.
Reconectable: capacidad de utilizar notificaciones push para mantener la experiencia de usuario.
Instalable: proporciona iconos de la pantalla de inicio sin el uso de una tienda de aplicaciones.
Vinculable: se puede compartir fácilmente a través de una URL y no requiere una instalación compleja.

Russell describió los criterios de referencia técnicos para que un sitio sea considerado una aplicación web progresiva por los navegadores en una publicación de seguimiento:

Origen seguro. Servido sobre tecnologías de cifrado web modernas como TLS.
Cargue sin conexión (aunque solo sea una página sin conexión personalizada). Por implicación, esto significa que las aplicaciones web progresivas requieren de service worker.
Manifiesto de aplicación web con al menos las cuatro propiedades clave: nombre, short_name, start_url y display (con un valor de pantalla independiente o pantalla completa)
Un icono de al menos 144×144 de tamaño grande en formato PNG.
Uso de gráficos vectoriales.

Algunas aplicaciones web progresivas utilizan un enfoque arquitectónico llamado App Shell Model.

En este modelo, los service worker almacenan la interfaz de usuario básica o "shell" de la aplicación en la memoria caché sin conexión del navegador.

Este modelo permite que los PWA mantengan un uso nativo con o sin conectividad web.

Esto puede mejorar el tiempo de carga, al proporcionar un marco estático inicial, un diseño o arquitectura en el que el contenido se puede cargar de forma progresiva y dinámica.

Un service worker es una secuencia de comandos que tu navegador ejecuta en segundo plano, separado de una página web, abriéndoles la puerta a funciones que no necesitan una página web ni interacción de usuario.

En la actualidad, ya incorporan funciones como notificaciones push y sincronización en segundo plano.

En el futuro, los service workers podrían admitir funciones como sincronización periódica o geovallado.

La función principal es la capacidad de interceptar y manejar solicitudes de red, incluida la administración programática de una caché de respuestas.

El motivo por el que esta es una API tan emocionante es que permite admitir experiencias sin conexión, brindándoles a los programadores control total sobre la experiencia.

Antes del service worker, existía otra API que brindaba a los usuarios una experiencia sin conexión en la Web, llamada AppCache.

Hay una serie de problemas de la API de AppCache que se pueden evitar con los service workers.

Algunas consideraciones sobre los service workers:

Son JavaScript Workers, así que no pueden acceder al DOM directamente. Como alternativa, un service worker puede comunicarse con las páginas que controla porque responde a mensajes enviados a través de la interfaz de postMessage; estas páginas pueden manipular el DOM si es necesario.
Un service worker es un proxy de red programable. Esto permite controlar la manera en que se procesan las solicitudes de red de tu página.
Se detiene cuando no está en uso y se reinicia cuando se lo necesita nuevamente, así que no puedes confiar en el estado global de los controladores onfetch y onmessage de un service worker. Si hay información que necesitas que persista para reutilizar entre reinicios, los service workers tienen acceso a la API de IndexedDB.
Los service workers hacen gran uso de las promesas, así que, si no estás familiarizado con el concepto, deberías dejar de leer esto y leer Promesas de JavaScript.

El ciclo de vida del service worker

A continuación, se muestra una versión muy simplificada del ciclo de vida del service worker cuando se instala por primera vez.

Un service worker tiene un ciclo de vida completamente separado de tu página web.

Si quieres instalar un service worker para tu sitio, debes registrarlo. Esto se realiza en el lenguaje JavaScript de tu página. Cuando registres un service worker, el navegador iniciará la etapa de instalación del proceso en segundo plano.

Por lo general, durante la etapa de instalación, te convendrá almacenar en caché algunos elementos estáticos. Si todos los archivos se almacenan correctamente en caché, se instalará el service worker. Si no se puede descargar o almacenar en caché alguno de los archivos, el paso de instalación fallará y el service worker no se activará (es decir, no se instalará). Si esto ocurre, no te preocupes; se realizará un nuevo intento la próxima vez. Sin embargo, si la instalación tiene éxito, podrás estar seguro de que dichos elementos estáticos estarán en la caché.

Después de la instalación, comenzará el paso de activación. Es una excelente oportunidad para administrar las cachés anteriores. Trataremos este asunto durante la sección sobre la actualización de los service workers.

Después de la etapa de activación, el service worker controlará todas las páginas que estén a su alcance. Sin embargo, no se controlará la página que registró por primera vez el service worker hasta que se vuelva a cargar. Una vez que un service worker tiene el control, estará en uno de dos estados: el service worker se rescindirá para ahorrar memoria o controlará eventos de mensaje y extracción que ocurran cuando se emita un mensaje o solicitud de red desde tu página.

Lighthouse es una herramienta automatizada de código abierto para mejorar el rendimiento, la calidad y la corrección de sus aplicaciones web.

Al auditar una página, Lighthouse ejecuta una serie de pruebas en la página y luego genera un informe sobre el rendimiento de la página.

Desde aquí, puede utilizar las pruebas fallidas como indicadores de lo que puede hacer para mejorar su aplicación.

Descarga y uso

Al acceder a https://developers.google.com/web/tools/lighthouse puede descargar y desintalar la extensión, también documentación sobre su uso.

Desde Google Chrome de clic derecho sobre una página y elija la opción inspeccionar, en el menú encontrará la opción Lighthouse, dónde podrá seleccionar categorías y dispositivos para generar un reporte y comenzará la auditoría sobre la página, finalizando con la presentación del reporte.

Historia El desarrollo público de Polymer comenzó el 14 de noviembre de 2013 con la liberación de Promises Polyfill.

Esto creció constantemente hasta convertirse en una biblioteca de diseño web que cubre las pautas de estilo visual (a través del Material Design), del enlace de datos, y un gran número componentes web básico y auxiliares.

Originalmente, los componentes básicos se concibieron para abarcar una funcionalidad genérica que sería esencial para la mayoría de los sitios web, mientras que los componentes de auxiliares estaban destinados a proporcionar componentes más especializados con conceptos de Material Design que formaban una parte clave de su diseño.

Se alcanzó un hito importante con la publicación de la versión 0.5, que fue considerada la primera versión del proyecto lista para ser utilizada por los primeros usuarios.

Google continuó revisando el diseño de Polymer después de la publicación de 0.5, con especial atención a los problemas de rendimiento hallados por desarrolladores.

Esto culminó con la liberación de Polymer 1.0 en 2015, que fue la primera versión "lista para la producción" de la biblioteca.

La versión 1.0 mejoró significativamente el rendimiento del Polymer, reduciendo los tiempos de carga hasta 7 veces.

Con la versión 1.0 Google separó los elementos del proyecto Polymer para distinguir claramente entre los de elementos del catálogo de Polymer polyfill y los componentes web.

Polymer

Bibliotecas, herramientas y estándares para una mejor web.

Polymer es una biblioteca JavaScript de código abierto para la creación de aplicaciones web utilizando componentes web.

La biblioteca está siendo desarrollada por los desarrolladores y colaboradores de Google en GitHub.

Los principios de diseño modernos se implementan como un proyecto separado utilizando los principios de Material Design de Google.

Polymer es utilizado por varios servicios y sitios web de Google, incluidos los rediseñados YouTube, YouTube Gaming, Google Earth,8 sitios web de Google I/O, Google Play Music, Google Sites y Allo para web.

Por ejemplo puede acceder a https://polymer-library.polymer-project.org/3.0/docs/about_30 e instalar desde la opción Install Polymer 3.x

Configuración

Cree un directorio para el aplicativo.

Abra la terminal, ubíquese en el directorio creado y desde este ejecute el comando: polymer init

La configuración muestra algunas opciones, seleccione la opción que más le convenga.

Deberá ingresar un nombre para el aplicativo.

Deberá ingresar un nombre del elemento principal.

Deberá ingresar la descripción del aplicativo.

Al aceptar se crearán los archivos y directorios necesarios para el proyecto.

Con el editor de texto o IDE de conveniencia, explore los archivos y encontrará el archivo read.me que contiene indicaciones de como usar la herramienta.

Uno de los directorios creados es /src en este encontrará el web component creado por polymer.

Ejecute el comando polymer serve para lanzar el aplicativo, y se inicia un servidor web, el cual indica en la consola la IP por la cual podemos acceder al aplicativo en el ambiente web.

En el directorio principal existe un archivo index.html, como demostración viene un Hello <nombre-app>

Nota: asegurese que el nombre de la etiqueta este escrito en minúsculas.

Puede basarse en la clase creada para crear otros web components.

Para reemplazar contenido dinámico use dobles corchetes [[ ]]

Para probar puede hacerlo desde el app.js

Será necesario importar el web component creado, se puede guiar con el código del web component de demostración

Los componentes web son un conjunto de características que actualmente están siendo añadidas por el W3C a las especificaciones HTML y DOM de forma que permite la creación de widgets o componentes reutilizables en documentos y aplicaciones web.

La intención de estos componentes es traer la ingeniería basada en componentes a la World Wide Web.

El modelo de componentes permite la encapsulación e interoperabilidad de elementos de HTML individuales.

Las principales características de los componentes web son 4 y pueden utilizarse juntas o por separado:

Elementos personalizados - APIs para definir elementos HTML nuevos.
Sombra DOM - DOM y estilos encapsulados, con composición.
Importaciones de HTML - Métodos declarativos para importar documentos HTML a otros documentos.
Plantillas de HTML - El elemento <template> que permite que los documentos contengan trozos inertes del DOM.

iron-elements (Core elements)

Bloques de construcción básicos para crear una aplicación.

La mayoría de los iron-elements> se denominaban anteriormente elementos centrales, cuando eran compatibles con la versión "Developer Preview" de la biblioteca de Polymer.

iron-ajax

El elemento iron-ajax expone de forma declarativa la funcionalidad de solicitud de red al sistema de enlace de datos de Polymer.

Mejor consulte: /element/@polymer/iron-ajax

Para instalar:

npm install --save @polymer/iron-ajax

Una vez instalado puede importarlo a sus proyectos:

import '@polymer/iron-ajax'

Tal vez puedes acceder al sitio de Node.js® que es Runtime de JavaScript basado en el motor de JavaScript V8 de Chrome.

Como Runtime de JavaScript asincrónico controlado por eventos, Node.js está diseñado para crear aplicaciones de red escalables.

Buscas la sección de descargas y ocupa tu versión de conveniencia, así como otras alternativas como chocolatey para Windows o brew para Mac, react developertools extensión para Google Chrome (add to chrome) una vez instalada la extensión aquellos sitios que estén hechos con la herramienta se mostrará activo el ícono de React así como mostrará un mensaje que lo indica.

Configure una aplicación web moderna ejecutando un comando.

Create React App le permite enfocarse en el código, no en construir herramientas.

Para crear un proyecto llamado my-app, ejecute este comando:

npm es el registro de software más grande del mundo.

Los desarrolladores de código abierto de todos los continentes usan npm para compartir y tomar prestados paquetes, y muchas organizaciones también usan npm para administrar el desarrollo privado.

Ejecuta comandos ya sea desde un node_modules/.bin local, o desde un caché central, instalando los paquetes necesarios para que el comando se ejecute.

Por defecto, npx verificará si el comando existe en $PATH, o en los binarios del proyecto local, y lo ejecutará. Si no se encuentra el comando, se instalará antes de la ejecución.

A menos que se especifique una opción --package, npx intentará adivinar el nombre del binario a invocar dependiendo del especificador proporcionado.

Todos los especificadores de paquetes comprendidos por npm se pueden usar con npx, incluidos los especificadores de git, tarballs remotos, directorios locales o paquetes con ámbito.

npx es una herramienta diseñada para ayudar a completar la experiencia de usar paquetes del registro npm; de la misma manera que npm hace que sea muy fácil instalar y administrar las dependencias alojadas en el registro, npx facilita el uso de herramientas CLI y otros ejecutables alojados en el registro.

Simplifica enormemente una serie de cosas que, hasta ahora, requerían un poco de ceremonia para hacer con npm simple.

Si todo bien, se mostrarán indicaciones como:

npm start

o

yarn start

Nota: es importante estar situados en el directorio del aplicativo /my-app y es posible que no acepte mayúsculas en el nombre del aplicativo.

El comando inicia un servidor web local, mostrando la URL e IP con el puerto donde se puede acceder al proyecto.

También abre la URL automáticamente en un navegador e indica un par de instrucciones:

Editar y almacenar el archivo src/App.js, recargar.
Learn React

La estructura de directorios creada, contiene un directorio public, el cual tiene un archivo manifest.json

Así como el directorio src tiene los archivos: App.js y serviceWorker.js, lo cual convierte al aplicativo en una aplicación web progresiva (PWA).

En el directorio raíz, se encuentra el archivo package.json, en este se encontrará configuración como:

Para iniciar el aplicativo, construir el aplicativo, para pruebas del aplicativo y liberación del aplicativo respectivamente.

Si editamos el archivo App.js contenido en el directorio src y ubicamos el texto de la página mostrada en el servidor web, podemos editarlo y almacenarlo, el servidor web esta en escucha permanente y actualizará cualquier cambio.

El siguiente puede ser nuestro ejemplo "Hola mundo":

Sobre esta estructura de directorios podemos trabajar y crear nuevos para una mejor organización, como por ejemplo crear un directorio para los estilos css.

Para crear componentes de React, es muy sencillo. Si queremos hacer uso de la Biblioteca React entonces debemos incluirla, eso se hace de la siguiente manera:

import React from "react"

Note la siguiente sintaxis, React es una biblioteca nativa:

import React, { Component } from "react"

React te permite definir componentes como clases o funciones.

Los componentes definidos como clases actualmente proporcionan una serie de características extra. Para definir una clase de componente React, necesitas extender.

El único método que debes definir en una subclase de React.Component es render().

En caso de necesitar agregar otra clase en el mismo archivo, usaremos la palabra reservada export antes de la declaración de la Clase.

Y en donde usemos la clase usaremos importe pero el nombre de la clase estará encerrado entre llaves { }.

Ejemplo

App.js

Importa la clase Encabezado, Moto y de esta clase usa su clase interna Estado.

Por tanto es posible invocar para la vista a: Encabezado, Moto y Estado.

Encabezado.js

Moto.js

Este archivo contiene 2 clases: Estado y Precio con las que se usa export

Moto invoca a Precio

Existe otra forma de hacer referencia a los componentes y es mediante un alias en caso de ser necesario usar todas las clases que contiene un componente con el comodin * y acceder a las clases mediante la notación de . (punto).

De lo contrario la referencia se hace a demanda, una por una de las clases utilizadas separadas por coma:

import Moto, { Estado, Precio } from './items/moto';

En tal caso App.js sería

JSX es una combinación de HTML y JavaScript

Se llama JSX, porque es una extensión de la sintaxis de JavaScript.

Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario.

JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.

Crea y retorna un nuevo elemento React del tipo dado (type).

El tipo del argumento puede ser ya sea un string de nombre de etiqueta (tales como 'div' o 'span'), un tipo de componente React (una clase o una función), o un tipo de fragmento React .

El código escrito con JSX será convertido para usar React.createElement().

Normalmente no se invocará React.createElement() directamente si se está usando JSX.

JSX no es un requisito para usar React. Usar React sin JSX es especialmente conveniente cuando no quieres configurar herramientas de compilación en tu entorno de desarrollo.

Para usar fragment puede ser necesario hacer un import explícito:

import React, { Component, Fragment } from "react";

Sintaxis corta

Hay una sintaxis nueva, más corta que puedes usar para declarar fragmentos. Parecen etiquetas vacías.

Puedes utilizar <></> de la misma manera que usarías cualquier otro elemento, excepto que este no soporta llaves o atributos.

Un patrón común en React es que un componente devuelva múltiples elementos.

Los Fragmentos te permiten agrupar una lista de hijos sin agregar nodos extra al DOM.

Moto.js

o bien:

o con sintaxis corta (donde se omite la palabra fragment):

Los comentarios son algo especiales por la combinación de JavaScript y HTML

Cuando es código Javascript los comentarios son los mismos.

El cambio esta cuando hay código HTML, ya que deben aplicarse como en JavaScript pero además encerrados entre llaves { } y en el caso de comentar una sola línea se debe tener cuidado de no dejar la llave que cierra en la misma línea ya que se considerará comentada también.

Estilos

Para integrar nombres de clases css no se utiliza class sino className

Componentes

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

La forma más sencilla de definir un componente es escribir una función de JavaScript:

Esta función es un componente de React válido porque acepta un solo argumento de objeto “props” (que proviene de propiedades) con datos y devuelve un elemento de React.

Llamamos a dichos componentes “funcionales” porque literalmente son funciones JavaScript.

También puedes utilizar una clase de ES6 para definir un componente:

Los dos componentes anteriores son equivalentes desde el punto de vista de React.

Propiedades

Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Un kit de herramientas de interfaz de usuario móvil de código abierto para crear experiencias de aplicaciones web y nativas multiplataforma de alta calidad.

Muévase más rápido con una única base de código, que se ejecuta en todas partes con JavaScript y la Web.

Ionic sirve para crear aplicaciones híbridas, un solo código para cualquier plataforma, es decir, crear una sola aplicación y luego generar esa aplicación en formato nativo para todas las plataformas (android, apple).

Instalación

Acceder al sitio de Ionic y ubicar la sección de instalación, elegir la opción que más convenga acorde a preferencias o SO.

Nota: tendras antes que descargar e instalar node.js

Creación de un proyecto Ionic

Para crear un proyecto Ionic se ejecuta el siguiente comando:

ionic start

Pero además es necesario asignar un nombre al proyecto

ionic start <nombre_Proyecto>

Y asignar una plantilla de Ionic

ionic start <nombre_Proyecto> <nombre_Plantilla_Ionic>

Si quieres una plantilla vacia usa tabs

A continuación como parte de la creación del proyecto, indica seleccionar entre los frameworks listados tales como: Angular, React o Vue. Navega con las flechas y elige el que más te convenga. Otra forma de hacer esto es agregar al final:

--type=<nombre_framework>

Debes tener la virtud de la tranquilidad y paciencia, en el tiempo que se demoran los procesos, en este caso tardará en instalar todas las dependencias.

Al final podría indicar si se quiere o no crear una cuenta gratis Ionic.

Archivos a tener en cuenta ubicados en raíz son: capacitor.config.json, ionic.config.json aquí por ejemplo en name tendremos como valor el nombre del proyecto y en type el nombre del framework a utilizar, package.json

Ejecutar el proyecto creado

Para compilar el proyecto y mantenerse a la escucha de cualquier cambio para re compilar, así como iniciar un servidor Web para el proyecto, mismo que despachará a través de un puerto y esto es indicado con la ip y dns.

Finalmete abre en el navegador la página inicial del proyecto.

Nota es importante que estes ubicado en el directorio del proyecto creado, de otra manera genera un error y te hace este señalamiento.

Index

React

References