El objetivo de este proyecto es ofrecer un set de ejemplos simples, proporcionando una guía paso a paso para empezar a trabajar con React y TypeScript.
Hemos incorporado un set de ejemplos basados en hooks.
Ahora mismo hay dos carpetas principales:
-
Hooks: set de ejemplos migrados a hooks (ahora mismo 15 ejemplos), si eres nuevo en React, o vas a empezar a trabajar en un nuevo proyecto, Te recomendamos que lo hagas a través de ´estos ejemplos.
-
Old_class_components_samples: Los ejemplos viejos, sólo en caso de que necesite trabajar en un proyecto de versiones viejas de React o necesites mantener código legacy.
Si quieres sumerjirte más en React Hooks puedes chequear este repo: React Hooks By Example
Otros repos guiados disponibles (React / Redux + TypeScript):
Características:
- Bundling basado en webpack.
- Basado en React + Typescript.
- Navegación simple usando react-router.
- Gestionando llamadas asíncronas y actualizaciones.
- Usando la librería Redux (todavía no está disponible para la version en Hooks, próximamente).
- Manejando llamadas asíncronas vía Redux-Thunk + Redux Saga (todavía no está disponible para la version en Hooks, próximamente).
- Añadiendo sporte para test unitarios (todavía no está disponible para la version en Hooks, próximamente).
- Implementando Lazy Loading (todavía no está disponible para la version en Hooks, próximamente).
- ...
- Instalar NodeJS
- Descarga este repo
- Abre la consola de comandos que prefieras y haz 'cd' en el directorio de ejemplo dentro de este repo en tu máquina.
npm install- Instalación de los paquetesnpm start- Build del proyecto y lanza el servidor web (webpack-dev-server).- Copia y pega esta dirección en tu navegador http://localhost:8080/ si ´éste no se abre automáticamente.
Bundling + npm start basado en webpack.
Muestra el texto 'Hello React'.
Hello world, muestra siemple de React render.
Muestra el texto 'Hello {name}' (donde nombre es una propiedad que contiene el nombre).
Introducción al concepto básico de React, manejando propiedades.
Empezando desde la muestra 02, permite que el usuario cambie el nombre que se muestra.
Introducción al concepto básico de React, manejando el Estado (State) usando Hooks.
Empezando desde la nuestra 03, permite que el usario cambie la propiedad name solo cuando presiona sobre el botón change .
Usando callbacks.
Refactor de la muestra 04, Limpieza y discusión sobre dónde debe estar el estado.
Reafactorizar el trabajo realizado.
Empezando desde la nuestra 05, enable / disable del botón change cuando el texto está vacío o tiene el mismo nombre que originalmente,.
Componentes Enable/disable
demo simple de color picker (muestras cómo funcionan las propiedades).
ColorPicker refactorizado.
Simple implementación de un menú lateral.
Renderiza una tabla y usa un componente hijo para renderizar cada fila, usando un mock de datos.
Empezando desde la nuestra 10, elimina el mock de datos, utiliza una REST API real (api Github), utiliza axios para mejorar el rendimiento de la llamada fetch.
Empezando desde la nuestra 03, empezando a utilizar React-Router (navegación SPA).
Empezando desde la nuestra 12, implementa una página de login básica, que redireccione al usuario a otra página cuando el login haya completado satisfactoriamente.
Empezando desde la nuestra 13, añadir validaciones al formulario de login.
SEmpezando desde la nuestra 14, learn how React 16 context api works. SEmpezando desde la nuestra 14, emprender cómo funciona la API de React 16 Context.
Bundling + npm start basado en webpack.
Hello world, muestra siemple de React render.
Creando una cabecera común y una página 'about' con componentes de React.
Creando una página de "miembros", añadir navegación usando react-router.
Crear un componenente de lista de 'sólo lectura' (table >> tr >> td), leer una lista de miembros desde una API falsa y añadirlos dentro del componente 'state'
Dividir el componente de lista en dos: componente de Lista y Fila, pasar la entidad del miembro a través de las 'props' del componente.
Reemplazar la API false con una llamada asíncrona a la API de github y obtener la lista de miembros de una organización.
En esta muestra añadiremos un link en la página de miembros que navegará hacia la 'página del miembro'. Esta nueva página mostrará un formulario donde tendrás que introducir la url del avatar, el 'login' y el 'id' del nuevo miembro (sólo suponiendo que podemos añadir esa info).
Editar un miembro seleccionado, aquí aprenderemos cómo añadir parámetros al link de navegación y cómo obtenerlo desde el componente.
La validación realizada hasta ahora:
- Login: requerido, debe ser una cadena de texto (al menos 3 caracteres de longitud).
Añadido soporte para Redux, estado aislado en 'Redux reducers', implementa carga, guardar, ciclo de validación simple. Esta muestra usa una API falsa, en las siguientes muentras haremos llamadas a operaciones asíncronas y las ajustaremos dentro de la arquitectura de Redux.
Muestra un indicador de carga mientras la petición ajax está en progreso.
Para tener un recuento global de las promesas que estamos usando react-promise-tracker y mostras un bonito spinner react-spinner
Muestra actualizada usando Jest.
Muestra actualizada usando Jest.
Pendiente de actualizar Jest + Enzyme
Pendiente de actualizar
Pendiente de actualizar
Pendiente de actualizar
Pendiente de actualizar
Replace class components by stateless components using Hooks.
Añadir página de Login usando AMaterial-UI.
Muchas gracias a los colaborades por mantener el proyecto actualizado en todos los ejemplos.
Somos un equipo innovador de expertos en JavaScript, apasionados en convertir tus ideas en productos robustos y consistentes.
Basefactor, consultoría por Lemoncode proporciona servicios de consultoría y servicios de orientación.
Lemoncode proporciona servicios de formación.
Para la audiencia de LATAM/España estamos llevando a cabo un Master Online Front End, más info: http://lemoncode.net/master-frontend