Այսօր ես նկարագրում եմ React JS-ի որոշ հիմնարար հասկացություններ:

Սկսենք !!!

Ի՞նչ է React JS.

React-ը JavaScript-ի փոքրիկ գրադարան է: Շատ դեպքերում, այն օգտագործվում է ճակատային զարգացման համար: React-ը ստեղծվել է Facebook-ի ծրագրային ապահովման ինժեներ Ջորդան Ուոքի կողմից: Այն լայնորեն օգտագործվում է ինտերակտիվ և դինամիկ վեբ հավելվածներ ստեղծելու համար։ MVC (Model View Controller) օրինակում react-ն աշխատում է միայն հավելվածների դիտման շերտի վրա: Դիտման շերտը պատասխանատու է հավելվածի տեսքի համար: React-ը բաց կոդով, բաղադրիչի վրա հիմնված, ճակատային գրադարան է: React-ը ծրագրավորողներին թույլ է տալիս ստեղծել բազմակի օգտագործման UI բաղադրիչներ և արդյունավետ կառավարել իրենց հավելվածների վիճակը:

Մի քանի հիմնական հասկացություններ React.js.

Վիրտուալ DOM. React-ն օգտագործում է վիրտուալ DOM՝ արդյունավետությունը բարելավելու համար: Դա իրական DOM-ի թեթև ներկայացումն է, և երբ վիճակի փոփոխություններ են տեղի ունենում, React-ը հաշվարկում է վիրտուալ DOM-ի և իրական DOM-ի տարբերությունը և թարմացնում է միայն DOM-ի անհրաժեշտ մասերը՝ նվազեցնելով DOM-ի թանկարժեք մանիպուլյացիաները:

Բաղադրիչներ. React-ում հավելվածները կառուցվում են բաղադրիչների միջոցով: Բաղադրիչը UI-ի բազմակի օգտագործման կտոր է, որը կարող է կազմվել միասին՝ օգտատիրոջ բարդ միջերեսներ ստեղծելու համար: Բաղադրիչները կարող են լինել և՛ ֆունկցիոնալ (առանց քաղաքացիություն), և՛ դասակարգային (պետական):

JSX. JSX-ը նշանակում է JavaScript XML, և այն JavaScript-ի շարահյուսական ընդլայնում է: Այն թույլ է տալիս գրել HTML-անման կոդ ձեր JavaScript կոդի մեջ՝ հեշտացնելով ձեր բաղադրիչների կառուցվածքը սահմանելը:

Առաջադրումներ. Հենակետերը (հատկությունների հապավումը) միջոց է տվյալներ փոխանցելու մայր բաղադրիչից երեխայի բաղադրիչին: Հենակետերը միայն կարդալու են և օգնում են ձեզ հասնել բաղադրիչի կրկնակի օգտագործման:

Վիճակ. Պետությունը օգտագործվում է բաղադրիչի ներսում դինամիկ տվյալները կառավարելու համար: Դասի բաղադրիչներն ունեն իրենց վիճակը, մինչդեռ ֆունկցիոնալ բաղադրիչները կարող են օգտագործել useState կեռը՝ վիճակը կառավարելու համար:

Կեռիկներ. Կեռիկներն այն գործառույթներն են, որոնք թույլ են տալիս «կապել» React վիճակի և կյանքի ցիկլի առանձնահատկություններին ֆունկցիոնալ բաղադրիչներից: Որոշ սովորաբար օգտագործվող կեռիկներ ներառում են useState, useEffect, useContext և այլն:

Կյանքի ցիկլի մեթոդներ. Դասի բաղադրիչներում կան կյանքի ցիկլի մեթոդներ, ինչպիսիք են componentDidMount, componentDidUpdate և componentWillUnmount, որոնք թույլ են տալիս վերահսկել բաղադրիչի վարքը նրա կյանքի ցիկլի տարբեր փուլերում:

Բաղադրիչի կյանքի ցիկլի ընդդեմ կեռիկների․ Կեռիկներն ապահովում են կողմնակի ազդեցությունների և բաղադրիչի վարքագիծը կառավարելու ավելի պարզ եղանակ:

Երթուղիավորում. Թեև React-ն ինքնին չի ապահովում ներկառուցված երթուղում, հանրաճանաչ գրադարանները, ինչպիսիք են react-router-ը, կարող են օգտագործվել React հավելվածներում երթուղիները կարգավորելու համար:

Պետության կառավարում. Բարդ հավելվածների վիճակները կառավարելու համար, որոնք պետք է համօգտագործվեն մի քանի բաղադրիչների միջև, կարող եք հաշվի առնել գրադարանների օգտագործումը, ինչպիսիք են Redux-ը կամ Context API-ն՝ կեռիկների հետ համատեղ:

Ոճավորում. React հավելվածները կարող են ոճավորվել CSS-ի, CSS-in-JS գրադարանների միջոցով, ինչպիսիք են Styled Components-ը կամ CSS-ի նախնական պրոցեսորները, ինչպիսիք են Sass-ը:

Թեստավորում. React հավելվածները կարող են փորձարկվել տարբեր փորձարկման գրադարանների միջոցով, ինչպիսիք են Jest և React Testing Library:

React-ով սկսելու համար դուք պետք է ստեղծեք զարգացման միջավայր, ներառյալ Node.js-ը և փաթեթների կառավարիչը, ինչպիսիք են npm կամ Yarn: Այնուհետև կարող եք ստեղծել նոր React հավելված՝ օգտագործելով Vite գործիքները: Այնտեղից դուք կարող եք աստիճանաբար սովորել և փորձարկել վերը նշված հասկացությունները՝ ձեր հավելվածները կառուցելիս: