Tutorial sobre la creació d'una aplicació web amb React.js

React.js és una biblioteca de desenvolupament front-end popular que s'utilitza per crear interfícies d'usuari (UI) interactives. Desenvolupada per Facebook, React.js ha estat utilitzada per moltes empreses importants, com ara Instagram, Airbnb i WhatsApp. Si voleu crear aplicacions web efectives, ràpides i responsives , React.js pot ser l'opció adequada per a vosaltres.

Pendahuluan

Abans de començar, assegureu-vos que teniu Node.js i npm (Node Package Manager) instal·lats a l'ordinador. Node.js i npm són essencials perquè proporcionen l'entorn i les eines necessàries per desenvolupar aplicacions web utilitzant React.js.

Pas 1: Inicialització del projecte React

Per crear una nova aplicació React.js, podem utilitzar Create React App, una eina de creació d'aplicacions que minimitza la configuració inicial. Executeu l'ordre següent al terminal o a la línia d'ordres:

"`bash
npx create-react-app la meva-aplicació
cd la meva aplicació
NPM start
“

Aquesta ordre crearà un directori nou anomenat `my-app`, descarregarà i instal·larà totes les dependències necessàries i iniciarà el servidor de desenvolupament. Ara podeu obrir un navegador i accedir a `http://localhost:3000` per veure l'aplicació React.js per defecte.

Pas 2: Estructura de carpetes

Fem una ullada a l'estructura de carpetes que ha creat Create React App:

“
la meva-aplicació/
├── node_modules/
públic/
│ └── index.html
└── origen/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logotip.svg
“

– `node_modules/`: Conté totes les dependències del vostre projecte.
– `public/`: Conté fitxers estàtics, incloent-hi `index.html` que és el punt d'entrada de l'aplicació.
– `src/`: On passareu la major part del temps. Conté components de React, fitxers CSS i altres recursos.

Pas 3: Eliminació de fitxers innecessaris

Per començar amb una pissarra neta, eliminem alguns fitxers innecessaris. Suprimiu `logo.svg` i `App.test.js` dins de la carpeta `src/`. A continuació, obriu `App.css` i `index.css`, eliminant tot el codi CSS que hi ha dins per començar amb una fulla d'estil neta.

Pas 4: Creació del primer component

React.js està basat en components. Els components són els blocs de construcció de la vostra aplicació web. Modifiquem `App.js` per crear el nostre primer component.

Obriu `src/App.js` i substituïu-lo pel codi següent:

"`jsx
importar React de 'reaccionar';
importar './App.css';

funció App() {
tornar (

);
}

exporta l'aplicació predeterminada;
“

Inicialitza el codi React dins d'`App.js` utilitzant JSX (JavaScript XML), que ens permet escriure una sintaxi similar a l'HTML dins de JavaScript. Desa els canvis i visualitza els resultats al navegador.

Pas 5: Afegir nous components

Ara afegim alguns components nous. Creeu una carpeta nova anomenada `components` dins de la carpeta `src`. A continuació, creeu un fitxer nou anomenat `HelloWorld.js` a la carpeta `components`.

"`jsx
importar React de 'reaccionar';

funció HolaMón() {
tornar (

);
}

exporta per defecte HolaMón;
“

Obriu `App.js` i importeu el component `HelloWorld` que acabem de crear:

"`jsx
importar React de 'reaccionar';
importar './App.css';
importa HolaMón des de './components/HolaMón';

funció App() {
tornar (

);
}

exporta l'aplicació predeterminada;
“

Ara, `App.js` renderitza el component `HelloWorld` a la pàgina principal.

Pas 6: Afegir la gestió d'estat amb useState

React té hooks molt potents per gestionar l'estat. Afegim alguns estats a la nostra aplicació. Per exemple, afegim un comptador que augmenta cada vegada que es fa clic a un botó.

Obriu `HelloWorld.js` i afegiu l'estat i el hook `useState`:

"`jsx
importa React, { useState } des de 'react';

funció HolaMón() {
const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(count + 1);
}

tornar (

);
}

exporta per defecte HolaMón;
“

L'estat `count` s'inicialitza amb un valor de 0, i cada vegada que es fa clic al botó, la funció `incrementCount` augmentarà aquest valor.

Pas 7: Afegir estil

Per afegir estil, podem utilitzar CSS al fitxer `App.css` o podem utilitzar una biblioteca CSS-in-JS com ara styled-components. De moment, ens cenyim al CSS estàndard.

Obriu `App.css` i afegiu-hi alguns estils:

"`css
.Aplicació {
alineació de text: centre;
}

.Encapçalament de l'aplicació {
color-de-fons: 282c34;
alçada mínima: 100vh;
visualització: flexió;
flex-direcció: columna;
align-items: centre;
justificar-contingut: centre;
mida-de-la-font: calc(10px + 2vmin);
color: blanc;
}

button {
farcit: 10px 20px;
marge superior: 20px;
font-size: 16px;
}
“

Pas 8: Afegir enrutament amb React Router

Per afegir navegació entre diferents pàgines de la nostra aplicació, podem utilitzar React Router. Instal·leu React Router executant l'ordre següent:

"`bash
npm install react-router-dom
“

A continuació, creeu dos components nous: `Home.js` i `About.js` a la carpeta `components`.

`Home.js`:
"`jsx
importar React de 'reaccionar';

funció Inici() {
tornar (

);
}

exportar per defecte Inici;
“

`About.js`:
"`jsx
importar React de 'reaccionar';

funció Sobre() {
tornar (

);
}

exportació per defecte Quant a;
“

A continuació, obriu `App.js` i configureu l'encaminament:

"`jsx
importar React de 'reaccionar';
import { BrowserRouter com a Encaminador, Ruta, Enllaç, Commutador } des de 'react-router-dom';
importar './App.css';
importa HolaMón des de './components/HolaMón';
importa Inici des de './components/Home';
importar Sobre des de './components/About';

funció App() {
tornar (

);
}

exporta l'aplicació predeterminada;
“

Amb això, hem afegit una navegació bàsica entre les diferents pàgines de la nostra aplicació.

Tancament

Aquest és un tutorial bàsic per crear una aplicació web amb React.js. Hem tractat la configuració del projecte, la creació de components, la gestió d'estats, l'estilització i l'encaminament. React.js té un ecosistema ric amb nombroses biblioteques i eines que us poden ajudar a crear aplicacions web més complexes.

Bona sort, i espero que aquest tutorial t'ajudi a començar el teu viatge amb React.js!