Una introducción a la biblioteca de vistas de React
¿Qué es React?
React es unJavaScriptbiblioteca que tiene como objetivo simplificar el desarrollo de interfaces visuales.
Desarrollado en Facebook y lanzado al mundo en 2013, impulsa algunas de las aplicaciones más utilizadas, impulsando Facebook e Instagram entre muchas otras aplicaciones.
Su objetivo principal es facilitar el razonamiento sobre una interfaz y su estado en cualquier momento, dividiendo la interfaz de usuario en una colección de componentes.
¿Por qué React es tan popular?
React ha conquistado el mundo del desarrollo web frontend. ¿Por qué?
Menos complejo que las otras alternativas
En el momento en que se anunció React, Ember.js y Angular 1.x eran las opciones predominantes como marco. Ambos impusieron tantas convenciones en el código que portar una aplicación existente no fue conveniente en absoluto. React tomó la decisión de ser muy fácil de integrar en un proyecto existente, porque así es como tenían que hacerlo en Facebook para introducirlo en la base de código existente. Además, esos 2 marcos aportaron demasiado a la mesa, mientras que React solo eligió implementar la capa de Vista en lugar de la pila MVC completa.
Tiempo perfecto
En ese momento, Google anunció Angular 2.x, junto con la incompatibilidad hacia atrás y los cambios importantes que iba a traer. Pasar de Angular 1 a 2 fue como pasar a un marco diferente, por lo que esto, junto con las mejoras en la velocidad de ejecución que prometió React, lo convirtió en algo que los desarrolladores estaban ansiosos por probar.
Respaldado por Facebook
Obviamente, contar con el respaldo de Facebook beneficiará a un proyecto si resulta tener éxito.
Actualmente, Facebook tiene un gran interés en React, ve el valor de ser de código abierto y esto es una gran ventaja para todos los desarrolladores que lo usan en sus propios proyectos.
¿React es fácil de aprender?
Aunque dije que React es más simple que los marcos alternativos, sumergirse en React sigue siendo complicado, pero principalmente debido a las tecnologías corolarias que se pueden integrar con React, comoReduxyGraphQL.
React en sí mismo tiene una API muy pequeña, y básicamente necesitas comprender 4 conceptos para comenzar:
Descarga mi gratisReact Handbook
Más tutoriales de react:
- Un ejemplo de aplicación simple de React: obtenga información de los usuarios de GitHub a través de la API
- Construye un contador simple con React
- Configuración de VS Code para el desarrollo de React
- Cómo pasar accesorios a un componente secundario a través de React Router
- Crea una aplicación con Electron y React
- Tutorial: crea una hoja de cálculo usando React
- La hoja de ruta para aprender React
- Aprenda a usar Redux
- Empezando con JSX
- Componentes con estilo
- Introducción a Redux Saga
- Introducción a React Router
- Introducción a React
- Reaccionar componentes
- El DOM virtual
- Reaccionar eventos
- El estado de reacción
- Reaccionar apoyos
- El fragmento de reacción
- La API React Context
- Reaccionar PropTypes
- Reaccionar conceptos: declarativo
- Reaccionar: Cómo mostrar un componente diferente al hacer clic
- Cómo hacer un bucle dentro de React JSX
- Props vs State en React
- ¿Deberías usar jQuery o React?
- ¿Cuánto JavaScript necesitas saber para usar React?
- Introducción a Gatsby
- Cómo hacer referencia a un elemento DOM en React
- Flujo de datos unidireccional en React
- Reaccionar componentes de orden superior
- Reaccionar eventos del ciclo de vida
- Concepto de reacción: inmutabilidad
- Concepto de reacción: Pureza
- Introducción a React Hooks
- Introducción a create-react-app
- Concepto de reacción: Composición
- Reaccionar: componentes de presentación frente a contenedores
- División de código en React
- Representación del lado del servidor con React
- Cómo instalar React
- CSS en React
- Usando SASS en React
- Manejo de formularios en React
- Reaccionar StrictMode
- Reaccionar portales
- Reaccionar accesorios de renderizado
- Prueba de componentes de React
- Cómo pasar un parámetro a los controladores de eventos en React
- Cómo manejar errores en React
- Cómo devolver múltiples elementos en JSX
- Representación condicional en React
- React, cómo transferir accesorios a componentes secundarios
- Cómo obtener el valor de un elemento de entrada en React
- Cómo utilizar el gancho useState React
- Cómo usar el gancho useCallback React
- Cómo utilizar el gancho useEffect React
- Cómo utilizar el gancho useMemo React
- Cómo utilizar el gancho useRef React
- Cómo usar el gancho useContext React
- Cómo utilizar el gancho useReducer React
- Cómo conectar su aplicación React a un backend en el mismo origen
- El tutorial de Reach Router
- Cómo utilizar las herramientas de desarrollo de React
- Cómo aprender React
- Cómo depurar una aplicación React
- Cómo renderizar HTML en React
- Cómo arreglar el error `dangerouslySetInnerHTML` no coincidió en React
- Cómo solucioné un problema con el estado del formulario de inicio de sesión de React y el autocompletado del navegador
- Cómo configurar HTTPS en una aplicación React en localhost
- Cómo corregir el error "no se puede actualizar un componente mientras se renderiza un componente diferente" en React
- ¿Puedo usar React hooks dentro de un condicional?
- Usar useState con un objeto: cómo actualizar
- Cómo moverse por bloques de código con React y Tailwind
- Reaccionar, enfocar un elemento en Reaccionar cuando se agrega al DOM
- Reaccionar, editar texto con doble clic