El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Què és React?

React és una biblioteca de JavaScript per a la construcció d'interfícies d'usuari. Va ser desenvolupada per Facebook i és àmpliament utilitzada per crear aplicacions web modernes i dinàmiques. React permet crear components reutilitzables que gestionen el seu propi estat, facilitant la construcció d'aplicacions complexes.

Característiques Clau de React

Components: React es basa en components, que són blocs de construcció reutilitzables.
JSX: Una extensió de sintaxi que permet escriure codi HTML dins de JavaScript.
Virtual DOM: React utilitza un Virtual DOM per millorar el rendiment de les aplicacions.
Unidirectional Data Flow: El flux de dades en React és unidireccional, el que facilita la gestió de l'estat.

Configuració del Teu Entorn de Desenvolupament

Instal·lació de Node.js i npm

Abans de començar amb React, necessitaràs tenir instal·lats Node.js i npm (Node Package Manager). Pots descarregar-los des de nodejs.org.

Creació d'una Nova Aplicació React

React proporciona una eina anomenada create-react-app que facilita la creació d'una nova aplicació React amb una configuració inicial mínima.

npx create-react-app my-app
cd my-app
npm start

Aquestes comandes crearan una nova aplicació React i la posaran en marxa en un servidor de desenvolupament local.

Estructura d'una Aplicació React

Quan crees una nova aplicació amb create-react-app, obtindràs una estructura de carpetes similar a aquesta:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

Fitxers Clau

public/index.html: El punt d'entrada de l'aplicació.
src/index.js: El punt d'entrada de JavaScript. Aquí és on React renderitza l'aplicació.
src/App.js: El component principal de l'aplicació.

El Teu Primer Component React

Un component React és una funció o classe que retorna un element React. A continuació es mostra un exemple d'un component funcional senzill:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

Renderització del Component

Per renderitzar el component HelloWorld, necessitem importar-lo i utilitzar-lo dins del component principal (App.js):

import React from 'react';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

JSX: JavaScript XML

JSX és una extensió de sintaxi que permet escriure codi HTML dins de JavaScript. És una característica clau de React que fa que el codi sigui més llegible i fàcil d'escriure.

Exemple de JSX

const element = <h1>Hello, World!</h1>;

Aquest codi crea un element React que representa un encapçalament <h1> amb el text "Hello, World!".

Exercici Pràctic

Objectiu

Crea un component React que mostri un missatge personalitzat.

Instruccions

Crea un nou fitxer anomenat Greeting.js dins de la carpeta src.
Defineix un component funcional que accepti una propietat name i mostri un missatge de benvinguda.
Importa i utilitza el component Greeting dins de App.js.

Solució

src/Greeting.js:

import React from 'react';

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

export default Greeting;

src/App.js:

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div className="App">
      <Greeting name="John" />
    </div>
  );
}

export default App;

Resum

En aquesta secció, hem introduït React, una biblioteca de JavaScript per a la construcció d'interfícies d'usuari. Hem configurat l'entorn de desenvolupament, creat el nostre primer component React i explorat la sintaxi JSX. A més, hem realitzat un exercici pràctic per reforçar els conceptes apresos. En la següent secció, aprofundirem en la gestió de l'estat i els cicles de vida dels components en React.

Introducció a React

Què és React?

Característiques Clau de React

Configuració del Teu Entorn de Desenvolupament

Instal·lació de Node.js i npm

Creació d'una Nova Aplicació React

Estructura d'una Aplicació React

Fitxers Clau

El Teu Primer Component React

Renderització del Component

JSX: JavaScript XML

Exemple de JSX

Exercici Pràctic

Objectiu

Instruccions

Solució

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final