Sviluppare con React una web app da zero

Oggi sviluppare con React applicazioni web  stà completamente trasformando lo sviluppo Front-End. Questa è una libreria JavaScript che si presenta come la soluzione ottimale per gli sviluppatori frontend di app web e mobile.

sviluppare con react

Saper sviluppare con la tecnologia React ti permette sia di poter accedere a tante posizioni lavorative in ambito web development in Italia e all’estero sia di poter sviluppare i tuoi progetti personali. La richiesta di sviluppatori React nel mondo è in forte crescita.

Perché sviluppare con  React ?

React è una “potente” libreria JavaScript sviluppata da Facebook ideale per costruire interfacce “data-driven” interattive. Tra i grandi nomi che utilizzano React in produzione ci sono Facebook, Instagram, WhatsApp, Netflix, Airbnb, eBay, PayPal, New York Time e molte altre.

L’obiettivo di questa guida è darti gli strumenti e l’esperienza necessari per entrare nel mondo degli sviluppatori React. React è la base per chi di voi vorrà poi imparare a sviluppare app per iOS e Android con React Native.

Un vantaggio per chi usa React ?Una volta imparato, lo si può utilizzare in molte tipologie di progetti, dallo sviluppo di web app a quello mobile con React Native e desktop.

Cosa svilupperemo nella guida

In questa mini guida svilupperemo una web application dove applicheremo i concetti del CRUD (create,read,update,delete) grazie all’utilizzo di un Mock Server ,JSON SERVER, molto carino e semplice  da utilizzare in fase soprattutto in fase di test.

Strumenti necessari per poter sviluppare con React

Per poter sviluppare in React è consigliabile installare i pacchetti node ed npm  ,visto che lavoreremo tanto da terminale, non che un buon ide come visual studio code gratuito ed espandibile  grazie all’ampia scelta di estensioni che vi si possono aggiungere.

Inoltre mi aspetto che abbiate conoscenze di base di Html, Css3 e javascript.

Creare l’applicazione Heroes

Innanzitutto è importante organizzare il nostro codice in una cartella, per cui createvene una e rinominatela in React (dove all’interno svilupperemo la nostra applicazione).

Ora una  volta installato Node insieme ad Npm e Visual studio code , apri quest’ultimo quindi fai click con ctrl+ò, si aprirà il terminale, quindi posizionatevi all’interno della cartella React con i comandi:

Windows PowerShell
Copyright (C) Microsoft Corporation. Tutti i diritti riservati.

Prova la nuova PowerShell multipiattaforma https://aka.ms/pscore6

PS C:\Users\lucio> cd .\Desktop\React\

Siamo pronti per scaricare l’applicazione react nella nostra cartella, sempre da terminale digitate:

Windows PowerShell
Copyright (C) Microsoft Corporation. Tutti i diritti riservati.

Prova la nuova PowerShell multipiattaforma https://aka.ms/pscore6

PS C:\Users\lucio> cd .\Desktop\React\
PS C:\Users\lucio\Desktop\React> npx create-react-app heroes

una volta scaricato il pacchetto react posizionatevi all’interno della cartella appena creata:

PS C:\Users\lucio\Desktop\React> cd .\heroes\
PS C:\Users\lucio\Desktop\React\heroes>

quindi avviamo il server con :

npm start

Se il vostro browser non si apre automaticamente, apritelo voi e digitate nella barra degli indirizzi : http://localhost:3000 (a React viene assegnato di default tale indirizzo), se tutto è andato a buon fine vi ritroverete con una schermata simile:

sviluppare con react

Struttura dell’applicazione React

sviluppare con reactCome potete notare il codice dell’applicazione risiede nella cartella src. All’interno di questa vi è il file app.js(componente principale dell’applicazione), apritelo, cancellate tutto il codice presente nel tag div  e digitate:

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <p>Hello world</p>
    </div>
  );
}

export default App;

quindi da terminale avviate il server, se non lo avete già fatto, se tutto è andato bene vi troverete davanti ad una pagina bianca con la scritta “Hello Worl”. All’interno del componente è anche possibile eseguire il rendering di un contenuto dinamico:

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App = () => {
  const now = new Date();
  const a = 10;
  const b = 20;

  return (
    <div className="App">
      <p>Hello world, it is {now.toString()}</p>
      <p>{a} plus {b} is {a + b}</p>
    </div>
  );
}

export default App;

Come potete notare ho creato le costanti now,a e b.Tali costanti dovranno poi essere inserite tra graffe per indicare a React che si tratta di codice javascript. In realtà il contenuto del return, anche se potrebbe sembrare a tutti gli effetti codice html, è codice JSX(javascript xml).

Creare i componenti

Un’applicazione React,più o meno complessa, è composta da più componenti ed ognuno dei quali assume uno specifico ruolo. E’ importante organizzare il codice in sottocartelle, quindi sotto la cartella src createvi la cartella components, all’interno di questa createvi il file hero.js:

import React from 'react';
const hero = (props) => {
    return (
        <div>
            <p>Ciao Sono {props.nome}</p>
        </div>
    );
}

export default hero;

Anche in React , così come avviene in Angular, i componenti devono poter comunicare tra di loro e passarsi quindi proprietà ,oggetti, metodi,array,ecc…

Infatti,come potete notare, il componente hero.js ora ha un parametro di ingresso props, il quale ci consente di passare dati (variabili,oggetti,array,metodi) al componete padre (in questo caso app.js).

Quindi nel file app.js digitate:

import React from 'react';
import Hero from './components/hero';

const App = () => {

  return (
    <div className="App">
      <Hero nome ='Lucio' />
    </div>
  );
}

export default App;

Innanzitutto ho importato il componente hero import Hero from ‘./components/hero’;, i componenti importati devono sempre iniziare con lettere maiuscole in React. Viene inserito come un comune tag all’interno del div quindi gli passo la proprietà nome Lucio.

Quando si inseriscono tag html o tag in genere in JSX questi possono essere rappresentati nella maniera classica con tag apertura e chiusura (<div>…</div>) oppure come il classico tag <br/> quindi (<Hero/>). Altra cosa importante le props devono contenere dati immutabili, pensatele come a delle costanti…

Se ti interessa React e vuoi continuare la guida puoi farlo seguendo il corso ‘REACT E REDUX:LA GUIDA COMPLETA‘!!

Se ti inscrivi al videocorso avrai accesso a vita illimitato, aggiornamenti frequenti e gratuiti ed, inoltre, se non rispetta le tue aspettative potrai richiedere il rimborso entro i primi 30 giorni dalla data di acquisto!!

Le lezioni sono fruibili da Udemy ovvero dalla più grande piattaforma di apprendimento online al mondo! Più di 30 milioni di studenti in tutto il mondo la stanno già utilizzando!

Guarda in anteprima quello che realizzeremo ne il corso REACT E REDUX: LA GUIDA COMPLETA poi decidi con calma!!

lucio-ticali

mio-motto

Lucio Ticali

Senior web developer (software engineer)

Mi chiamo Lucio Ticali. Sono un software engineer con 20 anni di esperienza nel settore dell’Information Technology. Ho lavorato per molti anni come developer, poi come architect, e infine come manager in grandi aziende IT, ed ora sono un consulente ed un docente.

Mi sono occupato di progettazione e sviluppo di sistemi software di grandi dimensioni, nei settori Banking, Healthcare e Industria. Ho progettato e sviluppato sistemi in molti linguaggi di programmazione ed ambienti di sviluppo, come Java, C/C++, C# e PHP.

E’ un mio desiderio adesso poter trasmettere la mia esperienza, attraverso corsi di sviluppo del software, a chi si avvicina adesso a questo mondo, oppure a chi vuole approfondire gli aspetti di quello che è già il proprio lavoro.

Tutto questo a soli 13.99€ e non a 139.99€  FINO AL 21/12/2019!!

DAMMI MAGGIORI INFO

VAI AL CORSO

Share and Enjoy !

0Shares
0 0