ReactJS - Creazione di un'applicazione React

Ciao a tutti, futuri sviluppatori React! Sono entusiasta di guidarvi attraverso il viaggio emozionante della creazione del vostro primo applicazione React. Come qualcuno che ha insegnato scienze informatiche per anni, posso assicurarvi che React non è solo potente ma anche divertente da imparare. Allora, entriamo nel dettaglio!

ReactJS - Creating a React Application

Cos'è React?

Prima di iniziare a programmare, capiremo cos'è React. React è una libreria JavaScript popolare per costruire interfacce utente. È stata sviluppata da Facebook e ora viene utilizzata da molte grandi aziende come Netflix, Instagram e Airbnb. Pensate a React come a un set di mattoni Lego che potete utilizzare per costruire facilmente applicazioni web complesse.

Introduzione

Per creare un'applicazione React, abbiamo bisogno di alcuni strumenti. Non preoccupatevi se non avete mai usato questi strumenti prima - esploreremo ogni passo insieme!

Prerequisiti

Node.js e npm (Node Package Manager)
Un editor di codice (consiglio Visual Studio Code)

Se non avete ancora installato questi strumenti, prendetevi un momento per farlo. È come preparare la cucina prima di cucinare un delizioso pasto!

Utilizzo del bundler Rollup

Iniziamo creando un'applicazione React utilizzando Rollup. Rollup è un bundler per JavaScript che编译piccoli pezzi di codice in qualcosa di più grande e complesso.

Passo 1: Configurazione del progetto

Prima, creiamo una nuova directory per il nostro progetto e lo inizializziamo:

mkdir my-react-app
cd my-react-app
npm init -y

Questo crea una nuova cartella e inizializza un nuovo progetto Node.js. È come posare le fondamenta della nostra casa!

Passo 2: Installazione delle dipendenze

Ora, installiamo i pacchetti necessari:

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

Non lasciatevi intimidire da questi nomi lunghi. Pensateci come ingredienti per la nostra ricetta React!

Passo 3: Creazione dei file di configurazione

Creiamo due file importanti:

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

Questo file dice a Rollup come bundle la nostra applicazione. È come dare istruzioni a un cuoco su come preparare un piatto.

.babelrc:

{
"presets": ["@babel/preset-react"]
}

Questo file configura Babel, che aiuta a tradurre il JavaScript moderno in una versione che i vecchi browser possono comprendere.

Passo 4: Creazione dei nostri componenti React

Ora, creiamo il nostro primo componente React! Creiamo un nuovo file src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Ciao, React!</h1>
<p>Benvenuti nella mia prima applicazione React!</p>
</div>
);
}

export default App;

Questo è il nostro componente principale. È come la stella del nostro spettacolo!

Successivamente, creiamo src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Questo file è responsabile del rendering del nostro componente App nell'HTML.

Passo 5: Creazione del file HTML

Creiamo un nuovo file public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La mia App React</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

Questo è dove la nostra applicazione React sarà montata.

Passo 6: Aggiunta degli script a package.json

Aggiorniamo il nostro package.json per includere questi script:

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

Questi script ci aiuteranno a costruire e运行 la nostra applicazione.

Passo 7: Costruzione e esecuzione dell'applicazione

Ora, portiamo la nostra creazione alla vita! Eseguite:

npm run build

Questo creerà il nostro file JavaScript bundlato. Per visualizzare la vostra app, aprite public/index.html in un browser. Congratulazioni! Avete appena creato la vostra prima applicazione React utilizzando Rollup!

Utilizzo del bundler Parcel

Ora che abbiamo visto come utilizzare Rollup, proviamo un altro bundler popolare: Parcel. Parcel è noto per il suo approccio senza configurazione, rendendolo super facile da usare.

Passo 1: Configurazione del progetto

Creiamo un nuovo progetto:

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

Passo 2: Installazione delle dipendenze

Installiamo React e Parcel:

npm install react react-dom
npm install --save-dev parcel-bundler

Passo 3: Creazione dei nostri componenti React

Creiamo src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Ciao, React con Parcel!</h1>
<p Questa app è stata bundlata con Parcel.</p>
</div>
);
}

export default App;

Creiamo src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Passo 4: Creazione del file HTML

Creiamo src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La mia App React con Parcel</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

Notate come stiamo linkando direttamente al nostro file index.js. Parcel si occuperà del bundling per noi!

Passo 5: Aggiunta degli script a package.json

Aggiorniamo il nostro package.json:

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

Passo 6: Esecuzione dell'applicazione

Ora, avviamo la nostra applicazione:

npm start

Parcel aprirà automaticamente la vostra app in un browser. Tutte le modifiche che fate saranno riflesse istantaneamente!

Per costruire per la produzione:

npm run build

Questo creerà file ottimizzati nella directory dist.

Confronto tra Rollup e Parcel

Ecco una breve comparazione dei due bundler che abbiamo utilizzato:

Funzione	Rollup	Parcel
Configurazione	Richiede file di configurazione	Senza configurazione
Velocità	Veloce	Molto veloce
Dimensione del bundle	Generalmente più piccolo	Slightly più grande
Curva di apprendimento	Più ripida	Dolce
Flessibilità	Altamente personalizzabile	Meno personalizzabile

Entrambi i bundler hanno i loro vantaggi, e la scelta tra di loro spesso dipende dalle esigenze specifiche del progetto.

Conclusione

Congratulazioni! Ora avete creato applicazioni React utilizzando sia Rollup che Parcel. Ricordate, il viaggio di mille miglia inizia con un singolo passo, e avete appena taken il primo passo nel mondo emozionante dello sviluppo React.

Mentre continuate a imparare e crescere, scoprirete che React apre un mondo nuovo di possibilità nello sviluppo web. È come imparare a dipingere - all'inizio, potreste lottare con le forme di base, ma presto crearete capolavori!

Continuate a praticare, rimanete curiosi e, soprattutto, divertitevi! React è uno strumento potente, ma è anche una gioia da usare. Buon coding!

Credits: Image by storyset

Tutorial precedente:

ReactJS - Architettura

Prossimo tutorial:

ReactJS - JSX