React (JavaScript)

Librería de JavaScript de código aberto para crear interfaces de usuario From Wikipedia, the free encyclopedia

React (JavaScript)
Remove ads

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.[1]

Datos rápidos Características, Datas e localizacións ...

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.[2][3] 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.[1][4]

Remove ads

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.[5] Pasou a ser de código aberto en 2013.[6] 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.

Remove ads

DOM en React

Thumb
Comparación do DOM virtual, á esquerda, co DOM real, á dereita.

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.[2]

Remove ads

Compoñentes

Un compoñente é un bloque de código independente que se pode reutilizar en calquera parte do código do programa. Teñen que comezar por maiúscula e deben devolver un elemento que React saiba mostrar, como un bloque de JSX. En xeral, os compoñentes defínense como funcións, mostramos a continuación un exemplo simple de definición e un exemplo de uso.

// definición do compoñente Chover
function Chover(){
   return <h1> Está chovendo </h1>;
}

// uso do compoñente Chover
<Chover />

Ao usar o compoñente Chover, o navegador está vendo o código html <h1> Está chovendo </h1>, que será o que renderice no navegador.

Cómpre destacar que non se pode definir un compoñente dentro da definición doutro compoñente, mais si se pode utilizar un compoñente na definición doutro. É dicir, o seguinte código sería incorrecto, pois estamos definindo o compoñente Paraugas dentro da definición do compoñente Chover.

function Chover(){
   function Paraugas(){
      ...
   }
   ...
}

Porén, o seguinte código si que sería correcto, xa que o compoñente Paraugas xa está creado, e no compoñente Chover só o estamos utilizando.[7]

function Paraugas(){
   ...
}

function Chover(){
   <Paraugas />
   ...
}

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.

function Plantar(props){
   return <h1> Árbore {props.arbore} plantada! </h1>;
}

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.

class Plantar extends React.Component{
   render(){
      return <h1> Árbore {this.props.arbore} plantada! </h1>;
   }
}

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.[1]

Remove ads

Hooks

Os hooks permiten que os compoñentes poidan ter diferentes características de React. Son funcións de React que permiten realizar distintas operacións. Hai hooks previamente definidos por React, mentres que hai hooks que poden crear os programadores mediante a combinación de hooks.[8] O uso dos hooks realízase como a chamada a unha función, tal e como se pode ver no seguinte exemplo co hook useId, que se utiliza para crear IDs únicos.[9]

import { useId } from 'react';

function Plantar(props){
   const plantarId = useId();
   return <h1> Árbore {props.arbore} plantada! </h1>;
}

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.[8]

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.[10]

Remove ads

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 (<Plantar />) para que o navegador o renderice.[11]

function Plantar(){

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

   return <button onClick={plantar}> Preme para plantar unha árbore </button>;

}

<Plantar />

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

function Plantar(){

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

   return <button onClick={() => plantar("carballo")}> Preme para plantar un carballo </button>;

}

<Plantar />
Remove ads

Renderizado condicional

En función da lóxica da aplicación, os compoñentes poden necesitar mostrar unhas cousas ou outras. Para solucionar este problema creouse o renderizado condicional, que permite conseguir este obxectivo indicando as condicións correspondentes con declaracións e operadores.

Estrutura if/else

En primeiro lugar, en React existe a estrutura if/else. Supoñamos que o compoñente Plantar definido previamente ten que facer distintas accións en función de se estamos plantando a árbore nunha terra onde xa había árbores ou nunha terra nova. Neste caso, o atributo props ten un valor booleano terraNova que será true se estamos plantando nun sitio onde non había árbores e false se estamos replantando un terreo. Podemos ver as diferenzas de actuación no seguinte exemplo.[12]

function Plantar(props){
   if(props.terraNova){
      return <h1> Árbore {props.arbore} plantada! </h1>;
   }else{
      return <h1> Aínda non se pode plantar a árbore {props.arbore}: hai que limpar o terreo. </h1>;
   }
}

Operador condicional ou terciario

Tal e como vemos no exemplo anterior, realízase unha acción ou outra en función do valor de props.terraNova. Nestes casos sinxelos, pódese simplificar a estrutura do código utilizando o operador condicional ? :, tamén chamado operador terciario. O seguinte código é equivalente ao anterior.

function Plantar(props){
   return <h1> {props.terraNova ? Árbore {props.arbore} plantada! : Aínda non se pode plantar a árbore {props.arbore}: hai que limpar o terreo.} </h1>;
}

Este código indica que se devolverá a primeira mensaxe se o valor de props.terraNova é true, mentres que se é false, devolverase a segunda.[12]

Operador lóxico AND

Supoñamos que no exemplo de plantar a árbore só queremos indicar que a árbore foi plantada. Se non se indica esta mensaxe, é que non se puido plantar. Neste caso, só nos interesa devolver unha mensaxe cando o valor props.terraNova é true. Para isto, poderíamos utilizar o operador terciario e indicar null no caso de que props.terraNova sexa false. Porén, o operador AND && xa fai isto de xeito automático, polo que só temos que indicar o valor que queremos que devolva cando a variable é true.[12]

function Plantar(props){
   return <h1> {props.terraNova && Árbore {props.arbore} plantada!} </h1>;
}
Remove ads

Notas

Véxase tamén

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads
Remove ads