REACT JS
¿Qué es React?
• React es una biblioteca Javascript para crear interfaces de usuario.
• React no es un framework (a diferencia de Angular o Vue, que tienen más
opiniones).
• React es un proyecto de código abierto creado por Facebook.
• Está basado en componentes.
npm (node package manager) es el gestor de dependencias/paquetes que obtienes por
defecto cuando instalas [Link]. Proporciona una manera para que los desarrolladores
instalen paquetes tanto a nivel global como local.
NPX es un ejecutor de comandos de [Link] que se introdujo en NPM versión 5.2.0. Su
nombre es un acrónimo de “Node Package eXecutor” y su objetivo principal es facilitar la
ejecución de comandos de paquetes sin tener que instalarlos globalmente.
node js: es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la
capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación
JavaScript.
create-react-app Create React App, un entorno que viene preconfigurado con todo lo
necesario para crear una aplicación React.
npx create-react-app my-app
cd my-app
npm start
JSX está más cerca de JavaScript, no de HTML, por lo que hay algunas diferencias clave
a tener en cuenta al escribirlo.
className se usa en lugar de class para agregar clases CSS, ya que class es una palabra
clave reservada en JavaScript.
Las propiedades y métodos en JSX son camelCase.
Las etiquetas de cierre automático deben terminar en una barra inclinada,
Ej. <img />
Su componente tampoco puede devolver varias etiquetas JSX. Tienes que envolverlos en
un padre compartido, como un envoltorio <div>...</div> vacío o: <>...</>
Las expresiones de JavaScript también se pueden incrustar dentro de JSX usando llaves,
incluidas variables, funciones y propiedades.
________________________________________________________________________________
Componentes
Las aplicaciones React están hechas de componentes. Un componente es una parte de la
IU (interfaz de usuario) que tiene su propia lógica y apariencia.
Un componente puede ser tan pequeño como un botón o tan grande como una página
entera. Los componentes de React son funciones de JavaScript:
Renderizado condicional
Condicional: En React, puedes crear distintos componentes que encapsulan el
comportamiento que necesitas. Entonces, puedes renderizar solamente algunos de ellos,
dependiendo del estado de tu aplicación.
Listas y keys
Props
Se utiliza para enviar información al componente anidado. La información que transmites
de esta manera se llama props.
Con PropsTypes podemos validar los props que recibe un componente:
PropTypes
En React, PropTypes es una característica que permite especificar el tipo de las props
(propiedades) que se pasan a los componentes.
PropTypes proporciona una forma de documentar y validar las props que se esperan en un
componente, lo que ayuda a evitar errores y facilita el desarrollo y mantenimiento del código.
Tipos comunes de PropTypes:
• Number: Valida que la prop sea un número.
• bool: Valida que la prop sea un valor booleano (true o false).
• array: Valida que la prop sea un array.
• object: Valida que la prop sea un objeto.
• symbol: Valida que la prop sea un símbolo.
• node: Valida que la prop pueda ser cualquier cosa que se pueda renderizar en React
(elemento React, cadena de texto, número, fragmento, etc.).
• element: Valida que la prop sea un único elemento React (es decir, no un fragmento
ni una cadena de texto).
• instanceOf(Constructor): Valida que la prop sea una instancia de una clase
específica.
• oneOf([val1, val2, ...]): Valida que la prop sea uno de los valores proporcionados en
un array.
• oneOfType([type1, type2, ...]): Valida que la prop cumpla con al menos uno de los
tipos de datos especificados en un array.
• arrayOf(type): Valida que la prop sea un array que contenga elementos del tipo
especificado.
• objectOf(type): Valida que la prop sea un objeto cuyos valores sean del tipo
especificado.