Básicos

Def.:
- Librería desarrollada por un ingeniero de Facebook
- Muy utilizada para SPA's (aplicaciones con un solo HTML y varias vistas)
- Orientado a componentes
  - Antiguamente: componentes de clase
  - Actualmente: componentes funcionales
    - Todos tienen export delante
    - Importación:
      import { ExampleComponent } from './Example'
- DOM Virtual: React guarda una copia del DOM auténtico (el que facilita el navegador)
  - Cuando es necesario --> comunica (mueve) los cambios al DOM auténtico (reconciliación)
Cómo renderiza React
- DOM virtual y método render, el cual contiene el component principal de la aplicación (App.js). Ej.: en index.js
  const root = ReactDom.createRoot(document.getElementById('root')); // Crea la raíz en el HTML principal, que tiene el id root root.render( < React.StrictMode> // StrictMode se utiliza para visualizar más información (warnings, errores, etc.) en la consola del navegador < App /> < /React.StrictMode>, // Hasta aquí (primer argumento) sería lo que queremos renderizar (compo principal App) document.getElementById('root') // Identificador del HTML principal donde se va a renderizar el compo principal )
- React permanece atento (suscrito) a los cambios dentro de los componentes
  - Al detectar cambios --> re-rerenderiza (no recarga) la página (comunicación con el DOM del navegador)
Cómo crear proyecto de React
- npx create-react-app example-name
- cd example-name --> npm start
JSX
- Extensión de la sintaxis de JavaScript que se utiliza sólo en React
- Permite crear elementos: mezcla de HTML y JavaScript
  - Siempre tienen que estar compuestos por un único bloque (se suele utilizar fragment)
  - Para utilizar JS (por ej. la lógica desarrollada en un propio componente) en un elemento --> ponerlo entre llaves: { example() }
  - Se utiliza className en lugar de class
- props
  - export const Example = (props) => < div>{props.edad} export const Example = ({edad}) => < div>{edad}
  - En el compo:
    - < Example edad="20" />
React Router
- Librería externa a React (hecha por Remix) que permite el enrutamiento dinámico
- Instalación
  - npm i react-router react-router-dom
- Atributos de las rutas (< Route path="/" element="{< Home />}" />)
  - caseSensitive : tiene en cuenta las mayúsculas/minúsculas (por defecto es caseInsensitive)
  - Ya no existe el atributo exact, ahora todas lo son por defecto
    - Ej. Si tenemos definida una ruta localhost:3000/c1/ y buscamos en el navegador localhost:3000/c1/algo, en la versión anterior de React Router nos llevaba a localhost:3000/c1 (por defecto no eran exactas)
    - En React Router 6, las rutas por defecto llevan el atributo exact y, por tanto, no encontraría dicha ruta (localhost:3000/c1/algo)
    - Añadiendo un asterisco después de la barra (ej. .../c1/*), sí que se reconocería la ruta .../c1/lo-que-sea
  - La última ruta (al menos en la versión anterior era la ruta definida abajo del todo) debe tener path="*", que significa que para cualquier ruta que no coincida con alguna de las descritas anteriormente, redirija a esta última (por ej. 404 not found)
  - Rutas dinámicas
    - /questions/:questionsId
    - mediante hook useParams()