React (JavaScript)

**React** é unha librería de JavaScript de código aberto que permite crear interfaces gráficas de usuario. Baséase no uso de compoñentes, o que permite a súa reutilización e evita a repetición de código. Estes compoñentes créanse mediante funcións de JavaScript. Ademais, React permite crear páxinas webs dinámicas e eficientes, xa que só actualiza os elementos que cambiaron dende a última vez que se cargou a páxina.

React foi desenvolvido por un equipo de Facebook en Meta e é mantido por Facebook, ademais de recibir contribucións de persoas de todo o mundo. Con React pódense crear tanto páxinas web como aplicacións móbiles. Para comezar a programar con React, é necesario instalar Node.js, un contorno de execución para JavaScript que permite executar código JS fóra dun navegador.

## Historia 
React foi desenvolvido por un equipo da mesma empresa, con Jordan Walke como principal creador. Usouse por primeira vez en 2011 en Facebook, sendo en 2012 utilizado por Instagram. Pasou a ser de código aberto en 2013. A partir dese momento, foron sacando numerosas versións cada ano, diminuíndo a frecuencia de lanzamento a partir de 2018. Aquí pódese ver unha listaxe das distintas versións coa súa data de lanzamento, ademais da última versión estable.

## DOM en React 
En React non se utiliza o DOM real, senón que se utiliza un DOM virtual. Cando estamos navegando nunha páxina de React, non se actualiza a páxina, senón que se está actualizando o DOM virtual, é dicir, actualízase a sección da páxina onde houbo algún cambio, comparando coa árbore anterior. Deste xeito, as actualizacións son moito máis rápidas que cando se utiliza soamente JavaScript, o que fai que utilizar React co DOM virtual sexa moito máis eficiente.

```react
function Paraugas(){
   ...
}

function Chover(){
   
   ...
}
```

### Tipos de compoñentes 
En React hai dous tipos de compoñentes en función da súa estrutura: os compoñentes funcionais e os compoñentes de clase.

Os compoñentes funcionais son funcións que devolven un elemento de React, escrito en JSX. Teñen que comezar con letra maiúscula e poden recibir argumentos. Estes valores recíbense mediante a variable `props`, onde se pode acceder a cada argumento mediante o operador punto (`.`). A continuación mostramos un exemplo de compoñente funcional.

```react
function Plantar(props){
   return  Árbore {props.arbore} plantada! ;
}
```

Os compoñentes de clase son clases son clases de ES6 que devolven un elemento de JSX. As clases teñen que estender á interface `React.Component` para ter os métodos dun compoñente básico de React. Ademais, teñen que ter un método `render()` para devolver o elemento de JSX. Estes compoñentes tamén poden recibir argumentos. Son máis antigos que os compoñentes funcionais. A continuación mostramos un compoñente de clase equivalente ao compoñente funcional previamente mencionado.

```react
class Plantar extends React.Component{
   render(){
      return  Árbore {this.props.arbore} plantada! ;
   }
}
```

Antigamente só os compoñentes de clase permitían traballar con estados, o que diminuía moito a utilidade dos compoñentes funcionais. Porén, tras unha actualización, creáronse os *hooks*, que permitiron que se puidesen usar estados nos compoñentes funcionais, pasando estes a seren os máis utilizados debido á súa simplicidade.

```react
import { useId } from 'react';

function Plantar(props){
   const plantarId = useId();
   return  Árbore {props.arbore} plantada! ;
}
```

A continuación mostramos os *hooks* integrados en React.
**Hooks* de estado: o estado permite a gardar a situación dun compoñente nun momento dado. Existen dous *hooks* para engadir un estado a un compoñente: `useState` e `useReducer`.
**Hooks* de contexto: o contexto permítelle a un compoñente recibir información dun compoñente pai sen necesidade de que lla mande no atributo `props`. O *hook* asociado é `useContext`.
**Hooks Ref*: os *Refs* permiten a un compoñente conservar información que non se usa para o renderizado do mesmo. Existen dous *hooks* para traballar con referencias, `useRef`, que crea un *Ref*, e `userImperativeHandler`, que permite personalizar o *Ref* do compoñente.
**Hooks* de efecto: os efectos permiten a un compoñente conectarse e sincronizarse con sistemas externos. Para que isto sexa posible, utilízase o *hook* `useEffect`.
**Hooks* de rendemento: estes *hooks* serven para saltarse cálculos innecesarios no renderizado e optimizar tempos. `useMemo` permite almacenar en caché o resultado dun cálculo costoso e `useCallback` permite almacenar en caché a definición dunha función antes de pasala a un compoñente optimizado. Hai veces que non se poden saltar cálculos no renderizado porque hai que actualizar os compoñentes. Neste caso, pódese priorizar o renderizado e facelo máis eficiente cos *hooks* `useTransition` e `useDeferredValue`.
**Hooks* para autores de bibliotecas: hai *hooks* que non se adoitan usar nunha programación dunha aplicación, senón que son máis útiles para autores de bibliotecas. Entre eles encóntranse `useDebugValue`, `useId`, `useSyncExternalStore` e `useActionState`.

### *Hooks* personalizados 
Ademais dos *hooks* integrados, pódense implementar *hooks* personalizados creando unha función e introducindo nela distintos *hooks* xa existentes. Para isto, hai que ter en conta que tódolos nomes de *hooks* comezan coa palabra `use` seguida dunha palabra representativa da acción correspondente, comezando en letra maiúscula.

## Eventos 
En React pódense crear os mesmos eventos que hai en HTML e JavaScript. Decláranse coa primeira letra minúscula, e a seguinte palabra comeza con maiúscula (por exemplo, `onClick`). Os manexadores (funcións que se executan cando se dispara o evento), indícanse entre chaves. No seguinte código créase o compoñente `Plantar`, que renderiza un botón. Este botón ten un evento `onClick`, que se dispara cando se preme nel, executando a función `plantar` definida no mesmo compoñente. Por último, escríbese o compoñente () para que o navegador o renderice.

```react
function Plantar(){

   const plantar = () => { alert("Árbore plantada!"); }

   return  Preme para plantar unha árbore ;

}

```

Para mandarlle argumentos á función utilízanse as funcións frecha, similar a JavaScript.

```react
function Plantar(props){
   return  {props.terraNova && Árbore {props.arbore} plantada!} ;
}
```

## Notas 
## Véxase tamén 
### Outros artigos 
*JavaScript
*Código aberto
*DOM
*Angular
*Blazor