Com’è strutturata la tecnologia Framework React:
Lo scopo di React è quello di risolvere il problema della scarsa collaborazione, della scarsa riutilizzabilità e della bassa manutenibilità nello sviluppo di metodi tradizionali non componenti.
Fornisce un modo per creare applicazioni Web basate sulla tecnologia React, in base al framework, l’interfaccia dell’utente è suddivisa in gerarchia di componenti, i componenti più bassi possono essere un’aggregazione a funzione singola, con elevata coesione e caratteristiche di accoppiamento.
I componenti hanno anche una buona componibilità, riusabilità e manutenibilità, inseriti attraverso la nidificazione della gerarchia dei componenti, costruiscono un’interfaccia utente completa.
L’attuale invenzione adotta il seguente schema tecnico: un metodo per la costruzione di un’applicazione Web basata sulla tecnologia React, compresi i seguenti passaggi:
Passaggio 1: Suddividere l’interfaccia dell’utente in diagrammi di struttura dei componenti
- Split the UI interface into component structure diagrams
La divisione del diagramma della struttura dei componenti può essere eseguita sul prototipo o sul progetto dell’interfaccia utente, disegnando una varietà di caselle di colore per inscatolare l’area del componente.
La divisione dei componenti può essere divisa dal metodo di divisione dall’alto verso il basso o dal basso verso l’alto, utilizzando il metodo wireframe;
l’area del componente verrà divisa con diversi colori della cornice wireframe, il colore del wireframe utilizzato per distinguere i diversi livelli di componenti.
Ad esempio, una pagina del sistema di gestione comune include il menu di navigazione in alto, il pannello delle statistiche a sinistra e la presentazione dei dati dettagliati a destra.
In primo luogo l’intera pagina è un componente di grandi dimensioni, sotto il quale l’area del menu di navigazione nella pagina può essere divisa in un componente, il pannello delle statistiche a sinistra può essere diviso in un componente, i dettagli giusti possono anche essere suddivisi in un componente.
Questo passaggio è molto importante, principalmente per chiarire il pensiero di divisione dei componenti dell’interfaccia, la gerarchia ragionevole dei componenti divisi.
Passaggio 2: Creare componenti con React per completare le pagine statiche senza interazione
- Create components with React to complete static pages without interaction
Convertire un componente con frame in codice, creare un componente con un framework React o persino creare un’intera pagina in un componente molto grande con la classe React Component.
Creare un’istanza React.Component per ogni wireframe ( è il layout della pagina Web dimostra quali elementi dell’interfaccia saranno presenti nelle pagine chiave ), creando una pagina statica senza interazione, in base alla struttura del componente nella progettazione dell’interfaccia utente.
Passaggio 3: Il passaggio precedente completa l’interfaccia statica di una singola progettazione dell’interfaccia utente
Per un’applicazione Web, non ci sarà certamente una sola interfaccia, ripetuti passaggi uno e due, ogni progettazione dell’interfaccia utente dell’applicazione web viene convertita in pagine statiche.
In questo passaggio, per integrare un’applicazione web completa, si utilizza react-router per fare routing front-end per ottenere il passaggio tra i componenti di primo livello.
Con react-router quando l’utente clicca, gli viene fornita rapidamente la pagina richiesta senza il classico reload del server che ci impiegherebbe molto più tempo per mostrargliela.
Il framework React è un insieme di framework javascript open source dedicati alla costruzione di visualizzazioni Web pubblicate e gestite da Facebook. La sua caratteristica unica è l’introduzione della grammatica JSX e della tecnologia dom virtuale.
La grammatica JSX riflette l’idea di view = f (stato), genera html in javascript e integra js e html. Quando il contenuto della pagina sta per cambiare, la dom virtuale viene prima aggiornata e quindi confrontata con la dom effettiva, vengono aggiornate solo le diverse parti, il che risolve il problema dell’operazione dom tradizionale che richiede tempo.
Un’ulteriore soluzione tecnica è che i componenti si riferiscano a componenti dell’interfaccia utente incapsulati con funzioni indipendenti: il componente più piccolo ha solo alcune funzioni singole che possono essere nidificate da una combinazione di componenti semplici per formare un componente complesso.
Un’ulteriore soluzione tecnica è la gerarchia dei component
Questa si riferisce a una struttura ad albero formata dall’annidamento e dalla combinazione di componenti.
Nella gerarchia esiste una relazione genitore-figlio e una relazione di pari livello tra i componenti.
Un’ulteriore soluzione tecnica la riscontriamo nel passaggio due.
Durante la creazione di un componente React, è possibile utilizzare il metodo della classe es6 o il metodo createReactClass per creare un componente.
Sempre nel passaggio due, nel metodo di rendering del componente creato da React, viene impostato un frammento html che costituisce il contenuto dell’area del componente.
Inoltre, nel componente viene introdotto CSS per regolare l’effetto della pagina per ottenere il ripristino ad alta fedeltà dell’immagine dell’interfaccia utente.
Nella fase tre, con l’aiuto del metodo del ciclo di vita (lifecycle) di React e dell’oggetto di stato, React ascolta gli eventi di interazione dell’utente (mouse, tastiera, tocco dello schermo) nel ciclo di vita del componente per stabilire l’effetto di interazione di ciascun componente nell’applicazione.
Prima del primo passaggio, includere anche: utilizzare lo strumento di scaffolding ufficiale create-act-app raccomandato da React per creare un progetto basato su React e utilizzare React-Router per creare il routing della pagina così da controllare il passaggio dei componenti a livello di pagina.
Utilizzare redux per gestire i dati a livello di componenti incrociati e utilizzare react-redux per ottenere la connessione dati.
Rispetto alla tecnica nota, la presente invenzione ha i seguenti effetti benefici: un metodo per costruire applicazioni web basate sulla componentizzazione della tecnologia React, suddividendo la struttura della pagina in componenti riutilizzabili combinati con l’eccellente tecnologia del framework open source React così da risolvere il processo di sviluppo web, risolvere il problema del basso tasso di riutilizzo del codice e della scarsa manutenibilità.
Inoltre, ha una buona componibilità, riusabilità, manutenibilità e può essere costruito dal basso verso l’alto attraverso l’annidamento dei livelli dei componenti per creare un’interfaccia utente completa.