Create React App Create React App es un ambiente cómodo para aprender React, y es la mejor manera de comenzar a construir una nueva aplicación de página única usando React. Create React App configura tu ambiente de desarrollo de forma que puedas usar las últimas características de Javascript, brindando una buena experiencia de desarrollo, y optimizando tu aplicación para producción. Necesitarás tener Node >= 8.10 y npm >= 5.6 instalados en tu máquina. Para crear un proyecto ejecuta: npx create-react-app my-app cd my-app npm start Nota En la primera línea npx no es un error de escritura: Es una herramienta de ejecución de paquetes que viene con npm 5.2+. Create React App no se encarga de la lógica de backend o de bases de datos; tan solo crea un flujo de construcción para frontend, de manera que lo puedes usar con cualquier backend. Para ello internamente usa Babel y webpack, pero no necesitas saber nada de estas herramientas para usar Create React App. Cuando estés listo para desplegar a producción, ejecuta npm run build lo cual crea una compilación optimizada de tu aplicación en el directorio build. Puedes aprender más acerca de Create React App en su archivo README y en la Guía del Usuario. Next.js Next.js es un framework popular y ligero para aplicaciones estáticas y renderizadas en servidor construidas con React. Integra soluciones de estilo y enrutamiento y asume que estás usando Node.js como ambiente de servidor. Aprende Next.js de su guía oficial. Gatsby Gatsby es la mejor manera de crear sitios web estáticos usando React. Te permite usar componentes React, pero genera HTML y CSS pre-renderizado para garantizar el tiempo de carga más rápido. Aprende Gatsby de su guía oficial y de la galería de kits de inicio. Cadenas de herramientas más flexibles Las siguientes cadenas de herramientas ofrecen más opciones y flexibilidad. Las recomendamos para los usuarios con más experiencia: Neutrino combina el poder de webpack con la simplicidad de los presets (configuraciones preempaquetadas), e incluye presets para aplicaciones React y componentes React. Nx es un conjunto de herramientas para el desarrollo full-stack en monorepos, con compatibilidad incluida con React, Next.js, Express, y más. Parcel es un empaquetador de aplicaciones web rápido y de cero configuración que funciona con React. Razzle es un framework de renderizado en servidor que no requiere ninguna configuración, pero ofrece más flexibilidad que Next.js. Creando una cadena de herramientas desde cero Una cadena de herramientas para construir Javascript generalmente consiste de: Un gestor de paquetes como Yarn o npm. Este te permite aprovechar el vasto ecosistema de paquetes de terceros, e instalarlos o actualizarlos de una manera fácil. Un empaquetador como webpack o Parcel. Este te permite escribir código modular y empaquetarlo junto en paquetes más pequeños que optimizan el tiempo de carga. Un compilador como Babel. Este te permite escribir Javascript moderno que aún así funciona en navegadores más antiguos. Si prefieres configurar tu propia cadena de herramientas JavaScript desde cero, chequea esta guía que recrea parte de la funcionalidad de Create React App. No te olvides de asegurarte que tu cadena de herramientas esté configurada apropiadamente para producción.

INTRO Empezamos el repaso del contenido del segundo trimestre aprendiendo los conceptos fundamentales de IONIC. Como veremos en profundidad, IONIC es un framework basado en Componentes Web que nos ayuda a realizar no solo páginas web, sino también aplicaciones híbridas para móviles y tablets con diferentes sistemas operativos. Se trata simplemente que lo investiguéis y os hagáis una idea de sus posibilidades. En esta primera práctica lo veréis de forma aislada, aunque la verdadera potencia de IONIC se muestra cuando se mezcla con algún framework de desarrollo en JavaScript como Angular o React. ---------------------- Ideas fundamentales: ---------------------- -IONIC es, en principio, un conjunto de nuevas etiquetas que podéis incluir en vuestra páginas como si se trataran de etiquetas HTML. Son nuevas etiquetas que se denominan Componentes Web (Al igual que Angular). -Al igual que pasa con un control de un formulario .NET, podéis considerar un Componente Web como una etiqueta especial que tiene dos cosas unidas: un aspecto visual modificable y un comportamiento sin necesidad de escribir el código. ---------------------- Para empezar: ---------------------- - Para que el navegador reconozca esas nuevas etiquetas tenéis que enlazar a una librería, al igual que se hace con JQuery o BootStrap. Cuando se hacen proyectos de IONIC mezclados con Angular el proceso de instalación es más complejo. Pero lo que yo os pido, que es usar solo IONIC en una página web, es muy simple. En la página oficial podéis ver el código para enlazar a la librería: https://ionicframework.com/docs/intro/cdn Este es el código que necesitáis insertar en la cabecera de vuestra página: <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script> <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/> - Una vez referenciada, podemos añadir estos nuevos componentes a nuestras páginas. Tenemos plantillas, botones, controles de formularios, tarjetas, etc; todas con un aspecto muy profesional. Podemos también mediante atributos modificar sus comportamientos y estilos visuales. - Podemos acceder a todos estos nuevos elementos desde JavaScript a igual que lo hemos hecho con el resto de etiquetas HTML (getElement...). - Lo más interesante de esta práctica es que intentéis desarrollar vuestra capacidad de lectura de una documentación técnica. Es más sencillo de lo que pudiera parecer. Tenéis ejemplos y códigos de uso de cada componente. https://ionicframework.com/docs/components ---------------------- LA PRÁCTICA: ---------------------- 1- Realizad una pequeña aplicación en JavaScript como la de la imagen adjunta. Se trata de un pequeño formulario donde podéis introducir el nombre de un curso y la puntuación que le dais de 1 a 5. Con un botón "Add" añadimos el curso a una lista.La parte visual la conseguiréis utilizando componentes IONIC en lugar de etiquetas HTML. El comportamiento lo programaréis, como habitualmente, usando JavaScript. 2.Intentad que la vista de la página se adapte automáticamente al tamaño de las pantallas donde se visualice.