Realizare UI con React-6.Creare una Nuova React 응용 프로그램

JSXèbellissimo,ma deve essere convertito in normale JavaScript prima di arrival al browser e si puòusareBabelper questa operazione.Possiamo chiamare Babel dal tool,comeWebpack,che usiamo per impacchettare tutti nostri file(JavaScript, CSS,immagini 등),per i progetti 웹.
semplificare la configurazione Inizaiale possiamo usare il pacchetto Create React App di Facebook che gestice tutto questo Per noi!Èuno strumento molto comdo per nizaire a creare una applicatione React dato che configura tutto quello che serve senza chiedere nulla!매번 설치 창설 반응 응용 프로그램sipuòusare npm da linea di comando come indicato di seguito:

npm install -g create-react-app

Installare globalmente Create React 응용 프로그램
문제 해결 및 설치는ilpacchetto글로벌mente,poteteteconsultareladocumentazione di npm,viconsigliodiverificarediavereipermessicorretti입니다.sapere dove i pacchetti globali sono installati Potte usare il Segunte comando:

npm list -g

Verificare dove sono installati i pacchetti globali 회사
Ora creiamo la nostra prima applicazione React chiamatacontattiper usare il codice JSX che abbiamo creato in PRECENTZA

create-react-app contatti

Creiamo l'Applicatione ReactcontattiCome potte vedere eseguendo il comando,create-react-appinstalleráreactereact-domche abbiamo giávisto ed anche il pacchettoreact-scripts.Questo pacchetto contiene molte librerie utili.modo da poter usare le ultime funzionalit á di JavaScriptoltre che JSX에 Babel을 설치합니다.Inlotre는 modo da poter impacchettare le risorse per rilasciare la nostra applicazione ed il server di sviluppo Webpack che aiuta durante lo sviluppo e fornisce la funzionalit á di aggiornamento automatico quando modifichiamo i sorgenti에 anche Webpack을 설치합니다.
Qui potete trovare i sorgenti dell'applicazione React appena creata .

사선

Guardando il risultato dicreate-react-appVedret che ci viene consigliato di usareyarnper gestire la nostra applicatione.Nel caso non lo conosciate,yarnèun gestore di pacchetti simile anpm,èstato create da Facebook per miglorarne alcune funzionalitáed aggiungerne di nuove.Se non volete installareyarn,nonèun problema,uno dei suoi punti di forzaèche QUISITI tutti suoi comandi possono essere eseguiti anche danpm.Quindi se il comando consigliato per eseguire il server di sviluppoèyarn start,possiamo usarenpm startper ottenere lo stesso risultato!

Esploriamo l'Applicatione React 회사

Alla fine dell'esecuzione dicreate-react-appotteniamo una lista di comandi che ci permettono di eseguire la nostra applicatizione,testarla e rilasciarla.Se diamo un'occhiata al codice creato,troveremo molti commenti nei vari files per spiegarci come Funziano e sono stati usati,provate a darci un'occhiata.
Ora spostiamoci nella cartella che contiene l'applicatizione e facciamo partire il server di sviluppo col comandoyarn start.Noterete che in automatico viene aperta una nuova finestra del browser con la nostra applicatizione al-suo interno.Decisamente comodo!
Applizione React create concreate-react-appProvvediamo quindi ad aprire il filesrc/App.jsnel nostro 편집 e vedremo il codice Chee è in esecuzione nel 브라우저.Il codice che vedrete dovrebbe esservi abbastanza는questopunto에 익숙합니다.Si tratta di un component che disegna undivche a sua volta contiene unheadercon un immergineimg,un paragrafoped un linka.Ricordatevi che nessuno di questi sono testo,ma ciascuno di questi elementiècreato tramite la chiamata alla funzionecreateElement()ed usiamo JSX per rendere la sintassi piùconcisa.
Una delle comoditádicreate-react-appèche configura automaticamente il reload dell'applicatione quando eseguiamo delle modifiche al sorgente.Quindi se ora modificate iltesto del paragrafoin“Ciao Mondo!”e salvate la modifica,il browser si aggiorneráautomaticamente mostrando i cambiamenti.
Aggiornamento automatico
Una cosa che nonèpresente nel filesrc/App.jsèil riferimento aReactDOMod a come questo elementoèinserito nel DOM della pagina.Se esploriamo la cartella che contiene questo file ne troviamo un altro interestatesrc/index.js,proviamo a darci un'occhiata.index.js 가져오기Appdal 파일./Appe disignal'applicatione nell'elementorootcheègiápresente nel documento.Ora vi starete chiedendo allo stesso modo da dove viene l'elementoroot.Per risponder a questa domanda,date un'occhiata al filepublic/index.html.Qui potete vedere il codice HTML dove viene eseguito il JavaScript e troverete il div con id root .
Quando eseguiamo la build, 웹 패키지generer á un pacchetto con tutto il nostro JavaScripted inserir á uno script tag nella pagine proprio dopo questo div, inquesto modol'applicatione prende vita.
avere piúinformazione su come funzionacreate-react-app에 따르면viconsiglio di leggere il fileREADME.mdche contiene delle istruzioni e delle guide dettagliate su come usarlo al meglio e modificarlo a seconda delle proprie esigenze.
La documentazione completa dicreate-react-appèdisponibile sul sitohttps://create-react-app.dev/