React pamācības latviešu valodā

DG WEB FACTORY » Pamācības » React pamācības latviešu valodā

React ir atvērtā koda, uz komponentēm balstīta, front-end  JavaScript bibliotēka lietotāja saskarņu veidošanai. React izveidoja bijušais Facebook programmatūras inženieris Džordans Volks.  React mūsdienās ir ļoti populāra Javascript bibliotēka, ko izmanto uzņēmumi visā pasaulē, tas izmantots arī Facebook, Instagram un WhatsApp izveidē. React izmanto,  ātrdarbīgu aplikāciju (mobilās aplikācijas, vienas lapas web aplikācijas (SPA)) izveidē.

React ir ļoti plaša kopiena, pieejami daudz plugini un tā ir diezgan viegli apgūstama. React ir daudz paplašinājumu, kas piedāvā pilnvērtīgu aplikāciju arhitektūras atbalstu. Tas nodrošina servera puses renderēšanu, kas nozīmē, ka serverī tiek renderēta tikai klienta pusē pieejama web aplikācija, un pēc tam klientam tiek nosūtīta pilnībā renderēta lapa.

React sadala  lietotāja saskarni (UI) komponentēs, kas padara ērtu atkļūdošanu (debug) un ļauj vairākiem lietotājiem vienlaikus strādāt ar katru komponenti, tādējādi paātrinot izstrādes laiku. Katrai komponentei ir savas īpašības un funkcija.

Nepieciešamās priekšzināšanas:

• JavaScript
• HTML
• CSS
• Izpratne par objektiem, masīviem, funkcijām, mainīgajiem programmēšanā

JSX – JavaScript sintakses paplašinājums

JSX React-ā izmanto, lai aprakstītu to, kā izskatīsies lietotāja interfeiss.  JSX, failā iespējams rakstīt gan HTML, gan JavaScript kodu, un tas, savukārt, atļauj neizmantot sarežģītas JavaScript DOM struktūras. Tas ļauj iegult (embed) HTML JavaScript kodā. Turklāt React DOM pēc noklusējuma izlaiž jebkuras vērtības, kas iegultas JSX pirms to renderēšanas. Tādējādi nodrošinot to, ka jūs nekad nevarat ievadīt neko tādu, kas nav rakstīts jūsu aplikācijā. Pirms renderēšanas viss tiek pārveidots par virkni. Tas palīdz novērst XSS (cross-site-scripting) uzbrukumus. React tiek veidoti objekti, kas saukti tiek dēvēti React elementiem. React elementi apraksta to, ko vēlaties redzēt ekrānā. React nolasa šos objektus un izmanto tos, lai izveidotu DOM un atjauninātu to.

Virtuālais DOM

Reālais DOM (Dokumenta objektu modelis) apstrādā XML vai HTML dokumentu kā koka struktūru, kurā katrs mezgls ir objekts, kas pārstāv dokumenta daļu.

Virtuālais DOM, kas ir React-ā, saglabā reālā DOM attēlojumu atmiņā. Manipulēt ar reālo DOM ir daudz lēnāk nekā manipulēt ar Virtuālo DOM, jo ekrānā nekas netiek uzzīmēts. Reālais DOM (Document Object Model), kad objekta stāvoklis (state) mainās, tiek atjaunināti visi objekti. Savukārt virtuālais DOM atškirībā no reālā DOM, maina tikai to objektu reālajā DOM, ar kuru tiek veiktas manipulācijas React aplikācijā, nevis visus objektus. Tas padara aplikācijas darbību ātru. Kad kāda objekta stāvoklis tiek izmainīts React aplikācijā, virtuālis DOM tiek atjaunināts un tas salīdzina ar ierpiekšējo stāvokli un atjaunina tikai tos objektus reālajā DOM, kuriem veiktas izmaiņas.