Share
React a fost cunoscut în trecut pentru că a fost dificil să începeți să creați aplicații, așa cum a trebuit să înțelegeți cum să configurați manual instrumentele de construire. Aceasta este chiar înainte de a scrie o singură linie de cod React.
Instrumentul create-react-app ajută foarte mult la această problemă, deoarece permite oricui să creeze o aplicație completă de lucru React fără a necesita cunoștințe despre configurarea instrumentelor de construire. Realitatea este că aplicația create-react-app va fi bine pentru majoritatea aplicațiilor, mai ales dacă sunteți nou la React.
Pe măsură ce câștigați mai multă experiență cu React, este posibil să aveți anumite cerințe pentru aplicațiile care au nevoie de configurare personalizată a fișierelor de instalare. În acest caz, trebuie să aveți posibilitatea să configurați manual instrumentele de construire React, deoarece aplicația create-react-ascunde aceste informații de la dvs. implicit.
În acest tutorial vă vom arăta cum să configurați o aplicație React prin configurarea manuală a instrumentelor de construcție pe măsură ce mergem. Acest lucru vă va oferi speranța că veți continua și veți experimenta configurații mai complexe.
Deși poate părea puțin cam descurajant la început, vă veți bucura de toate avantajele de a avea un control total asupra fiecărei setări de configurare. Și puteți decide exact ce instrumente să fie incluse în aplicația dvs., care pot varia de la proiect la proiect. Această abordare vă permite, de asemenea, să includeți cu ușurință noi instrumente de construire pe măsură ce acestea vin (ceea ce fac frecvent).
Sunteți gata să creați complet prima aplicație React de la zero? S-o facem.
Pentru a demonstra cum să configurați o aplicație React prin configurarea manuală a instrumentelor de construire, vom construi aceeași aplicație React foarte simplă din tutorialele anterioare din această serie.
Începeți prin crearea unui dosar numit mi-primul-componente-build, apoi deschideți o fereastră de linie de comandă indicând acest dosar.
Tip npm init pentru a crea un package.json fişier. Acest fișier conține toate informațiile despre instrumentele utilizate pentru a crea aplicația dvs., plus setările asociate. Acceptați toate setările implicite și continuați să atingeți introduce (în jur de zece ori) până la finalizare.
Dacă ați acceptat toate valorile implicite, package.json va arata astfel:
"name": "my-first-components-build", "versiunea": "1.0.0", "description" : "echo \" Eroare: nici un test specificat \ "&& exit 1", "author": "", "license": "ISC"
Acum trebuie să adăugăm scripturile React și ReactDOM la proiectul nostru. Vom face acest lucru prin intermediul npm, managerul de pachete pentru Node.js.
În interiorul aceluiași director de linie de comandă, introduceți:
npm instalează - reacționează reac-dom
Aceasta instalează atât React, cât și ReactDom, plus orice dependență cerută de cele două module. Veți observa că acum avem un nou node_modules directorul în care modulele au fost adăugate.
Dacă te uiți la package.json fișier, un nou dependențe a fost adăugată proprietatea care conține informații despre modulele de nod pe care le-am instalat.
"dependențe": "react": "^ 15.6.1", "react-dom": "^ 15.6.1"
Acest lucru sa întâmplat deoarece am specificat --Salvați opțiune în nostru npm install comanda. Această notificare npm că am vrut să urmăriți dependențele instalate de proiect. Acest lucru este important dacă dorim să împărtășim proiectul nostru.
De obicei, pentru că node_modules dosarul este atât de mare, nu doriți să încercați să partajați acest lucru direct. În schimb, vă împărtășiți proiectul fără node_modules pliant. Apoi, când cineva vă descarcă proiectul, tot ce trebuie să faceți este să tastați npm install pentru a duplica configurarea direct de la package.json.
Notă: În npm 5.x, modulele instalate sunt salvate automat la package.json. Nu mai trebuie să specificați manual --Salvați opțiune.
În interiorul mi-primul-componente-build folder, creați un nou src și adăugați un index.js fișier. Vom reveni la aceasta mai târziu când începem să creăm aplicația noastră React, odată ce am configurat fișierele de configurare a proiectului.
Adăugați un fișier index.html în interiorul aceluiași folder cu următorul cod:
Crearea manuală a unei aplicații reactive, utilizând Instrumentele de construire
Vrem să putem compila aplicația noastră până la un singur fișier JavaScript și să facem uz de clase și module JSX și ES6. Pentru a face acest lucru, trebuie să instalăm modulele Webpack și Babel prin intermediul npm.
Să instalăm mai întâi Babel. Introduceți următoarele în fereastra liniei de comandă:
npm instalare -save-dev babel-core babel-încărcător babel-preset-env babel-preset-react
Aceasta instalează toate modulele necesare pentru ca Babel să compileze codul ES6 și JSX până la standardul JavaScript.
Acum, să instalăm Webpack, din nou prin linia de comandă:
npm instalează -save-dev html-webpack-plugin webpack webpack-dev-server
Aceasta instalează toate modulele necesare pentru Webpack, un server web local și ne permite să direcționăm Webpack pentru a crea o rețea dinamică index.html fișier în public folder bazat pe cel pe care l-am adăugat la src pliant. De asemenea, putem adăuga o referință dinamică la fișierul JavaScript inclus în fișierul HTML de fiecare dată când este construită aplicația.
După ce aceste module noi au fost instalate, package.json fișierul va arăta astfel:
"dependență": "reacție": "^ 15.6.1", "react-dom": "^ 15.6.1", "devDependencies" , "habel-preset-react": "^ 6.24.1", "html-webpack-plugin": " ^ 2.28.0 "," webpack ":" ^ 3.0.0 "," webpack-dev-server ":" ^ 2.5.0 "
De data aceasta, însă, dependențele Webpack și Babel sunt salvate package.json ca dependențe dev.
Aceasta înseamnă că aceste module particulare sunt necesare în faza de dezvoltare (adică de a construi) a aplicației. Pe de altă parte, dependențele (cum ar fi React și ReactDOM) sunt necesare în timpul rulării și astfel vor fi incluse direct împreună cu codul nostru personalizat de aplicație.
Pentru ca Webpack să ne construiască aplicația și să o legăm într-un singur fișier, trebuie să configuram setările. În dosarul rădăcină de aplicații, creați webpack.config.js, care este folosit pentru a stoca setările de construire specifice Webpack.
Avem nevoie de Webpack pentru a face trei lucruri:
Interior webpack.config.js, adăuga:
Accentsconagua
var path = necesită ('path'); var HtmlWebpackPlugin = necesită ('html-webpack-plugin'); modul.exports = input: '//src/index.js', ieșire: path: path.resolve (__ dirname, 'public'), nume fișier: 'build.js', modul: rules: [ : /\.(js)$/, folosiți: 'babel-loader'], pluginuri: [new HtmlWebpackPlugin (template: 'src / index.html')]Nu vă faceți griji prea mult despre sintaxa utilizată aici; înțelegeți doar modul de prezentare a ceea ce se întâmplă.
Tot ceea ce facem este să exportăm un obiect JavaScript cu anumite proprietăți care controlează modul în care Webpack construiește aplicația noastră. intrare proprietatea specifică punctul de plecare al aplicației noastre React, care este index.js. Apoi, producție proprietatea definește calea de ieșire și numele fișierului din fișierul JavaScript asociat.
În ceea ce privește procesul de construire în sine, vrem ca Webpack să treacă toate fișierele JavaScript prin intermediul compilatorului Babel pentru a transforma JSX / ES6 în standard JavaScript. Noi facem asta prin modul proprietate. Pur și simplu specifică o expresie regulată care rulează transformări Babel numai pentru fișierele JavaScript.
Pentru a finaliza configurația Babel, trebuie să adăugăm o intrare la package.json fișier pentru a specifica transformările Babel pe care dorim să le efectuăm pe fișierele JavaScript. Deschide package.json și adăugați a hărmălaie proprietate:
"babel": "presetări": ["env", "reacție"]],
Acest lucru va face două transformări pe fiecare fișier JavaScript în proiectul nostru. env transformarea va converti JavaScript ES6 la standard JavaScript care este compatibil cu toate browserele. Si reacţiona transformarea va compila codul JSX până la createElement () apeluri funcționale, care este perfect valid.
Acum, înapoi la noi webpack.config.js fişier.
Ultima proprietate pe care o avem este Plugin-uri, care conține toate operațiile speciale pe care le dăm în timpul procesului de construire. În cazul nostru, avem nevoie de Webpack pentru a crea un index.html fișier care include o referință la fișierul JavaScript asociat. De asemenea, indicăm existența index.html (cel pe care l-am creat mai devreme) pentru a fi folosit ca șablon pentru a crea pachetul final index.html fişier.
Să adăugăm acum scenariu proprietate la package.json. Apropo, puteți adăuga cât mai multe scripturi pe care le doriți pentru a efectua diverse sarcini. Pentru moment, vrem doar să putem rula Webpack, așa că package.json ștergeți "Test" script și înlocuiți-l cu:
"scripts": "build": "webpack",,
Înainte de a testa procesul de construire, să adăugăm o componentă React index.js așa că avem ceva de făcut.
import React, Component de la "reacție"; import ReactDOM de la "react-dom"; clasa App extinde Component render () return () ReactDOM.render (Salut Lume!
, document.querySelector ('#app'));
Acest lucru ar trebui să arate foarte familiar acum dacă ați urmat împreună cu tutorialele anterioare din această serie.
Din linia de comandă, executați:
npm run build
După puțină vreme, ar trebui să vezi un nou public dosarul creat în interior mi-primul-componente-build, conținând index.html și index.js. Deschide index.html pentru a vedea ieșirea din aplicația noastră React de testare.
Observați că fișierul JavaScript asociat a fost adăugat pentru noi, iar componenta de testare este redată la elementul DOM corect.
După ce începeți să efectuați mai multe modificări în aplicația dvs., veți afla în curând că este destul de dificil să editați manual un fișier, să îl salvați, să executați comanda de construire și să reîncărcați fereastra browserului pentru a vedea modificările.
Din fericire, putem folosi serverul mini Webpack pe care l-am instalat mai devreme pentru a automatiza acest proces. Adăugați un al doilea script pentru package.json astfel încât proprietatea "scripturilor" arată astfel:
"script-uri": "build": "webpack", "dev": "webpack-dev-server -open",
Acum rulați:
npm run dev
După câteva secunde, veți vedea o nouă fereastră de browser deschisă cu aplicația dvs. web care rulează. Adresa URL se îndreaptă acum spre un server local în loc să îndrepte către un anumit fișier local. Efectuați o modificare minoră index.js în src folder și salvați. Rețineți că aplicația dvs. se actualizează automat în browser aproape instantaneu pentru a reflecta noile modificări.
Webpack va monitoriza fișierele din aplicație pentru modificări. Atunci când se efectuează orice modificare și se salvează, Webpack va recompila aplicația dvs. și va reîncărca automat fereastra browserului cu noile actualizări.
Notă: Serverul Webpack nu va reconstrui aplicația, ca atare - mai degrabă stochează modificările într-o memorie cache, de aceea poate actualiza browserul atât de repede. Aceasta înseamnă că nu veți vedea actualizările reflectate în public pliant. De fapt, puteți șterge acest dosar în întregime atunci când utilizați serverul Webpack.
Când trebuie să construiți aplicația, puteți rula pur și simplu npm run build pentru a crea public (dacă este necesar) și ieșiți fișierele de aplicații, gata pentru distribuire.
Pentru completare, să adăugăm cele două componente simple pe care le-am utilizat în tutorialele anterioare.
Adăugați două fișiere noi în directorul de proiect rădăcină numit MyFirstComponent.js și MySecondComponent.js în directorul principal al aplicației. În MyFirstComponent.js, adăugați următorul cod:
import React, Component de la "reacție"; class MyFirstComponent extinde Component render () return (this.props.number: Bună ziua de la React!
) export implicit MyFirstComponent;
Si in MySecondComponent.js, adăuga:
import React, Component de la "reacție"; clasa MySecondComponent extinde Component render () return (this.props.number: Componenta mea a doua reacție.
) export implicit MySecondComponent;
Pentru a utiliza aceste componente în aplicația noastră, actualizați-vă index.js la următoarele:
import React, Component de la "reacție"; import ReactDOM de la "react-dom"; import MyFirstComponent din "./MyFirstComponent"; import MySecondComponent din "./MySecondComponent"; clasa App extinde Component render () return () ReactDOM.render (Componentele mele de primă reacție!
, document.querySelector ('#app'));
Acest lucru are ca rezultat aceeași ieșire cum am văzut mai devreme, cu excepția acestei perioade prin setarea manuală a aplicației React 100%.
După ce ați parcurs această configurare manuală odată și ați creat fișiere de configurare a configurației, aceasta este singura dată când va trebui să faceți acest lucru complet de la zero. Pentru proiectele viitoare, puteți reutiliza unul sau mai multe dintre fișierele de instalare existente, făcând proiectele React ulterioare mult mai rapide.
Ați putea crea chiar și un set de șabloane Starter React create pentru scopuri și le găzduiți pe GitHub. Ar fi atunci un simplu caz de clonare a unui proiect demarat și de funcționare npm init pentru a instala modulele necesare Node.js.
Proiectul React pentru acest tutorial este disponibil pentru descărcare, astfel încât să puteți juca cu el sau să îl utilizați ca șablon pentru noi proiecte.
Apasă pe Descărcați atașamentul în bara laterală dreaptă pentru a accesa fișierul .zip al proiectului. Odată descărcat, extrageți-l și deschideți o fereastră de linie de comandă. Asigurați-vă că sunteți în mi-primul-componente-build director.
Introduceți următoarele comenzi pentru a instala și a compila aplicația React.
npm instalare npm run dev
Prima comandă va descărca toate modulele Node.js necesare pentru proiect, ceea ce va dura un minut sau două. A doua comandă va compila aplicația React și va rula mini serverul web, afișându-l în browser.
Încercați să efectuați anumite modificări în aplicația dvs. React. De fiecare dată când salvați modificări, aplicația dvs. va fi reclasificată, iar fereastra browserului se actualizează automat pentru a reflecta noua versiune a aplicației dvs..
Când doriți să vă construiți proiectul pentru distribuție, trebuie doar să executați următoarea comandă.
npm run build
De-a lungul acestei serii de tutorial, am analizat câteva moduri în care puteți aborda configurarea aplicațiilor React, fiecare dintre ele necesitând progresiv mai multe sarcini de configurare în față. Dar beneficiul pe termen lung este acela că aveți mult mai mult control și flexibilitate în ceea ce privește exact modul în care este înființat proiectul.
Odată ce ați reușit să configurați React, cred că veți găsi aplicații în curs de dezvoltare foarte distractive. Mi-ar plăcea să vă aud comentariile. Dați-mi voie să știu ce intenționați să construiți în continuare cu React!
