React.JS bakeng sa li-dummies tse qalang, tse sebelisang laebrari ha u ngola liroboto tsa khoebo

React JS ke eng bakeng sa li-dummies tse qalang, ke eng, lithupelo, ho kenya, litokomane – mokhoa oa ho kenya le ho sebelisa laebrari ea React JS ha u ngola liroboto tsa khoebo. Hangata lipapatsong tsa mesebetsi bakeng sa litsebi tsa khomphutha, u ka fumana tlhokahalo e reng u na le litsebo laebraring ea JavaScript. E, ‘me ba lebeletse tsebo ea React eseng feela ho baetsi ba software, empa hape le ho baetsi ba mananeo ba sebetsanang le nts’etsopele ea ka hare ea sebaka sa marang-rang, eseng moralo oa kantle. Laebrari ee ke ea mofuta ofe, e fana ka menyetla efe mosebetsing, hona motho ea qalang o qala ho tloaelana hokae? A re hlahlobeng taba ena sehloohong sena.

Laeborari ea JavaScript – React: ke eng

React.JS ke laebrari ea puo ea lenaneo e tsebahalang ea JavaScript , e entsoeng ke marang-rang a marang-rang a marang-rang a Facebook e le ho ntlafatsa le ho nolofatsa mokhoa oa ho hlahisa khetla ea kantle ea libaka le lits’ebetso – sebopeho seo mosebelisi a sebelisanang le sona. Karolo e ka sehloohong ea laebrari ke likarolo le linaha. Karolo ke karolo ea sete ea dijithale e ikarabellang bakeng sa ponahalo ea karolo e itseng ea sistimi e hlophisitsoeng.

Hlokomela! Likarolo tse joalo tsa likarolo li ka etsoa sehlaha.

Naha ke pokello ea lintlha tsohle mabapi le lintlha tsa sebopeho, ho kenyeletsoa le tlhahiso ea eona. Ka ho sebelisa mehlala, re tla fumana ka botlalo le ka ho hlaka hore na ke eng. Setšoantšo se ka tlase se bonts’a tse ling tsa likarolo tse kholo – ho romella marang-rang a marang-rang, karolo e nang le tlhaiso-leseling e akaretsang le ho bonts’a linepe. Karolo ka ‘ngoe e kenyelletsa likaroloana tse nyane, e leng likarolo. Ka mohlala, sengoliloeng se na le mongolo, linepe, lebitso la mosebelisi ea hatisang boitsebiso, joalo-joalo. Karolo ea litšoantšo e na le litšoantšo ka bomong, ’me karolo ea boitsebiso bo akaretsang e na le boitsebiso bo bokhutšoane.
E ‘ngoe le e ‘ngoe ea likarolo tsena (likarolo) e na le boemo. Ke hore, karolo e nang le tlhahisoleseding e akaretsang e tla shebahala e fapane ho lisebelisoa tse fapaneng, ntho ea “joaloka” e fetola ‘mala ha e hatelloa le palo e ikarabellang bakeng sa palo eohle ea lintho tse ratoang; sengoliloeng sona se ka khutsufatsa taba e ngotsoeng kapa ea se fetisa ka botlalo.

Ka hona, ho feto-fetoha ha React.JS ho hlalosoa – karolo ea sebopeho e ngotsoe hang, ‘me ka mor’a moo e fuoa linaha tsohle tse ka khonehang.

Ke hobane’ng ha laebrari ea React e hlokahala?

React.JS ke e ‘ngoe ea likhetho tse ka khonehang tsa ho ngola khoutu ea JS kapa HTML ka mokhoa o bonolo, etsa likopi tsa eona le ho etsa hore e bonahale. Likarolo tse mona li ngotsoe ka puo e khethehileng ea sistimi – JSX, e kenyelletsang likarolo tsa puo ea lenaneo la JavaScript le puo e tloaelehileng ea HTML.
Khoutu e ngotsoeng ho JSX e hlakile haholo. Hape ke habohlokoa hore sebatli sa marang-rang ha sea tlameha ho utloisisa puo ena ea tsamaiso – khoutu ea React.JS e fetisetsoa ho JS, eo sebapali leha e le sefe se se bonang ntle le mathata. Ho etsa sena, se bōpiloeng laebraring se fetisoa ka li-compilers tse khethehileng (e ‘ngoe ea tse tsebahalang haholo kajeno ke Babel js), e fetolelang likhoutu ka lipuo tse sa tsejoeng haholo tsa lenaneo ho li hlahisa JavaScript.
Qalong ho ka ‘na ha bonahala eka mokhoa oa ts’ebeliso ha o utloahale ka ho fetisisa, empa ka mor’a nakoana oa e tloaela’ me ua hlokomela hore na ke hobane’ng ha mochine o entsoe ka tsela eo. Laeborari ea JavaScript e na le melemo e mengata e matla:

• puo ea lenaneo la tsamaiso e bonolo ho e lemoha ho feta JavaScript e tsebahalang, ‘me ka lebaka leo, ho tla nka nako e fokolang ka makhetlo a’ maloa ho tšehetsa khoutu le ho felisa liphoso ho eona (lebelo la ho ngola mekhoa e mecha le mananeo a tla eketseha ho latela);
• Sistimi e bonolo le e sebetsang ea likarolo tsa mantlha e hahiloe mona – likarolo tse pheta-phetoang tsa khoutu tse sebelisoang ka mekhahlelo e fapaneng ea ho ngola le mananeong a fapaneng, hape li fetoha ho latela moelelo;
• ntho e ‘ngoe le e’ ngoe ea constituent e tlas’a boemo ba eona feela , ka hona ho bonolo ho lokisa mefokolo ea khoutu haeba phoso e fumanoa ka tšohanyetso mosebetsing oa eona; nako tse fosahetseng di phaphamala: ntho e sebetsang hantle e tla tswelapele ho sebetsa ka botsitso mokgweng ona, ntle le haeba, ehlile, boemo bo fosahetseng bo sebediswa mabapi le yona.

Kahoo, re ka etsa qeto ea hore laebrari ea React.JS e ka boloka nako e ngata, ea etsa hore khoutu e be e tobileng haholoanyane, e hlophise tatellano ka tatellano e nepahetseng, ‘me e sebelise li-blocks tse kholo hape. Melemo ena e etsa hore ho khonehe ho fokotsa litšenyehelo tsa ts’ebetso ea ho theha li-interfaces tsa basebelisi, hammoho le ho potlakisa nako ea ts’ebetso ena. Ho ba le tsebo ea ho sebelisa puo ea lenaneo la JS le HTML, ho ithuta ho sebelisa sistimi ea JSX ho bonolo – matsatsi a seng makae feela ho e tseba hantle.

Hlokomela! Hoa utloahala ho sebelisa laebrari ha u sebetsa le merero e meholo, ha ho hlokahala ho ngola palo e kholo ea maqephe a matla. Sebaka sa khoebo se senyenyane ha se hloke mathata a joalo.

Etsa lithuto tsa mantlha tsa JS ho tloha A ho ea ho Z: https://youtu.be/GNrdg3PzpJQ

Ho tloaelana le ba qalang: likhopolo tsa motheo

Lefatše Lumela!

Ha u kena leqepheng la pele la laeborari, mosebelisi o tla bona sehlooho se amohelehang e le mohlala o monyane – “Hello world!”.

Metheo ea puo ea tsamaiso ea JSX

JSX ke puo ea lenaneo la sistimi, katoloso ea JavaScript e tsebahalang. E kenyelletsa motsoako oa lipuo tse peli – lenaneo la JA le puo e tloaelehileng ea HTML. Bahlahisi ba e sebelisa ho fetola mohopolo ho bonts’a React hantle hore na sebopeho sa mosebelisi se lokela ho shebahala joang. JSX e theha “likarolo” tsa laeborari.

JSX ke eng?

Laeborari ea React e latela mohopolo oa hore moelelo oa ho fana o amana ka kotloloho le mohopolo oa sebopeho sa mosebelisi: hore na liketsahalo li sebetsoa joang, hore na maemo a fetoha joang nakong e itseng, le hore na tlhahisoleseling e lokisetsoa joang ho hlahisoa. Laebrari ea JS e ka sebelisoa ntle le puo ea eona ea tsamaiso, empa palo e kholo ea bahlahisi ba e fumana e le ea bohlokoa ka lebaka la ho hlaka le ho hlaka ha eona ha e sebetsa le sebopeho sa mosebedisi se hlahisoang ke khoutu ea JavaScript. Ntle le moo, katoloso e nolofalletsa React ho hlahisa nako e sa sebetseng le tsebiso ea liphoso.

Sebopeho sa lipolelo ka puo ea tsamaiso

JSX e u lumella ho sebelisa mantsoe afe kapa afe a ngotsoeng hantle a JavaScript ka har’a li-curly braces ka ts’ebetso.
JSX e boetse ke polelo Hang ha khoutu ea mohloli e ngotsoe ka bytecoded, polelo efe kapa efe ea JSX e fetoha mohala o tloaelehileng oa JS o lebisitseng sehlopha sa JavaScript. Ho tsoa ho sena ho ka utloisisoa hore katoloso ea sistimi ea puo ea semmuso ea lenaneo e ka sebelisoa ka har’a if manual le bakeng sa linako.
JSX is Objects Lintho tse emeloang ke katoloso li bitsoa React elements. Ba hlakisa sephetho seo moqapi a batlang ho se bona ponts’o. Laeborari e lemoha lintho tsena ‘me e li sebelisa molemong oa ho hlahisa le ho boloka Mohlala oa Ntho ea Tokomane.

Tlhaloso e qaqileng

Lintlha ke litšiea tse ngata tse nyane tse etsang mananeo a React.
Lintlha ke setšoantšo seo moqapi a batlang ho se bona qetellong holim’a mochine. Ha ho bapisoa le likarolo tsa Document Object Model, likarolo tsa laebrari li bonolo ebile ha li nke lisebelisoa tse ngata. Lielemente ke likarolo tsa likarolo.

Likaroloana le Props

Likaroloana li etsa hore ho khonehe ho arola UI ka likarolo tse ikemetseng, tseo ho leng bonolo ho sebetsa ho tsona ka thoko. Li ka kopanngoa le ho sebelisoa ka makhetlo a mangata. Ka kakaretso, ts’ebetso ea likarolo e tšoana le ts’ebetso ea puo ea lenaneo la JavaScript ka boeona. Ba nka lintlha tse kentsoeng, tse bitsoang li-props, ebe ba khutlisa likarolo tsa React tse bonts’ang mofuta oa nts’etsopele oo mohlahisi a batlang ho o bona sehlahlobing.

Mefuta e sa tšoaneng ea likarolo: e sebetsang le ea sehlopha

Ho bonolo ho bua ka karolo ea laebrari joalo ka ts’ebetso.
Likarolo li ka emeloa ka sebopeho sa sehlopha sa ES6.

E thahasellisa! Laeborari ea React e hlalosa mefuta ena e ‘meli ea likarolo e tšoana.

lisebelisoa

Lisebelisoa ke lintho tse sa fetoheng tse baloang feela. Ka hona, karolo ha ea lokela ho ngola letho ho lisebelisoa tsa eona, ho sa tsotellehe hore na ke ea mofuta ofe.

Boemo le potoloho ea bophelo

Taba ea pele, a re boneng hore na re ka sebelisa naha joang hantle mosebetsing. Ho na le lintho tse tharo tsa bohlokoa tseo u lokelang ho li tseba ka boemo ba motsoako:

1. U se ke ua fetola boemo ka ho toba, sebelisa mokhoa oa setState. Hopola hore sebaka se le seng feela moo o ka fetolang mmuso ka kotloloho ke mohahi.
2. Lintlafatso tsa naha li kanna tsa se lumellane.
3. Phallo ea tlhahisoleseling e na le tataiso e le ‘ngoe. Kaho ea likarolo, ha ho le ea mong oa bona ea tsebang hore na mmuso o abetsoe karolo e ‘ngoe. Ha ho na taba hore na sena kapa karolo eo e ikemetseng ea ts’ebetso e thehiloe joang – ho sebelisoa sesebelisoa sa ts’ebetso kapa sa lihlopha. Sena se bitsoa “downstream” data flow. Boemo bo lula bo hlalosoa bakeng sa karolo e itseng, ‘me mekhatlo ea meralo ea naha ena e ka ama likarolo tse “tlase” ka tatellano ea maemo.

Ka tloaelo, naha e bitsoa “lehae”, “ka hare”, kapa e patiloeng. E bonahala feela ho karolo e sebetsang ka boeona ebile e sa bonahale likarolong tse ling tsa React. Mananeong a laeborari, hore na ntho e ikemetseng e sebetsang e filoe boemo bo itseng kapa che, ke nts’etsopele ea ka hare ea karolo ena, e ka fetohang ha nako e ntse e ea. Hape hoa thahasellisa hore mosebetsing o ka kopanya likarolo tse nang le ntle le naha.

Tlhahlobo ea ketsahalo

Mokhoa oa ho arola liketsahalo ho likarolo tsa React o tšoana le ho sebetsana le liketsahalo ho likarolo tsa mohlala oa ntho ea litokomane. Leha ho le joalo, ho na le likarolo tse ‘maloa tse li khethollang ho tse ling:

1. Liketsahalo laebraring ea JavaScript li reheletsoe ka mokhoa o fapaneng le o tloaelehileng.
2. A sebelisa Puo e Atolositsoeng ea Lenaneo, mohlahlami o fetisa subroutine joalo ka mohlokomeli oa liketsahalo ho fapana le khoele.

Ho fana ka maemo ka maemo

Laeborari ea JavaScript e etsa hore ho khonehe ho arola mohopolo oa ho nts’etsapele likarolo hore e be likarolo tse ikemetseng. Li ka bonts’oa bakeng sa pontšo e akaretsang kapa tse patiloeng, ho latela hore na ba filoe boemo bofe ka nako eo. Phetolelo e nang le maemo a itseng e sebetsa ka mokhoa o ts’oanang le mantsoe a nang le maemo a thehiloeng ho puo ea lenaneo la JavaScript. Ka linako tse ling hoa etsahala hore laeborari e hloke tlhaloso ea hore na mmuso o ama joang ho pata kapa ho fana ka likarolo tse ling. Mona ke ntho e utloahalang ho sebelisa mothusi oa JS kapa lipolelo tse tšoanang le haeba.

Ho Fetola Likarolo

Lintlha tsa laebrari tsa React li ka eketsoa ho mefuta e fapaneng. Ena ke tharollo e sebetsang ha boemo bo bong bo bontša hore na karolo e itseng ea karolo e lokela ho huloa, kapa ha e utloahale, ha karolo e ‘ngoe e ntse e sa fetohe.

Manane le Linotlolo

Karolo ena e na le likarolo tse ‘maloa:

1. Ho taka likarolo tse ngata . Mosebelisi a ka theha sete ea likarolo mme a e kenya ka har’a puo ea lenaneo la sistimi a sebelisa li-curly braces.
2. Lethathamo la motheo la lintlha . Hangata, basebelisi le bahlahisi ba fetola manane ka kotloloho ka har’a karolo ea karolo.

Linotlolo

Senotlolo laebraring ea React JavaScript e bolela sesebelisoa se ikhethileng se lokelang ho kenngoa ha ho etsoa lethathamo la likarolo. Linotlolo li thusa laebrari ea JavaScript ho tseba hore na ke lintho life tse lokisitsoeng, tse kentsoeng, kapa tse tlositsoeng. Ho bohlokoa ho li tšoaea e le hore React e ka hokahanya likarolo tsa data ea meralo ka mor’a hore nako e itseng e fete.

Mefuta

Laebraring ea JS, likarolo tse tloaelehileng tsa puo ea markup li sebetsa ka tsela e fapaneng hanyane ho feta likarolo tsa mohlala oa ntho ea tokomane, hobane likarolo tsa sebopeho qalong li na le boemo bo patehileng.

Lintho tse Laoloang

Ka puo e tloaelehileng ea li-markup, liforomo tse kang input , select , textarea li na le ho boloka boemo ba tsona le ho li ntlafatsa ha moqapi a kenya boitsebiso bo bocha. React.js state e lula e hlalosa boleng ba likarolo tsa ho kenya nthong e hlophisitsoeng e hlophisitsoeng. Leha sena se bontša hore mosebelisi o tlameha ho ngola hanyane ho feta khoutu e fanoeng ea mantlha, joale hoa khoneha ho fetisetsa boleng bona likarolong tse ling tsa sebopeho sa mosebelisi.

Ho phahama ha mmuso

Ho phahamisa boemo ke template e tloaelehileng eo moqapi e mong le e mong a lokelang ho e tseba le ho khona ho e sebelisa ha a ntse a sebetsa. Ho e sebelisa ho tla felisa mekhoa ea tsamaiso ea mmuso e rarahaneng le hangata e se nang thuso.

Ke hobane’ng ha ho hlokahala ho laola ho phahama ha ‘muso?

Ho phahamisa mmuso boemong ba likarolo tse fetileng bakeng sa likarolo tse hlokang ho hlokahala e le hore likarolo tsohle li ka kenya letsoho pusong. Boemo bo tsitsitseng ba mmuso bo tla etsa hore ho be bonolo ho e aba har’a likarolo tsohle tse itšetlehileng ka eona.

Sebopeho vs Lefa

React.js e kenyelletsa mofuta o matla oa sebopeho, kahoo ho khothaletsoa ho sebelisa mokhoa oa ho aha likarolo tsohle ho fapana le lefa ho sebelisa khoutu e ngotsoeng pejana lipakeng tsa likarolo. Ka hona, li-props le bokhoni ba ho theha sebopeho se le seng ho tloha likarolong tsa likarolo, li fa moqapi ka mokhoa o hlokahalang oa ho theha khetla le boitšoaro ba ntho ka tsela e itseng le e sireletsehileng.

Khopotso! Likarolo tsa likarolo li ka nka lisebelisoa tse sa amaneng, ho kenyelletsa le likarolo tsa mantlha tse etsang lilaeborari kapa mesebetsi.

Haeba u hloka ho sebelisa ts’ebetso e sa shebahaleng bakeng sa ho sebetsa le likarolo lekhetlo la bobeli kapa la boraro, e hule ho mojule oa JS o arohaneng. E tsamaise ka har’a karolo ‘me u sebelise tšebetso e hlahisitsoeng ntle le katoloso e ngoe. React kapa Vue kapa Angular, seo u ka se khethang: https://youtu.be/Nm8GpLCAgwk

React.js Melao-motheo

Filosofi eohle ea laeborari ea JavaScript e patiloe ho React Guide. Ho bonahala eka sena se selelele mme ha se sa bohlokoa haholo, leha ho le joalo, basebelisi ba bangata ba bolela hore ka mor’a ho bala ntho e ‘ngoe le e’ ngoe e ile ea oela. Litokomane ke tsa khale haholo, empa li ntse li le tsa bohlokoa bo boholo le bohlokoa – https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Ts’ebetso ea laebrari ea React.js

U sebelisa laebrari ea JavaScript, mosebelisi o fumana monyetla oa ho ela hloko ka ho toba ts’ebetsong ea nts’etsopele ea UI le likarolo tsa kopo, bonyane ho tsohle ho sitisoa ke sebopeho le mefokolo e ka bang teng ea khoutu e ngotsoeng. Laebrari e u lumella ho hlahisa mananeo ka potlako, ho etsa hore ho be bonolo ho hlophisa le ho hlophisa likarolo le ts’ebetso ea morero oohle ka kakaretso. Kahoo, React.js e na le likarolo tse ikarabellang bakeng sa puisano marang-rang a lefats’e, UI, taolo ea boemo ba lenaneo le bokhoni ba ho rarolla mathata a mang a rarahaneng. Laeborari e boetse e na le likarolo tse latelang tsa ts’ebetso:

1. Ho sebetsa . React.js e fumaneha ka sebopeho sa minified. Sephutheloana sena sa komporo ha se hloke ho hlophisoa ka mokhoa o hlakileng. E se e ntse e kenyelletsa karolo ea ho arola khoutu e fokotsang nako ea ho bula phetolelo ea sebatli sa sebaka, kaha khetho ena e thibela likarolo ho fana ka nako e le ‘ngoe.
2. Ecosystem e pompetsoeng le ho lumellana . Ho na le lisebelisoa tse ngata tse fumanehang laebraring, tse tšehetsoeng ke libaka tse ling, tse lumellang mosebedisi ho hlahisa mananeo a macha a rarahaneng bakeng sa morero ofe kapa ofe.
3. Tshebetso e feletseng . Molemo o ka sehloohong oa laebrari ea JavaScript ke hore liphetolelo tsohle tse ncha tsa sethaleng li finyella litlhoko tsa khale, kahoo u ka sebelisa phetolelo ea khale le e nchafalitsoeng, kaofela ha tsona li tšehetsoa ebile li bohlokoa ho fihlela kajeno. Liphetolelo tse neng li lokolotsoe nakong e fetileng ha li felloe ke nako ka mor’a lintlafatso tsa morao-rao.

Tšebeliso e sebetsang

Leqepheng le ka sehloohong la laeborari, litaelong tsa basebelisi, ho na le mehlala e mengata ea litšoantšo ea ho sebelisa React in practice. U ka li lokisa ka letsoho ‘me u leke ho li tsamaisa. Leha o le mosebelisi e mocha mme o sa utloisise moelelo le mabaka a laeborari, lokisa khoutu ho ea kamoo u ratang ‘me u bone sephetho.

Ts’ebeliso e sebetsang ea React ha u ngola liroboto tsa khoebo ho JavaScript

Ho bohlokoa ho hlokomela hore moqapi ha a na lenaneo la JS, empa o ngola mangolo (lingoloa). ka hona, ka ho sebelisa laebrari, moqapi a ka ngola khoutu bakeng sa roboto e latelang ea khoebo e sebelisetsoang merero ea khoebo, hape a tsoela pele ho theha ponahalo ea eona e thehiloeng sethaleng sena. Ha e le hantle, roboto ea khoebo bakeng sa khoebo e boetse ke kopo, eo palo e kholo ea eona e ntseng e ntlafatsoa ho sebelisa React.js. Leha ho le joalo, mesebetsi e meng le karolo e ka hare ea bot e ntse e tla tlameha ho etsoa libakeng tse ling tse fanang ka lisebelisoa tse loketseng sena.

GitHub le React.js

GitHub ke sethala se tsamaisang mefuta eohle ea merero. Mosebelisi o hokahanya moamoheli, o feta ka mokhoa oa ho ingolisa webosaeteng ea semmuso ea GitHub, ebe o theha polokelo ea marang-rang moo a fetisetsang lifaele tsohle ho tsoa ho Git. Git ke ts’ebeletso ea taolo ea mofuta oa projeke e tsebahalang haholo kajeno, ‘me GitHub ke polokelo ea khoutu e hole.

Referense! Ke basebelisi feela ba amohetseng sehokelo se nepahetseng ka tumello ba nang le phihlello ea ho hlophisa le ho jarolla lifaele.

Litokomane

Lithuto tsohle le lisebelisoa tsa morao-rao tse mabapi le laeborari ea JavaScript li nchafalitsoe ka ntlafatso ea morao-rao. Bahlahisi ba boetse ba bokella le ho beha bakeng sa ho bala ka kakaretso liphetolelo tsa khale tsa litokomane, tse behiloeng leqepheng le arohaneng la laeborari. Ka hona, ho tla ba bonolo ho ba qalang ho tseba bokhoni ba tsamaiso ea sebaka sa marang-rang: lisebelisoa tsa khale le tse ncha – ntho e ‘ngoe le e’ ngoe e teng, ho fihlella ho lokolohile ho bohle.

Hlokomela! U se ke ua lebala ho bala libuka. Bonyane sheba – boholo ba se neng se bonahala se sa utloisisehe se tla oela sebakeng.

Laeborari ea React ke sethala se tsebahalang ebile se bohlokoa kajeno. Ho feto-fetoha ha eona ho lumella baetsi ho etsa merero ea boleng bo holimo le ka nako e nyane. Ntle le moo, ho tseba sethala le ho ba le boiphihlelo ba ho se sebelisa ho etsa hore setsebi se hlokehe haholoanyane ‘marakeng oa basebetsi.