Ավելացնել React-ը վեբկայքում

Օգտագործեք այնքան քիչ կամ այնքան շատ React, որքան ինքներդ կցանկանաք։

React-ը իսկզբանե նախագծված է եղել այնպես, որ հնարավոր լինի աստիճանաբար ինտեգրել, և դուք կարող եք օգտագործել այնքան քիչ կամ այնքան շատ React, որքան ինքներդ կցանկանաք։ Միգուցե ցանկանաք միայն մի փոքր ինտերակտիվություն ավելացնել ձեր գոյություն ունեցող էջին։ Դա անելու համար React կոմպոնենտները հիանալի միջոց են։

Վեբկայքերի մեծ մասը single-page հավելվածներ չեն, և կարիք էլ չունեն լինելու։ Մի քանի տող կոդով և առանց կառուցման գործիքների փորձիր React-ը քո վեբկայքի մի փոքր հատվածում։ Հաջորդիվ, դուք կարող եք կամ աստիճանաբար ընդլայնել նրա մասնաբաժինը կամ պահել այն մի քանի դինամիկ widget-ների համար։


Ավելացրու React-ը մեկ րոպեում

Այս բաժնում մենք ցույց կտանք, թե ինչպես ավելացնել React կոմպոնենտ գոյություն ունեցող HTML էջում։ Վարժանքի համար կարող եք հետևել քայլերին` կիրառելով նրանք ձեր սեփական վեբկայքի վրա կամ ստեղծել դատարկ HTML ֆայլ։

Բարդ գործիքներ կամ տեղադրում չկա. այս բաժինը վերջացնելու համար ձեզ միայն անհրաժեշտ է հասանելիություն համացանցին և հատկացնել մեկ րոպե ձեր ժամանակից։

Ոչ պարտադիր. Ներբեռնեք ամբողջ օրինակը (արխիվացրած վիճակով 2ԿԲ)

Քայլ 1. Ավելացրեք DOM կոնտեյներ HTML-ում

Սկզբում բացեք HTML ֆայլը, որը ցանկանում եք խմբագրել(edit)։ Ավելացրեք դատարկ <div> թեգ` նշելու համար այն տեղը, որտեղ ցանկանում եք ցույց տալ ինչ-որ բան React-ով։ Օրինակ.

<!-- ... գոյություն ունեցող HTML ... -->

<div id="like_button_container"></div>

<!-- ... գոյություն ունեցող HTML ... -->

Մենք այս <div>-ին տվեցինք եզակի id HTML ատրիբուտ։ Սա մեզ թույլ կտա հետագայում գտնել այն JavaScript կոդից և պատկերել React կոմպոնենտը նրա ներսում։

Խորհուրդ

Դուք կարող եք տեղադրել այսպիսի <div> «կոնտեյներներ» <body> թեգի ներսում ցանկացած տեղ։ Դուք կարող եք մեկ էջում ունենալ միմյանցից անկախ այնքան DOM կոնտեյներներ, որքան կցանկանաք։ Սովորաբար դրանք լինում են դատարկ. React-ը փոխարինելու է DOM կոնտեյներների ներսում գոյություն ունեցող ցանկացած բովանդակություն։

Քայլ 2. Ավելացնել script թեգեր

Հաջորդիվ, HTML էջում, անմիջապես </body> թեգի փակվելուց առաջ, ավելացրեք երեք <script> թեգ.

  <!-- ... ուրիշ HTML ... -->

  <!-- Ներբեռնել React-ը։ -->
  <!-- Նշում: տեղակայման(deploy) ժամանակ, փոխարինեք «development.js»-ը «production.min.js»-ով։ -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Ներբեռնել մեր React կոմպոնենտը։ -->
  <script src="like_button.js"></script>

</body>

Առաջին երկու թեգերը ներբեռնում են React-ը։ Երրորդը կներբեռնի ձեր կոմպոնենտի կոդը։

Քայլ 3. Ստեղծել React կոմպոնենտ

Ստեղծեք like_button.js անունով ֆայլ` ձեր HTML էջի հարևանությամբ։

Բացեք այս սկզբնական կոդը և տեղադրեք այն ֆայլում, որը ստեղծեցիք։

Խորհուրդ

Այս կոդը հայտարարում է LikeButton անունով React կոմպոնենտ։ Մի անհանգստացեք, եթե դուք դեռ չեք հասկանում այն. մենք կծածկենք React-ի կառուցողական բլոկները ավելի ուշ մեր ձեռնարկում և հիմանական գաղափարների ուղեցույցում։ Հիմա, եկեք ուղղակի նայենք, թե ինչպես է այն պատկերվում էկրանին։

Սկզբնական կոդից հետո ավելացրեք ևս երկու տող like_button.js-ի վերջում.

// ... տեղադրված սկզբնական կոդը ...

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Այս երկու տող կոդը գտնում է <div>-ը, որն առաջին քայլում ավելացրել էինք HTML-ում, և հետո ցույց է տալիս մեր React կոմպոնենտը` «Like» կոճակը դրա ներսում։

Ահա և վերջ

Չկա չորորդ քայլ։ Դուք հենց նոր ավելացրեցիք առաջին React կոմպոնոնտը ձեր վեբկայքում։

Անցեք հաջորդ բաժիններին, եթե ցանկանում եք իմանալ ավելին React-ի ինտեգրման մասին։

Նայեք օրինակի ամբողջ կոդը

Ներբեռնեք ամբողջ օրինակը (արխիվացրած վիճակով 2ԿԲ)

Խորհուրդ. վերաօգտագործեք կոմպոնենտը

Հիմնականում դուք կցանկանաք պատկերել React կոմպոնենտները HTML էջի մի քանի մասերում։ Այստեղ ներկայացված է օրինակ, որը պատկերում է «Like» կոճակը երեք անգամ և նրան փոխանցում ինչ-որ տվյալներ.

Նայեք օրինակի ամբողջ կոդը

Ներբեռնեք ամբողջ օրինակը (արխիվացրած վիճակով 2ԿԲ)

Խորհուրդ

Այս ռազմավարությունը հատկապես արդյունավետ է, երբ էջի` React-ով գրված մասերը, միմյանցից մեկուսացված են։ React կոդի ներսում ավելի հեշտ է օգտագործել կոմպոնենտի կոմպոզիցիա։

Խորհուրդ. մինիֆիկացրեք JavaScript կոդը production-ի համար

Մինչ ձեր վեբկայքի production-ում տեղակայելը, հաշվի առեք, որ չմինիֆիկացված JavaScript կոդը կարող է զգալիորեն դանդաղեցնել էջը օգտագործողների համար։

Եթե դուք արդեն մինիֆիկացրել եք հավելվածի սկրիպերը, ապա նաև եղեք համոզված, որ տեղակայված HTML-ը ներբեռնում է React-ի այն տարբերակները, որոնք վերջանում են production.min.js-ով.

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

Եթե դուք չեք մինիֆիկացրել ձեր սկրիպները, ահա դա անելու տարբերակներից մեկը։

Ոչ պարտադիր. փորձել React-ը JSX-ով

Վերը նշված օրինակներում մենք միայն հիմնվեցինք այն հատկությունների վրա, որոնք բնականոն կերպով աջակցվում են զննարկչի կողմից։ Ահա թե ինչու մենք օգտագործեցինք JavaScript ֆունկցիայի կանչ` React-ին ասելու համար, թե ինչ պատկերի.

const e = React.createElement;

// Պատկերել "Like" <button>-ը
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

Ինչևէ, React-ը, փոխարենը, նաև առաջարկում է JSX օգտագործելու տարբերակը.

// Պատկերել "Like" <button>-ը
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

Այս երկու կոդի կտորները համարժեք են։ Չնայած JSX-ը ամենևին պարտադիր չէ, շատ մարդիկ օգտակար են համարում գրել UI կոդ` React-ի հետ օգտագործելով այլ գրադարաներ։

Դուք կարող եք խաղալ JSX-ի հետ` օգտագործելով այս առցանց փոխարկիչը։

Արագ փորձել JSX-ը

Ձեր պրոյեկտում JSX-ը փորձելու ամենաարագ եղանակը` այս <script> թեգի ավելացումն է ձեր էջ.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Հիմա կարող եք օգտագործել JSX ցանկացած <script> թեգում` ավելացնելով type="text/babel" ատրիբուտը դրա վրա։ Ահա JSX-ով HTML ֆայլի օրինակ, որը կարող եք ներբեռնել և խաղալ։

Այս մոտեցումը հիանալի է սովորելու և հասարակ ցուցադրություններ ստեղծելու համար։ Այնուամենայնիվ, այն դարձնում է ձեր վեբկայքը դանդաղ և ոչ հարմար production-ի համար։ Երբ դուք պատրաստ լինեք շարժվել առաջ, ջնջեք այս նոր <script> թեգը և type="text/babel"ատրիբուտը, որը դուք ավելացրել էիք։ Փոխարենը, հաջորդ բաժնում դուք կտեղադրեք JSX նախապրոցեսոր, որպեսզի ավտոմատ կերպով փոխարկեք ձեր բոլոր <script> թեգերը։

Ավելացնել JSX պրոյեկտին

JSX-ի ավելացումը պրոյեկտում չի պահանջում bundler-ի կամ «development server»-ի նման բարդ գործիքներ։ Իրականում, JSX-ի ավելացումը շատ նման է CSS նախապրոցեսորի ավելացմանը։ Միակ պահանջը ձեր համակարգչի վրա տեղադրված Node.js ունենալն է։

Տերմինալում, գնացեք ձեր պրոյեկտի պանակ(folder), և գրեք այս երկու հրամանները.

  1. Քայլ 1. աշխատեցրեք npm init -y (եթե այն հաջողությամբ չավարտվի ստուգեք սա` ուղղման համար)
  2. Քայլ 2. աշխատեցրեք npm install babel-cli@6 babel-preset-react-app@3

Խորհուրդ

Այստեղ մենք օգտագործում ենք npm միայն այն պատճառով, որ տեղադրենք JSX նախապրոցեսորը. ուրիշ ոչնչի համար դուք դրա կարիքը չունեք։ Թե՛ React-ը և, թե՛ հավելվածի կոդը կարող են մնալ <script> թեգերում առանց որևէ փոփոխության։

Շնորհավորում ենք։ Դուք հենց նոր ձեր պրոյեկտում ավելացրեցիք production-ի համար պատրաստ JSX կարգավորումներ։

Աշխատեցնել JSX նախապրոցեսորը

Ստեղծեք src անունով պանակ և աշխատեցրեք այս հրամանը տերմինալում.

npx babel --watch src --out-dir . --presets react-app/prod 

Խորհուրդ

npx-ում տառասխալ չկա, սա փաթեթ(package) աշխատացնող գործիք է, որը գալիս է npm-ի 5.2+ տարբերակների հետ:

Եթե դուք տեսնեք այսպիսի սխալի ծանուցում. «You have mistakenly installed the babel package», ապա հավանաբար դուք բաց եք թողել նախորդ քայլը։ Կատարեք այն նույն պանակում և կրկին փորձեք վերջին հրամանը։

Մի սպասեք սրա ավարտին. այս հրամանը JSX-ի համար միացնում է ավտոմատ «դիտորդ»(watcher)։

Եթե դուք հիմա ստեղծեք src/like_button.js անունով ֆայլ, այս JSX-ի սկզբնական կոդով, դիտորդը կստեղծի նախապրոցեսավորված like_button.js մաքուր JavaScript կոդով` հարմար զննարկչին։ Երբ դուք խմբագրեք(edit) JSX կոդով ֆայլը, փոխակերպումն ավտոմատ կաշխատի։

Որպես բոնուս, սա նաև թույլ կտա ձեզ օգտագործել ժամանակակից JavaScript շարահյուսության հատկություններ, ինչպիսիք են կլասները, առանց անհանգստանալու հին զննարկիչների համար։ Գործիքը, որը հենց նոր օգտագործեցինք, կոչվում է Babel. կարող եք սովորել ավելին նրա փաստաթղթավորումից։

Եթե նկատեք, որ հարմարվել եք կառուցման գործիքների հետ և ցանկանում եք, որ նրանք անեն ավելին ձեզ համար, հաջորդ բաժինը նկարագրում է մի քանի շատ հայտնի և մատչելի գործիքակազմ։ Եթե ոչ, այս սկրիպտ թեգերը հիանալի կանեն իրենց գործը։