Ի՞ՆՉ Է ԱՐՁԱԳԱՆՔԸ:

React-ը Front-end JavaScript գրադարան է, սակայն հարգանք է ձեռք բերել որպես շրջանակ: Այն մշակվել է Facebook-ի կողմից, որն այժմ հայտնի է որպես Meta, բայց բաց կոդով է և ունի բազմաթիվ ներդրողներ: Այս շրջանակն օգտագործվում է բարձր արձագանքող և լայնածավալ UI ինտերֆեյսներ ստեղծելու համար:

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

Երբ տվյալների մեջ փոփոխություն լինի, react-ն ավտոմատ կարձագանքի այս փոփոխությանը և արդյունավետ կերպով կթարմացնի այն, ինչ ցուցադրվում է էկրանին:

React-ն օգտագործում է JSX կոչվող շարահյուսություն (JavaScript և XML); այն հիմնականում HTML է JavaScript-ում: Հետագա բաժիններում մենք կուսումնասիրենք, թե ինչպես է JavaScript-ն օգտագործվում React-ում և ինչպես է օգտագործվում HTML-ը և, վերջապես, ինչպես են դրանք օգտագործվում JSX-ը կազմելու համար:

ԻՆՉՈՒ ՊԵՏՔ Է ՕԳՏԱԳՈՐԾԵԼ REACT:

Պատճառները շատ են, բայց թույլ տվեք նշել մի քանիսը:

Կոդի կրկնակի օգտագործման հնարավորություն

React-ն այս հայեցակարգը տեղափոխում է մեկ այլ մակարդակ: Շրջանակը կառուցված է այս գաղափարի շուրջ՝ թույլ տալով, որ ձեր գրած կոդերի գրեթե յուրաքանչյուր կտոր նորից օգտագործվի՝ օգտագործելով հղումը: Այս մասին ավելի շատ բաղադրիչներ բաժնում:

Համայնքի աջակցություն

Իր ժողովրդականության պատճառով react-ը շատ օգտատերեր ունի: Եթե ​​նոր եք սովորում, ուրեմն ճիշտ ժամանակին եք, քանի որ ձեր նախորդներից շատերը դարձել են React գուրուներ և ավելի քան պատրաստ են օգնել ձեզ: Չե՞ք հավատում ինձ Պարզապես google-ում որոշ ձեռնարկներ և հաշվեք, թե քանիսն են ձեզ սովորեցնում ստեղծել «Անելիքների ցուցակ» դեմո հավելվածներ:

Զարգացման աջակցություն

Իր բաց կոդով բնույթի պատճառով react-ը մշտապես թարմացվում է նոր հնարավորություններով և գրադարաններով՝ զարգացումն էլ ավելի դյուրին դարձնելու համար: Գուրու դառնալուց հետո կարող եք նաև ձեր ներդրումը կատարել:

Ուսուցման կոր

Ենթադրելով, որ դուք 4-րդ կիսամյակի ծրագրային ապահովման մշակման SAIT ուսանող եք, դուք արդեն լավ արձագանքելու ձեր ճանապարհին եք:

Դուք արդեն սովորել եք ծրագրավորման բազմաթիվ լեզուներ, ինչպիսիք են Java-ը կամ նույնիսկ python-ը; Դուք նաև սովորել եք վեբ հավելվածների մշակման հիմունքները և օգտագործել այնպիսի լեզուներ, ինչպիսիք են HTML, CSS և JavaScript:

Նշված հիմունքները ռեակտիվ սովորելու նախադրյալներն են, և քանի որ դուք արդեն գիտեք ծրագրավորման առնվազն մեկ լեզու, ձեզ հարկավոր է սովորել միայն մի քանի լրացուցիչ հասկացություններ և շարահյուսություն:

JAVASCRIPT-ը REACT-ում

ECMAScript

React-ն օգտագործում է ECMAScript6 (ES6); ES6-ը այն ստանդարտն է, որն օգտագործում է JavaScript-ը՝ իմանալու, թե ինչպես վարվել, ինչը լրացուցիչ ֆունկցիոնալություն է հաղորդում JavaScript-ին: Ըստ էության, դա JavaScript-ի տարբերակ է:

JavaScript-ի շարահյուսությանը և հասկացություններին ծանոթ լինելը կարևոր է react-ը հասկանալու և օգտագործելու համար, քանի որ react-ը լեզու չէ. Այն պարզապես մեծացնում է արդեն գոյություն ունեցող լեզուների ֆունկցիոնալությունը:

HTML-ը REACT-ում

Ըստ էության, այն, ինչ անում է React-ը, HTML-ի ցուցադրումն է վեբ էջում:

<!--index.html--!>
  <body>
    <!-- react content will be rendered into this div -->
    <div id="root"></div>
  </body>

//index.js
  //root is the id of an html tag in the index.html page
  
  const domElement = document.getElementById("root");
  /* create a root react element which accepts
  a dom element that the content will be rendered into */
  const root = createRoot(domElement);
  /*call the render method of root which
  accepts the content to render */
  root.render(<h1>Hello World</h1>);

Ինչ է տեղի ունենում, մենք ստեղծում ենք react արմատ՝ անցնելով html տարր, որի մեջ կարտացոլվի կոդը, այնուհետև մենք կանչում ենք render մեթոդը այդ արմատի վրա; render մեթոդը ընդունում է react տարրը, որպեսզի այն վերածվի dom:

HTML տարրը, որին տրամադրվում է կոդը, պայմանականորեն div է index.html էջի ներսում: Այս էջը գտնվում է react հավելվածի ծառի հանրային թղթապանակում:

Նշում. տարրի id-ը պարտադիր չէ, որ լինի արմատ, և պարտադիր չէ, որ տարրը լինի div:

JSX

Ի՞նչ է դա։

Ինչպես նախկինում նշվեց, JSX-ը React-ում օգտագործվող JavaScript-ի շարահյուսական ընդլայնում է: Այն ավելի արդյունավետ է դարձնում կոդավորումը և ավելացնում լրացուցիչ ֆունկցիոնալություն: React-ում JSX-ի օգտագործումը պարտադիր չէ, սակայն խորհուրդ է տրվում:

//using jsx
  const title = <header>This is a react demo</header>;
  const root = createRoot(document.getElementById("root"));
  
  root.render(title);

//using React syntax
  //the first argument is where the element tag is defined
  /*inside the curly braces is where the props(properties)
  of the h1 tag can be defined; to define no properties,
  we can just leave the braces empty or type null*/
  //the third argument is where the children of the element is
  defined
  const title2 = React.createElement("h1", {}, "Hello World");
  const root = createRoot(document.getElementById("root"));
  root.render(title);

Շարահյուսություն

Դուք կարող եք չակերտներ օգտագործել լարային բառացիների համար, իսկ գանգուր փակագծեր՝ JavaScript արտահայտությունների համար; սակայն, դրանք չպետք է օգտագործվեն միասին:

JSX-ը նաև օգտագործում է camelCase անվանման նույն կոնվենցիան, ինչ JavaScript-ը:

Կափարիչի տակ

Երբ JSX-ը կազմվում է, այն դառնում է JavaScript օբյեկտ:

Կուլիսների հետևում JSX կոդը փոխակերպվում է React.createElement() զանգերի՝ օգտագործելով Babel կոչվող տրանսպիլյատորը; արդյունքները React տարրեր են:

Babel-ը փոխակերպում է JavaScript-ի ընթացիկ տարբերակը մի տարբերակի, որը զննարկիչը կարող է մեկնաբանել. սա թույլ է տալիս մեր գրած ծրագրերին աշխատել բազմաթիվ բրաուզերներում:

ԲԱՂԱԴՐԵՐ

Ինչ են նրանք?

Բաղադրիչները օգտագործվում են միջերեսը տարբեր բաժինների բաժանելու համար. Սա այն վայրն է, որտեղ React-ի վերօգտագործելիությունը իսկապես հայտնվում է խաղի մեջ:

Բաղադրիչները կարող են դիտվել որպես գործառույթներ Java-ում: Յուրաքանչյուր բաղադրիչ սովորաբար ունի իր էջը: Այն ներառում է այն բովանդակությունը, որը դուք ցանկանում եք ներկայացնել ցանկացած անհրաժեշտ տրամաբանության հետ մեկտեղ: Ստացված արդյունքը դառնում է ռեակտիվ տարր:

export default function () {
  return(
    //jsx code to render
  );
}

Բաղադրիչները կարող են սահմանվել նաև երկու եղանակով՝ որպես JavaScript ֆունկցիաներ կամ ES6 դասեր; նրանք կատարում են նույն գործողությունը, բայց տարբերվում են այն մանրամասներով, թե ինչպես է դա արվում:

//function component
export default function MyComponent() {
  return(
    //jsx code to render
  );
}
//class component
class MyComponent extends Component {
  render(){
    return(
      //jsx code to render
    );
  }
}

Բաղադրիչները կարող են լինել բույն

Երբ դուք տարբեր բաղադրիչներ եք պատրաստում, դուք կարող եք յուրաքանչյուր բաղադրիչ վերածել ավելի մեծ կոնտեյների բաղադրիչների: Կարող են լինել բազմաթիվ ներդիր բաղադրիչներ, և ծառի հենց վերևում բաղադրիչը React DOM-ի կողմից կվերածվի բրաուզերի հանգույցի:

export default function Child3(){
  return(
    <div>
      <p>Hello World</p>
    </div>
  );
}

export default function Child2(){
  return(
    <div>
      <Child3/>
    </div>
  );
}
export default function Child1(){
  return(
    <div>
      <Child2/>
    </div>
  );
}

export default function ParentComponent(){
  return(
    <div>
      <Child1/>
    </div>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<ParentComponent/>);

Ե՞րբ օգտագործել բաղադրիչները:

UI-ը բաղադրիչների բաժանելիս, ընդհանուր առմամբ, ցանկանում եք, որ ձեր հավելվածում մի քանի անգամ օգտագործվող կտորները լինեն դրա սեփական բաղադրիչը. ցանկացած մաս, որը բարդ է, կարող է նաև ինքնին բաղադրիչ լինել: Սա հեշտացնում է հավելվածի պահպանումը:

Բաղադրիչների անունները պետք է սկսվեն մեծատառով: Եթե ​​անունը սկսվում է փոքրատառով, react-ը այն կվերաբերվի որպես DOM պիտակ:

ՄԱՏՈՒՑՈՒՄ

React-ը ստեղծում է բրաուզերի DOM-ի պատճենը և պահում այն ​​հիշողության մեջ: Այն կոչվում է վիրտուալ DOM: Բրաուզերի DOM-ն ուղղակիորեն թարմացնելու փոխարեն, այն փոփոխություններ է կատարում իր վիրտուալ DOM-ում:

Այնուհետև վիրտուալ DOM-ը համեմատվում է բրաուզերի DOM-ի հետ և փոփոխությունը կատարվում է տարբերության հիման վրա. React-ը չի թարմացնի ամբողջ էջը, այլ միայն այն, ինչ փոխվել է:

Սա էկրանին ցուցադրվողի թարմացման արդյունավետությունն է, ինչպես նշված է ավելի վաղ

ՊՐՈՊՍ

Հենակետերը, որոնք կարճ են հատկությունների համար, արժեքներ են, որոնք կարող են փոխանցվել բաղադրիչների: Դրանք նման են JavaScript ֆունկցիայի պարամետրերին. դրանք թույլ են տալիս բաղադրիչներին դինամիկ բովանդակություն հաղորդել:

export default function ParentComponent() {
  return (
    <div>
      <ChildComponent name="Blake" />
    </div>
  );
}
export default function ChildComponent(props){
  return(
    <div>
      <h4>
        Thank you for shopping {props.name}, please come again. 
      </h4>
    </div>
  )
}

Երբ հենակետը փոխանցվում է փոփոխականին, դրա արժեքը չի փոխվում, ի տարբերություն այն վիճակների, որոնք շուտով կքննարկվեն. արժեքը, որը փոխանցվում է, այն արժեքն է, որն օգտագործվում է բաղադրիչի ներսում:

Բաղադրիչը կարող է ընդունել միայն մեկ հենարան, բայց հենարանը կարող է լինել ցանկացած JSX հատկանիշ կամ բաղադրիչի զավակ, որը փոխանցում է հենարանը՝ օբյեկտներից, զանգվածներ կամ նույնիսկ ֆունկցիաներ:

ՊԵՏՈՒԹՅՈՒՆՆԵՐ

Պետությունները նման են հենարանների, բայց դրանք սահմանում են բաղադրիչի ատրիբուտները: Պետությունները կառավարվում են բաղադրիչի ներսում, մինչդեռ հենակետերը կառավարվում են բաղադրիչից դուրս:

Երբ ֆունկցիան դուրս է գալիս, փոփոխականները անհետանում են, բայց վիճակի արժեքը պահպանվում է:

Այս օրինակը ցույց կտա, թե ինչպես են վիճակները օգտագործվում դասերում: Գործառույթների մեջ գտնվող պետությունները կցուցադրվեն հաջորդ բաժնում:

class MyClassComponent extends Component {
  //step 1
  constructor(props) {
    super(props);
    this.state = {
    number: 1,
    };
  }
  //step 2
  updateNumber() {
    this.setState({
    number: 2,
    });
  }
  render() {
    return (
      <div>
        {/* step 3 */}
        <ExampleComponent numberOfEggs={this.state.number} />
        <button onClick={updateNumber}>update</button>
      </div>
    );
  }
}

Առաջին քայլը դասի կոնստրուկտորի ներսում պետական ​​փոփոխականի հայտարարումն է, երկրորդ քայլը գործառույթը թարմացնելու վիճակի կարգավորումն է, իսկ երրորդ քայլը՝ վիճակի օգտագործումը render մեթոդում։

Պետությունները նույնպես նման են java-ի դասի ատրիբուտներին, և ի տարբերություն ռեկորդների, դրանք կարող են փոխվել. սակայն, դրանք երբեք չպետք է ուղղակիորեն փոխվեն: Դուք միշտ պետք է պատճենեք գոյություն ունեցող վիճակին, թարմացնեք պատճենը, ապա դրեք այդ թարմացված պատճենին: Բացի այդ, երբ դասում վիճակի նոր արժեք է սահմանվում, այն պետք է փոխվի միայն setState() մեթոդի միջոցով:

// Wrong
this.state.name = "Blake";
// Correct
this.setState({ name: "Blake" });

Պետությունները կարող են ուղղակիորեն վերագրվել միայն սկզբնական արժեքին:

//declaring states
constructor(props) {
  super(props);
  this.state = {
  number: 1,
  };
}

Դասի վիճակները օբյեկտներ են, մինչդեռ ֆունկցիաներում դրանք կարող են լինել տողեր կամ այլ թվային արժեքներ: Քանի որ օբյեկտները կարող են ունենալ մի քանի ատրիբուտներ, դուք կարող եք օգտագործել այն մի քանի վիճակներ պահելու համար:

constructor(props) {
  super(props);
  this.state = {
  number: 1,
  name: 'Blake',
  };
}

Դասերի և ֆունկցիաների վիճակի փոփոխականների թարմացման տրամաբանությունը նույնպես տարբերվում է: Դասում վիճակներ օգտագործելիս, setState-ով վիճակի թարմացումը կմիավորի նոր արժեքի մեջ կատարված փոփոխությունները արդեն գոյություն ունեցող արժեքների հետ:

Կեռիկներ

Կեռիկները կոդերի փաթեթներ են, որոնք թույլ են տալիս առանց դասի օգտագործել վիճակը և այլ հնարավորություններ: Դրանք ներմուծվում են բաղադրիչի մեջ և օգտագործվում են ֆունկցիայի նման: Կան նախապես սահմանված կեռիկներ և հատուկ կեռիկներ, որոնք ծրագրավորողը կարող է պատրաստել:

Պարզության համար մենք կքննարկենք միայն useState կեռիկը: Այն թույլ է տալիս մեզ օգտագործել վիճակները ֆունկցիաներում:

import { useState } from "react";

export default function MyComponent() {
  const [clientName, setClientName] = useState("John");
  function changeName() {
    setClientName("Blake");
  }
  return (
    <div>
      <p>hello {clientName}</p>
      <input type="text" />
      <button onClick={changeName}>Click</button>
   </div>
  );
}

Առաջին քայլը ներմուծումն է, այնուհետև մենք հայտարարում ենք պետական ​​փոփոխական, որից հետո սահմանում ենք վիճակը թարմացնելու գործառույթը։ Փոփոխականն այժմ պատրաստ է օգտագործման համար:

Կոդի այս տողի առաջին մասը ոչնչացնում է useState կեռիկի վերադարձի արժեքները: Այն վերադարձնում է վիճակի սկզբնական արժեքը, որը որոշվում է արգումենտով, որը փոխանցվում է useState կեռիկին, և երկրորդ արժեքը, որը վերադարձնում է, այն ֆունկցիան է, որն օգտագործվում է վիճակի արժեքը փոխելու համար:

Դուք կարող եք հայտարարել մի քանի վիճակի փոփոխականներ, կամ կարող եք հայտարարել մեկ վիճակի փոփոխական, որը պարունակում է օբյեկտ կամ նույնիսկ զանգվածներ:

const [clientName, setClientName] = useState("John");
const [clientId, setClientId] = useState("John");
const [clientStatus, setClientStatus] = useState("John");

Ֆունկցիայում վիճակները թարմացնելիս այն փոխարինում է գոյություն ունեցող արժեքը նոր արժեքով՝ դրանք միաձուլելու փոխարեն, ինչպես դա արվում է դասերում վիճակներ օգտագործելիս:

Սա խնդիր չէ մեկ արժեքի փոփոխականների համար, բայց օբյեկտների կամ նույնիսկ զանգվածի մեկ արժեքի թարմացումը խնդիր կառաջացնի:

Սա կարելի է շրջանցել՝ փոխանցելով ամբողջ օբյեկտը/զանգվածը որպես վիճակի նոր արժեք՝ դրանց ներսում մեկ արժեքի փոխարեն:

Աղբյուրներ:



React – JavaScript գրադարան՝ օգտատերերի միջերեսներ ստեղծելու համար
React-ը ցավազուրկ է դարձնում ինտերակտիվ միջերեսներ ստեղծելը: Ձեր հավելվածի յուրաքանչյուր վիճակի համար նախագծեք պարզ դիտումներ և React…reactjs.org





React Tutorial
W3Schools-ն առաջարկում է անվճար առցանց ձեռնարկներ, հղումներ և վարժություններ համացանցի բոլոր հիմնական լեզուներով: Ծածկելով…www.w3schools.com





Սկսել React - Սովորել վեբ մշակում | MDN
Սա մեզ հասցնում է React-ի մեր սկզբնական տեսքի ավարտին, ներառյալ՝ ինչպես տեղադրել այն լոկալ՝ ստեղծելով մեկնարկային հավելված…developer.mozilla.org





JavaScript
Ձեր կայքերը դարձրեք դինամիկ և ինտերակտիվ JavaScript-ի միջոցով: Դուք կստեղծեք գործառույթներ և առանձին հավելվածներ: Այս…www.theodinproject.com