Ստեղծել նոր React հավելված

Օգտագործիր ինտեգրված գործիքակազմ` օգտագործողի և ծրագրավորողի լավագույն փոխազդեցության փորձի համար։

Այս էջը նկարագրում է մի քանի հայտնի React գործիքակազմեր, որոնք կօգնեն նմանատիպ առաջադրանքներ լուծելիս.

  • Ընդլայնում մինչև մեծ քանակի ֆայլեր և կոմպոնենտներ։
  • Կողմնակի գրադարանների օգտագործում npm-ից։
  • Հիմնական սխալների վաղաժամ հայտնաբերում։
  • Կառուցման ընթացքում CSS-ի և JS-ի ինտերակտիվ խմբագրում։
  • Վերջնական ելքային արժեքի օպտիմիզացիա։

Այս էջում խորհուրդ տրված գործիքակազմերը սկսելու համար կարգավորումներ չեն պահանջում։

հնարավոր է, որ դուք գործիքակազմի կարիք չունենաք

Եթե դուք փորձ չունեք վերը ներկայացված խնդիրների հետ կամ դեռ ձեզ հարմարավետ չեք զգում JavaScript գործիքներ օգտագործելիս, դիտարկեք «ավելացնել React-ը ինչպես <script> թեգ HTML էջում» և, ոչ պարտադիր, «Փորձիր React-ը JSX-ի հետ» բաժինները։

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

React-ի թիմը նախ և առաջ խորհուրդ է տալիս այս լուծումները.

  • Եթե դուք սովորում եք կամ ստեղծում եք նոր single-page հավելված օգտագործեք Create React App-ը։
  • Եթե դուք կառուցում եք սերվերում արտապատկերվող վեբկայք Node.js-ով, ապա փորձեք Next.js-ը։
  • Եթե դուք կառուցում եք ստատիկ բովանդակություն-կողմնորոշված վեբկայք, ապա փորձեք Gatsby-ին։
  • Եթե դուք կառուցում եք կոմպոնենտների գրադարան կամ ինտեգրում եք գոյություն ունեցող կոդի հետ, ապա փորձեք ավելի ճկուն գործիքակազմ.

Create React App

Create React Appeng-ը հարմար միջավայր է React-ը սովորելու համար, և լավագույն տարբերակը React-ով նոր single-page հավելված կառուցելու համար։

Այն տեղադրում է ձեր կառուցման միջավայրը` թույլ տալով օգտագործել վերջին JavaScript հատկությունները, տրամադրում է գեղեցիկ փոխազդեցության փորձ ծրագրավորողի համար, և օպտիմիզացնում է ձեր հավելվածը production-ի համար։ Դուք պետք է ունենաք Node >= 6 և npm >= 5.2 ձեր մեքենայի վրա։ Պրոյեկտ ստեղծելու համար աշխատեցրեք.

npx create-react-app my-app
cd my-app
npm start

Խորհուրդ

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

«Create React App»-ը չի մշակում backend-ի տրամաբանություն կամ տվյալների հենքեր. այն ընդամենը ստեղծում է frontend-ի կառուցման քայլերը. այսպիսով կարող եք օգտագործել այն ձեր ցանկացած backend-ի հետ։ Իրականում, այն իր հերթին օգտագործում է Babeleng և webpackeng, բայց դուք կարիք չունեք իմանալ նրանց մասին։

Երբ պատրաստ լինեք տեղակայելու production-ում, աշխատեցրեք npm run build։ Այն build պանակում կստեղծի ձեր հավելվածի օպտիմիզացված տարբերակը։ «Create React App»-ի մասին կարող եք իմանալ ավելին նրա README-իցeng և օգտագործողի ձեռնարկիցeng։

Next.js

Next.jseng-ը React-ով կառուցված հայտնի և թեթև framework է, ստատիկ և սերվերում արտապատկերվող հավելվածների համար։ Այն ներառում է ձևավորման և routing-ի լուծումներ և ենթադրում է, որ դուք օգտագործում եք Node.jseng-ը որպես սերվերի միջավայր։

Սովորիր Next.js-ը նրա պաշտոնական ձեռնարկովeng։

Gatsby

Gatsbyeng-ն լավագույն տարբերակն է React-ով ստատիկ վեբկայքեր ստեղծելու համար։ Այն թույլ է տալիս ձեզ օգտագործել React կոմպոնենտներ, բայց ելքային արժեքում ստանալ նախա-արտապատկերված HTML և CSS` երաշխավորելու համար ամենաարագ ներբեռնումը։

Սովորիր Gatsby-ն նրա պաշտոնական ձեռնարկովeng և այս մեկնարկային փաթեթների ցանկից։

Ավելի ճկուն գործիքակազմեր

Ներկայացված գործիքակազմերը առաջարկում են ավելի մեծ ճկունություն և ընտրություն։ Վերջիններս մենք առաջարկում ենք ավելի փորձառու օգտագործողներին.

Ստեղծել գործիքակազմ զրոյից

Սովորաբար JavaScript-ի կառուցման գործիքակազմը բաղկացած է.

  • Փաթեթների մենեջերից, ինչպիսին է Yarneng-ը կամ npmeng-ը։ Այն տալիս է հասանելիություն կողմնակի փաթեթների մեծ մասին և թույլ է տալիս հեշտությամբ տեղադրել կամ թարմացնել դրանք։

  • bundler-ից, ինչպիսին է webpackeng-ը կամ Parceleng-ը։ Այն թույլ է տալիս գրել մոդուլային կոդ և հավաքել այն միասին փոքր փաթեթների` օպտիմիզացնելու համար ներբեռնման ժամանակը։

  • Կոմպիլյատորից, ինչպիսին է Babel-ը։ Այն թույլ է տալիս գրել ժամանակակից JavaScript կոդ, որը շարունակում է աշխատել հին զննարկիչներում։

Եթե նախընտրում եք տեղադրել ձեր սեփական JavaScript գործիքակազմը զրոյից, ապա նայեք այս ձեռնարկըeng, որում վերստեղծվում են «Create React App»-ի որոշ ֆունկցիոնալներ։

Մի մոռացեք համոզվել, որ ձեր գործիքակազմը ճիշտ է կարգավորված production-ի համար։