Cosa hè React JS per i manichi di principianti, ciò chì hè, tutoriali, installazione, documentazione – cumu installà è aduprà a biblioteca React JS quandu scrivite robot di cummerciale. Spessu in l’annunzii di travagliu per i specialisti in computer, pudete truvà un requisitu chì dice chì avete cumpetenze in a biblioteca JavaScript. Iè, è aspettanu a cunniscenza di React micca solu da i sviluppatori di software, ma ancu da i programatori chì sò impegnati in u sviluppu internu di u situ, è micca u disignu esternu. Chì tipu di biblioteca hè questu, chì opportunità dà in u travagliu, è induve un principiante principia à cunnosce? Scupritemu in questu articulu.
- Biblioteca JavaScript – React: ciò chì hè
- Perchè a biblioteca React hè necessaria?
- Cunniscenza per i principianti : cuncetti basi
- Salutami Monde !
- Fundamenti di a lingua di u sistema JSX
- Cosa hè JSX?
- Formazione di espressioni in a lingua di u sistema
- Rendu di dettagliu
- Cumpunenti è puntelli
- Varietà di cumpunenti: funziunali è classi
- puntelli
- Statu è ciclu di vita
- Analisi di l’avvenimenti
- Prestazione cundizionale di elementi
- Cambiamentu di cumpunenti
- Elenchi è Chjavi
- Chjavi
- Forme
- Elementi gestiti
- L’ascesa di u statu
- Perchè hè cusì necessariu di cuntrullà l’ascesa di u statu ?
- Composizione vs Eredità
- Principi di React.js
- Funzionalità di a biblioteca React.js
- Usu praticu
- Applicazione pratica di React quandu scrivite robot di cummerciale in JavaScript
- GitHub è React.js
- Documentazione
Biblioteca JavaScript – React: ciò chì hè
React.JS hè una biblioteca di u pupulare
lingua di prugrammazione JavaScript , furmata da a reta suciale in linea Facebook per migliurà è simplificà u prucessu di sviluppà a cunchiglia esterna di siti è applicazioni – l’interfaccia cù quale l’utilizatore interagisce. A funzione principale di a biblioteca hè cumpunenti è stati. Un cumpunente hè una parte di un settore digitale chì hè rispunsevule per l’apparizione di una certa parte di u sistema chì hè cuncepitu.
Nota ! Tali parti cumpunenti ponu esse nidificate.
Un statu hè una cullizzioni di tutte e dati nantu à i dettagli di una interfaccia, cumpresa a so rapprisintazione. Utilizendu esempii, avemu da sapè in più dettagliu è chjaramente ciò chì hè. L’imaghjini sottu mostra alcuni di i grandi cumpunenti – pubblicazione in una reta suciale in linea, una sezione cù infurmazione generale è mostra foto. Ogni parte include cumpunenti più chjuchi, chì sò i cumpunenti. Per esempiu, una publicazione cuntene testu, ritratti, u nome di l’utilizatore chì publica l’infurmazioni, etc. A seccione di l’imaghjini include l’imaghjini individuali, è a sezione di l’infurmazione generale cuntene una breve infurmazione.
Ognunu di sti cumpunenti (cumpunenti) anu un statu. Vale à dì, a seccione cù l’infurmazioni ginirali pareranu diverse nantu à i dispusitivi diffirenti, l’elementu “cum’è” cambia u culore quandu pressatu è u numeru rispunsevuli di u numeru tutale di piace; a publicazione, à u turnu, pò accurtà u testu o trasmette in tuttu.
Cusì, a flessibilità di React.JS hè spressione – u cumpunente di l’interfaccia hè scrittu una volta, è dopu hè datu tutti i stati pussibuli.
Perchè a biblioteca React hè necessaria?
React.JS hè una di l’opzioni pussibuli per scrive codice JS o HTML in un formatu convenientu, formate copie di questu è rende visuale. I cumpunenti quì sò scritti in una lingua di sistema speciale – JSX, chì include elementi di a lingua di prugrammazione JavaScript è a lingua di marcatura HTML standardizata.
U codice scrittu in JSX hè abbastanza specificu. Hè impurtante ancu chì u navigatore web ùn hà micca bisognu di capiscenu sta lingua di u sistema – u codice React.JS hè trasferitu à JS, chì ogni navigatore percepisce senza prublemi. Per fà questu, ciò chì hè creatu in a biblioteca hè passatu per compilatori specializati (unu di i più populari oghje hè Babel js), chì cunverte codici in linguaggi di prugrammazione menu cunnisciuti in rapprisintazioni JavaScript.
À u principiu, pò sembrà chì u sistema di usu hè estremamente illogicu, ma dopu un pocu tempu vi abituate è capisce perchè u mecanismu hè designatu cusì. A biblioteca JavaScript hà una quantità di vantaghji forti:
- a lingua di prugrammazione di u sistema hè più faciule di ricunnosce chè u JavaScript ben cunnisciutu, è per quessa, ci vole parechje volte menu tempu per sustene u codice è eliminà l’errore nantu à questu (a rapidità di scrive novi codici è prugrammi aumenterà in cunseguenza);
- un sistema còmuda è praticu di elementi custituenti hè custruitu quì – ripetiri parti di u codice chì sò usati in diverse tappe di scrittura è in diversi prugrammi, è cambia ancu secondu u cuntestu;
- ogni elementu custituente hè subordinatu solu à u so statu , per quessa, hè più faciule per correggerà i difetti in u codice se un errore hè subitu in u so travagliu in pratica; mumenti sbagliati flottanu à a superficia: un elementu chì funziona bè cuntinueghja à travaglià stabile in questu modu, salvu chì, sicuru, u statu sbagliatu hè utilizatu in relazione à questu.
Cusì, pudemu cuncludi chì a biblioteca React.JS pò salvà assai tempu, rende u codice più specificu, urganizà a sequenza in l’ordine currettu, è aduprà grandi blocchi di novu. Questi vantaghji permettenu di riduce u costu di u prucessu di creazione di l’interfaccia d’utilizatore, è ancu di accelerà u tempu di stu prucessu stessu. Avè e cumpetenze per utilizà a lingua di prugrammazione JS è HTML, amparà à utilizà u sistema JSX hè faciule – solu uni pochi di ghjorni per maestru.
Nota ! Hè raziunale di utilizà a biblioteca quandu travaglia cù grandi prughjetti, quandu hè necessariu di scrive un gran numaru di pagine dinamiche. Un situ di piccula attività ùn hà micca bisognu di tali cumplessità.
React JS fundamental course da A à Z: https://youtu.be/GNrdg3PzpJQ
Cunniscenza per i principianti : cuncetti basi
Salutami Monde !
Quandu accede à a prima pagina di a biblioteca, l’utilizatore vede un intestazione di benvenuta cum’è un picculu esempiu – “Hello world!”.
Fundamenti di a lingua di u sistema JSX
JSX hè una lingua di prugrammazione di u sistema, una estensione di u JavaScript ben cunnisciutu. Include una cumminazione di duie lingue – prugrammazione JA è a lingua di marcatura HTML standardizata. I sviluppatori l’utilizanu per aghjustà u cuncettu per mostrà React esattamente cumu l’interfaccia d’utilizatore deve esse simile. JSX crea e “parti” di a biblioteca.
Cosa hè JSX?
A biblioteca di React aderisce à a logica chì l’essenza di rendering hè direttamente ligata à a logica di l’interfaccia d’utilizatore: cumu l’avvenimenti sò processati, cumu cambia u statu in un certu periodu, è cumu l’infurmazioni sò preparati per a presentazione. A biblioteca JS pò esse usata senza a so lingua di u sistema, ma un gran numaru di sviluppatori a trovanu preziosa per via di a so chiarità è di a cuncretezza quandu travaglia cù una interfaccia d’utilizatore generata da u codice JavaScript. Inoltre, l’estensione rende più faciule per React per generà notifiche di mumentu invalidu è errore.
Formazione di espressioni in a lingua di u sistema
JSX permette di utilizà qualsiasi espressioni JavaScript ben scritte in curly braces in un prucessu.
JSX hè ancu una espressione Una volta chì u codice fonte hè bytecoded, ogni espressione JSX si trasforma in una chjama di funzione JS standard chì mira à a categuria JavaScript. Da questu si pò capisce chì l’estensione di u sistema di a lingua di prugrammazione ufficiale pò esse aduprata in u manual si è per periodi.
JSX hè Objects L’uggetti rapprisentati da l’estensione sò chjamati elementi React. Chjarificanu u risultatu chì u sviluppatore vole vede nantu à a visualizazione. A biblioteca ricunnosce questi ogetti è li usa in u prucessu di generazione è mantene u Modelu di l’Oggettu di Documentu.
Rendu di dettagliu
I dettagli sò i tanti picculi blocchi chì custituiscenu i prugrammi React.
I dettagli sò a stampa chì u sviluppatore vole vede à a fine nantu à u monitor. Comparatu à l’elementi di u Modelu di l’Oggettu di Documentu, l’elementi di a biblioteca sò simplici è ùn occupanu micca assai risorse. Elementi sò i cumpunenti di cumpunenti.
Cumpunenti è puntelli
I cumpunenti facenu pussibule di dividisce l’UI in parti indipendenti, chì sò più faciuli di travaglià separatamente. Puderanu esse cumminati è usati parechje volte. Per a maiò parte, a funziunalità di i cumpunenti hè simile à a funziunalità di a lingua di prugrammazione JavaScript stessu. Piglianu l’infurmazioni di input, chì hè chjamatu puntelli, è tornanu elementi React chì indicanu u mudellu di sviluppu chì u sviluppatore vole vede nantu à u monitor.
Varietà di cumpunenti: funziunali è classi
Hè più faciule per riferite à un cumpunente di biblioteca cum’è una funzione.
I cumpunenti ponu ancu esse rapprisintati in u formatu di classi ES6.
Interessante! A biblioteca React definisce sti dui tipi di cumpunenti cum’è simili.
puntelli
I puntelli sò oggetti immutabili chì sò di sola lettura. Dunque, un cumpunente ùn deve micca scrive nunda à i so puntelli, ùn importa ciò chì appartene.
Statu è ciclu di vita
Prima, andemu à scopre cumu applicà bè u statu à u travagliu. Ci hè trè cose impurtanti per sapè nantu à u statu di cumpunenti:
- Ùn cambiate micca u statu direttamente, utilizate u metudu setState. Ricurdativi chì l’unicu spaziu induve pudete cambià u statu direttamente hè u custruttore.
- L’aghjurnamenti di u Statu ùn ponu micca esse sincroni.
- U flussu di l’infurmazioni hà una direzzione. In a custruzzione di cumpunenti, nimu di elli sapi se u statu hè assignatu à un altru cumpunente. Ùn importa micca cumu questu o quellu elementu funzionale indipendente hè statu furmatu – utilizendu un strumentu funziunale o di classificazione. Questu hè chjamatu flussu di dati “downstream”. Un statu hè sempre definitu per qualchì elementu, è l’associazioni strutturale di stu statu pò affettà solu e parti chì si trovanu “bassu” in l’ordine gerarchicu.
Di genere, u statu hè chjamatu “lucale”, “internu” o oculatu. Hè visibile solu à l’elementu funziunale stessu è invisibule à l’altri parti di React. In i prugrammi di biblioteca, se un elementu funziunale indipendente hè dotatu di un certu statu o micca hè un sviluppu internu di sta parte, chì pò cambià cù u tempu. Hè ancu interessante chì in u travagliu pudete combine cumpunenti cù è senza statu.
Analisi di l’avvenimenti
U prucessu di analizà l’avvenimenti in i cumpunenti React hè simile à a gestione di l’avvenimenti in l’elementi di mudellu di l’ughjettu di documentu. Tuttavia, ci sò parechje caratteristiche chì li distingue l’una di l’altru:
- L’avvenimenti in a biblioteca JavaScript sò chjamati in un stilu diversu da quellu standard.
- Utilizendu a Lingua di Programmazione Estesa di Sistema, u sviluppatore passa una subrutina cum’è un gestore di eventi invece di una stringa.
Prestazione cundizionale di elementi
A biblioteca JavaScript permette di rompe a logica di sviluppà elementi in cumpunenti indipendenti. Puderanu esse affissati per a visualizazione generale o oculati, secondu u statu chì sò dotati in u mumentu. A rendering cundizionale di elementi funziona nantu à u listessu principiu cum’è l’espressioni cundiziunali basati nantu à a lingua di prugrammazione JavaScript. A volte succede chì a biblioteca necessita una spiegazione di cumu u statu affetta l’occultamentu o a rendering di certi elementi. Quì hè più logicu per utilizà un helper JS cundizionale o espressioni simili à if.
Cambiamentu di cumpunenti
Elementi di a biblioteca React ponu esse aghjuntu à e variàbili. Questa hè una suluzione pratica quandu una certa cundizione indica se una parte di u cumpunente deve esse disegnata, o ùn hà micca sensu, mentre chì u restu di a parte resta inalterata.
Elenchi è Chjavi
Questa sezione include parechji cumpunenti:
- Disegnu parechji elementi . L’utilizatore pò furmà un inseme di elementi è incrustà in u linguaghju di prugrammazione di u sistema utilizendu curly braces.
- Lista elementari di elementi . Spessu, l’utilizatori è i sviluppatori aghjustanu listi direttamente in una parte di cumpunenti.
Chjavi
Una chjave in a biblioteca React JavaScript denota un strumentu specializatu chì deve esse inseritu quandu genera una lista di cumpunenti. I chjavi aiutanu à a biblioteca JavaScript per identificà quali elementi sò stati aghjustati, aghjunti o eliminati. Hè impurtante di marcarli in modu chì React pò correlate i cumpunenti di e dati strutturali dopu chì un certu tempu hè passatu.
Forme
In a biblioteca JS, l’elementi di lingua di marcatura standardizati funzionanu un pocu sfarente di cumpunenti di u mudellu di l’ughjettu di documentu, perchè l’elementi di forma inizialmente anu un statu oculatu.
Elementi gestiti
In una lingua di marcatura standardizata, forme cum’è input , select , textarea tendenu à mantene u so propiu statu è l’aghjurnà quandu u sviluppatore inserisce nova infurmazione. React.js state sempre definisce u valore di i campi di input in un elementu di cumpusizioni amministratu. Ancu s’ellu indica chì l’utilizatore deve scrive un pocu più di u codice originale datu, hè avà pussibule di passà stu valore à altre parti di l’interfaccia d’utilizatore.
L’ascesa di u statu
L’elevazione di u Statu hè un mudellu standardizatu chì ogni sviluppatore deve esse cunnisciutu è esse capace di applicà in u prucessu di travagliu. U so usu eliminerà mudelli di gestione statali cumplessi è di solitu inutili.
Perchè hè cusì necessariu di cuntrullà l’ascesa di u statu ?
Elevà u statu à u livellu di i cumpunenti passati per quelli parte chì necessitanu hè necessariu per chì tutti l’elementi ponu participà à u statu. Un nivellu stabile di statu farà più faciule per sparghje trà tutti i cumpunenti chì si basanu.
Composizione vs Eredità
React.js include un mudellu di cumpusizioni forte, per quessa, hè cunsigliatu di utilizà u prucessu di custruisce un sanu da parte invece di l’eredità per riutilizà u codice scrittu prima trà elementi. Cusì, i puntelli è a capacità di creà una sola cumpusizioni sana da e parti cumpunenti, furnisce u sviluppatore cù a flessibilità necessaria per creà a cunchiglia è u cumpurtamentu di l’elementu in modu specificu è sicuru.
Ricurdativi! E parti cumpunenti ponu piglià puntelli indipindenti, cumprese parti elementari chì custituiscenu biblioteche o funzioni.
In l’eventu chì avete bisognu di utilizà una funzione senza sguardu per travaglià cù cumpunenti una seconda o terza volta, tirala fora in un modulu JS separatu. Sposta in un cumpunente è utilizate a funzione generata senza più espansione. React o Vue o Angular, cosa sceglie: https://youtu.be/Nm8GpLCAgwk
Principi di React.js
Tutta a filusufìa di a biblioteca JavaScript hè oculata in a guida React. Sembra chì questu hè longu è micca cusì grande impurtanza, in ogni modu, parechji utilizatori dicenu chì dopu avè lettu tuttu hè cascatu in u locu. A ducumentazione hè abbastanza vechja, ma sempre di grande valore è pertinenza –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html
Funzionalità di a biblioteca React.js
Utilizendu a biblioteca JavaScript, l’utilizatore hà l’uppurtunità di pagà tutta a so attenzione direttamente à u prucessu di sviluppu di l’UI è i cumpunenti di l’applicazione, menu di tutti esse distractatu da a furmazione è e pussibuli mancanza di u codice scrittu. A biblioteca permette di sviluppà prugrammi più veloce, facilita a cunfigurà è edità i cumpunenti è u prucessu di tuttu u prughjettu in tuttu. Cusì, React.js cuntene elementi rispunsevuli di a cumunicazione in a reta glubale, UI, u cuntrollu di u statu di u prugramma è a capacità di risolve altre prublemi cumplessi. A biblioteca hà ancu e seguenti caratteristiche funziunali:
- Praticità . React.js hè dispunibule in formatu minificatu. Stu pacchettu compactu ùn deve esse chjaramente cunfiguratu. Hè digià include una funzione di split di codice chì riduce u tempu chì ci vole à apre a versione di u navigatore di u situ, postu chì sta opzione impedisce cumpunenti di rende à u stessu tempu.
- Ecosistema pompatu è cunfurmità . Un gran numaru di arnesi sò dispunibuli in a biblioteca, sustinutu da altri siti, chì permette à l’utilizatori di sviluppà novi prugrammi cumplessi per ogni scopu.
- Funzionalità cumpleta . U vantaghju principalu di a biblioteca JavaScript hè chì tutte e novi versioni di a piattaforma risponde à i requisiti di i vechji, cusì pudete aduprà a versione vechja è a versione aghjurnata, tutti sò supportati è sò pertinenti à questu ghjornu. E versioni liberate in precedenza ùn diventanu micca obsolete dopu l’ultime aghjurnamenti.
Usu praticu
In a pagina principale di a biblioteca, in l’istruzzioni per l’utilizatori, ci sò parechji esempi illustrativi di l’usu di React in pratica. Pudete correggerli manualmente è pruvate à eseguisce. Ancu s’è vo site un novu utilizatore è ùn capisce micca l’essenza è a logica di a biblioteca, aghjustate u codice à u vostru piace è vede u risultatu.
Applicazione pratica di React quandu scrivite robot di cummerciale in JavaScript
Hè impurtante di capisce chì un sviluppatore ùn programa micca JS, ma scrive scripts (scripts). dunque, utilizendu a biblioteca, un sviluppatore pò scrive codice per un robot di cummerciale sussegwente utilizatu per scopi di cummerciale, è ancu cuntinuà à cuncepisce a so apparenza basatu annantu à sta piattaforma. In fattu, un robot di cummerciale per u cummerciu hè ancu una applicazione, di quale un gran numaru sò sviluppati cù React.js. In ogni casu, alcune funzioni è a parte interna di u bot anu da esse fattu ancu in altri siti chì furniscenu strumenti adattati per questu.
GitHub è React.js
GitHub hè una piattaforma chì accoglie tutte e versioni di prughjetti. L’utilizatore cunnetta l’ospitu, passa per a prucedura di registrazione in u situ web ufficiale di GitHub, è poi crea un repository in linea induve trasferisce tutti i fugliali da Git.
Git hè u serviziu di cuntrollu di versione di u prughjettu più pupulare è pertinente oghje, è GitHub hè un repository di codice remoto.
Riferimentu! Solu l’utilizatori chì anu ricivutu u ligame adattatu cù permessu anu accessu à edità è scaricamentu di schedari.
Documentazione
Tutti i tutoriali è i materiali aghjurnati in quantu à a biblioteca JavaScript sò aghjurnati cù l’ultima aghjurnazione. I sviluppatori anu ancu compilatu è postu per a lettura generale di e versioni antichi di a documentazione, publicata in una pagina separata di a biblioteca. Dunque, serà più faciule per i principianti per ammaistrà e cumpetenze di a gestione di u situ: u materiale anticu è novu – tuttu hè quì, l’accessu hè liberu per tutti.
Nota ! Ùn vi scurdate di leghje i manuali. Almenu fighjate – digià a maiò parte di ciò chì pareva incomprensibile cascarà in u locu.
A biblioteca React hè una piattaforma populari è pertinente oghje. A so versatilità permette à i sviluppatori di fà prughjetti di megliu qualità è in menu tempu. Inoltre, cunnosce a piattaforma è avè e cumpetenze per usà face un specialista più in dumanda in u mercatu di u travagliu.