Introducció

React és una biblioteca de JavaScript per a la construcció d'interfícies d'usuari. Va ser desenvolupada per Facebook i es va llançar per primera vegada el 2013. React permet als desenvolupadors crear aplicacions web dinàmiques i interactives de manera eficient i amb un codi més fàcil de mantenir.

Característiques clau de React

Componentització: React es basa en components, que són blocs de construcció reutilitzables que encapsulen el codi HTML, CSS i JavaScript necessari per a una part específica de la interfície d'usuari.
Virtual DOM: React utilitza un Virtual DOM per optimitzar les actualitzacions de la interfície d'usuari. Quan l'estat d'un component canvia, React actualitza el Virtual DOM i només fa els canvis necessaris al DOM real.
Unidirectional Data Flow: React segueix un flux de dades unidireccional, el que significa que les dades flueixen en una sola direcció, des dels components pares als components fills. Això facilita la depuració i la comprensió del codi.
JSX: React utilitza JSX, una extensió de la sintaxi de JavaScript que permet escriure codi HTML dins de JavaScript. Això fa que el codi sigui més llegible i fàcil de mantenir.

Avantatges de React

Reutilització de components: Els components de React es poden reutilitzar en diferents parts de l'aplicació, la qual cosa redueix la duplicació de codi i facilita el manteniment.
Rendiment: Gràcies al Virtual DOM, React és molt eficient en la gestió de les actualitzacions de la interfície d'usuari, el que resulta en una millor experiència d'usuari.
Comunitat i ecosistema: React té una gran comunitat de desenvolupadors i un ecosistema ric de biblioteques i eines que faciliten el desenvolupament d'aplicacions.

Desavantatges de React

Curva d'aprenentatge: Tot i que React és relativament fàcil d'aprendre, pot ser complicat per als desenvolupadors novells acostumar-se a conceptes com el Virtual DOM, JSX i el flux de dades unidireccional.
Configuració inicial: La configuració inicial d'un projecte de React pot ser complexa, especialment per a desenvolupadors que no estan familiaritzats amb les eines de construcció modernes com Webpack i Babel.

Exemples pràctics

Exemple 1: Component bàsic en React

A continuació es mostra un exemple d'un component bàsic en React que mostra un missatge de "Hola Món":

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
  return <h1>Hola Món</h1>;
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

Explicació del codi:

import React from 'react';: Importa la biblioteca de React.
import ReactDOM from 'react-dom';: Importa ReactDOM, que és responsable de renderitzar els components de React al DOM.
function HelloWorld() { return <h1>Hola Món</h1>; }: Defineix un component funcional anomenat HelloWorld que retorna un element h1 amb el text "Hola Món".
ReactDOM.render(<HelloWorld />, document.getElementById('root'));: Renderitza el component HelloWorld dins de l'element amb l'ID root al DOM.

Exemple 2: Component amb props

A continuació es mostra un exemple d'un component que accepta propietats (props) per mostrar un missatge personalitzat:

import React from 'react';
import ReactDOM from 'react-dom';

function Greeting(props) {
  return <h1>Hola, {props.name}</h1>;
}

ReactDOM.render(<Greeting name="Joan" />, document.getElementById('root'));

Explicació del codi:

function Greeting(props) { return <h1>Hola, {props.name}</h1>; }: Defineix un component funcional anomenat Greeting que accepta un objecte props i retorna un element h1 amb el text "Hola" seguit del valor de props.name.
ReactDOM.render(<Greeting name="Joan" />, document.getElementById('root'));: Renderitza el component Greeting amb la propietat name establerta a "Joan" dins de l'element amb l'ID root al DOM.

Exercicis pràctics

Exercici 1: Crear un component de benvinguda

Crea un component de React anomenat Welcome que accepti una propietat name i mostri un missatge de benvinguda personalitzat. Per exemple, si la propietat name és "Maria", el component hauria de mostrar "Benvinguda, Maria".

Solució:

import React from 'react';
import ReactDOM from 'react-dom';

function Welcome(props) {
  return <h1>Benvinguda, {props.name}</h1>;
}

ReactDOM.render(<Welcome name="Maria" />, document.getElementById('root'));

Exercici 2: Crear un component de salutació amb hora del dia

Crea un component de React anomenat GreetingWithTime que accepti una propietat name i mostri un missatge de salutació personalitzat amb l'hora del dia. Per exemple, si la propietat name és "Pere" i l'hora actual és al matí, el component hauria de mostrar "Bon dia, Pere".

Solució:

import React from 'react';
import ReactDOM from 'react-dom';

function GreetingWithTime(props) {
  const hours = new Date().getHours();
  let timeOfDay;

  if (hours < 12) {
    timeOfDay = 'Bon dia';
  } else if (hours < 18) {
    timeOfDay = 'Bona tarda';
  } else {
    timeOfDay = 'Bona nit';
  }

  return <h1>{timeOfDay}, {props.name}</h1>;
}

ReactDOM.render(<GreetingWithTime name="Pere" />, document.getElementById('root'));

Conclusió

En aquesta secció, hem après què és React, les seves característiques clau, avantatges i desavantatges. També hem vist exemples pràctics de components bàsics i com utilitzar propietats (props) per passar dades als components. A més, hem proporcionat exercicis pràctics per reforçar els conceptes apresos. En la següent secció, configurarem l'entorn de desenvolupament per començar a treballar amb React.

Què és React?

Introducció

Característiques clau de React

Avantatges de React

Desavantatges de React

Exemples pràctics

Exemple 1: Component bàsic en React

Exemple 2: Component amb props

Exercicis pràctics

Exercici 1: Crear un component de benvinguda

Exercici 2: Crear un component de salutació amb hora del dia

Conclusió

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa