К содержанию

Tutorial Principal de React

Tutorial sobre el framework JavaScript React. Para principiantes. Mucha teoría y tareas.

Уроки

Introducción al framework React

Instalación del Framework React

Conexión del plugin react-devtools

Introducción al enfoque de componentes en React

Diseño del sitio web del framework React

Resultado del trabajo del componente

El lenguaje JSX

Introducción al lenguaje JSX en React

Retorno de etiquetas JSX anidadas por funciones

Reglas de retorno de función al mover una etiqueta hacia abajo en JSX

Características de retornar múltiples etiquetas en JSX

Retorno de una etiqueta JSX sin cerrar

Devolución de una etiqueta vacía por una función en JSX

Inserción de valores de variables y constantes en JSX

Matices al insertar valores de variables

Inserción de arrays en JSX

Inserción de objetos en JSX

Inserción de variables y constantes en atributos de etiquetas en JSX

Almacenamiento de etiquetas en variables y constantes JSX

Características del almacenamiento de múltiples etiquetas en constantes JSX

Etiquetas en diferentes líneas en JSX

Devolver etiquetas mediante return en JSX

Cierre de etiquetas JSX

Corrección del maquetado en React

Ejecución de código JavaScript

Condiciones

Aplicación de condiciones en JSX

Renderizado Condicional en React

Condiciones para retornar una etiqueta en JSX

Operador ternario en JSX

Uso del operador && en JSX

Inversión para condiciones abreviadas en JSX

Funciones

Uso de funciones en React

Llamada de funciones dentro de etiquetas en React

Manejo de Eventos en JSX

Parámetros en funciones JSX

Objeto Event en React

Objeto Event al pasar parámetros

Formación de Etiquetas

Etiquetas en arreglos JSX

Formación de un array de etiquetas en un bucle de React

Generación de etiquetas a partir de un array de datos en React

Claves únicas en un array de etiquetas en React

Renderizado de un array de objetos en React

Claves únicas mediante id en React

Mostrar un array de objetos como una tabla HTML en React

Id únicos

Discusión sobre IDs únicos en React

Problemas con nuevos id en React

Cadenas aleatorias para id en React

Generación de id en React

Función para generar id en React

Uso de la función id en React

Uso incorrecto de la función id en React

Estados

Introducción a los Estados en React

Uso de estados en React

Reactividad de estados en React

Valor booleano en el estado en React

Contador con estados en React

Formularios

Trabajo con inputs en React

Modificación de datos de entrada al mostrarlos en React

Modificación de datos usando una función en React

Trabajo con múltiples inputs en React

Procesamiento de datos de formulario al hacer clic en un botón en React

Trabajo con textarea en React

Trabajo con checkbox en React

Casillas de verificación y renderizado condicional en React

Trabajo con select en React

Elementos de selección de matriz en React

Atributos value en select en React

Atributos value de select desde un array en React

Trabajo con radio en React

Valores por defecto en React

Vinculación de inputs a un array en React

Vinculación de inputs a un objeto en React

Datos

Reactividad de datos en React

Adición Reactiva a un Array en React

Operaciones reactivas con arrays en React

Adición reactiva a un array de objetos en React

Operaciones reactivas en arrays de objetos en React

Visualización reactiva de datos en React

Componentes

Introducción a los componentes de React

Uso de componentes en React

Múltiples instancias de componentes en React

Props de componentes en React

Creación de componentes hijos en React

Matriz para crear componentes hijos en React

Componentes hijos en bucle React

Pasar estados a componentes hijos en React

Pasar id a un componente en React

Cambiar el estado del componente padre en un componente hijo en React

Edición del estado del padre en un componente hijo en React

Edición del estado en un componente nieto en React

Modos de trabajo a través de estados en componentes hijos en React

Conceptos

Conceptos de React al trabajar con componentes

Datos de componentes en React

Tipos de componentes en React

Flujo de datos unidireccional en React

Elevación de estado en React

Una única fuente de verdad en React

Estilización

Métodos de estilización de componentes React

Uso de CSS global para estilizar en React

Inserción de datos en el atributo style desde un objeto en React

Inserción de datos en el atributo style desde un archivo separado en React

Trabajo con estilos CSS en el atributo style en React

Inserción de datos en el atributo style desde variables en React

Estilización con Styled Components en React

Uso de Props con Styled Components en React

Uso de props en el renderizado condicional con Styled Components en React

Estilización avanzada de componentes en React

Comenzando a estudiar estilización con CSS modules en React

Continuación del estudio de estilización con CSS modules en React

La propiedad composes para clases en CSS modules en React

Comando composes para archivos en CSS modules en React

Proyectos

Proyecto Checklist en React

Proyecto Bloc de notas en React