Rekit Studio bilan tanishtirish: React va Reduxni rivojlantirish uchun haqiqiy IDE

Biz React, Redux va React Router-larni ishlab chiqish uchun to'liq IDE bo'lgan Rekit Studio-ning barqaror nashrini e'lon qilishdan juda mamnunmiz! Ehtimol bu sizning ba'zilaringiz uchun yangi bo'lsa ham, u bizga bir yildan ko'proq vaqt davomida murakkab veb-ilovalarni yaratishda yordam berdi.

Rekit studiyasi

Rekit Studio-ning oldingi versiyasi kodni tahrirlash imkoniyatiga ega bo'lmagan Rekit Portal edi. Endi Monaco Editor (VS Code-ga ham quvvat beradi) va chiroyli (kodni formatlash uchun ajoyib vosita) tufayli Rekit Studio kodlash uchun ajoyib tajribaga ega. Shuning uchun biz uni "portal" dan "studiya" deb nomladik.

IDE sifatida, kodni tahrirlashdan tashqari, Rekit Studio kodlarni yaratish, qaramlik diagrammasi, qayta ishlab chiqish, bino sinovlari va kodni boshqarishning mazmunli usulini ta'minlaydi.

Endi siz loyihani qanday sozlashingiz, veb-paketni sozlashingiz yoki papka tuzilishini tartibga solish haqida qayg'urmaysiz. Rekit Studio butun loyihani boshqarishning yaxlit usulini taqdim etadi. Rekit Studio-ni Sublime Text va VS Code kabi boshqa kod muharrirlaridan farq qiladigan narsa.

Tez namoyishlarni ko'ring

Kirishdan oldin siz Redit harakatlarini boshqarish uchun Rekit Studio-dan qanday foydalanish haqida tezkor demo-videoni ko'rishni xohlashingiz mumkin.

Videodan ko'rishimiz mumkinki, biz g'amxo'rlik qiladigan narsa shunchaki kodli qozon emas, balki biznes mantiqidir.

Hozir urinib ko'ring

Quyidagi kirish usulidan o'tishning eng yaxshi usuli bu Rekit Studio bilan birga ishlashdir, shunda siz o'zingiz uchun xususiyatlarni real vaqtda sinab ko'rishingiz mumkin. Bu ikki usulning ikkalasi bilan ham juda oson:

  1. Jonli namoyishga kirish: http://demo.rekit.org. Bu faqat o'qish rejimida ishlaydigan Rekit Studio misoli. Shunday qilib, siz boshqaradigan loyihada (Rekit studiyasining o'zi kodi!) Bironta o'zgartirish kirita olmaysiz.
  2. Faqat 3 bosqichda o'zingizning Rekit ilovangizni yarating:

Keyin ilovangiz uchun http: // localhost: 6075-ga kiring. sukut bo'yicha Rekit Studio uchun http: // localhost: 6076.

Ha, Rekit Studio - bu sizning loyihangizdagi npm to'plami va brauzerda ishlaydi. Ushbu mexanizm har bir dasturda o'z Rekit Studio-siga ega bo'lishini ta'minlaydi, shunda hech qachon versiyalarga mos kelish muammolari bo'lmaydi.

Kodingizni mazmunli tarzda ko'rsating

Dastlabki ishlab chiqish uchun deyarli barcha IDE-lar shunchaki fayllarni papka tuzilishi bilan bir xil tarzda namoyish etadi. Odamlar fayllar orasida harakatlanish asabiylashayotganidan shikoyat qiladilar. Bundan ham yomoni, yaxshilanishning hech qanday yo'li yo'q, chunki kod muharrirlari qaysi fayl tarkibiy qism ekanligini bilishmaydi, bu harakat, qaysi uslub fayllari qaysi komponentga tegishli, marshrutlash qoidalari aniqlanadi va hokazo. . Loyihaning tuzilishi erkin uslubda bo'lsa ham, u hech qachon takomillashtirilmaydi.

Endi Rekit kengaytirilishi mumkin bo'lgan veb-dastur qanday tashkil etilganiga qarab taqlid qilmoqda. Va shunga asoslanib, Rekit Studio sizning loyihangizni tushunadi. Men avvalgi ikkita maqolada amaliyotni tanishtirdim.

Naql asosida, Rekit Studio qaysi fayllar komponentlar, qaysi harakatlar ekanligini, marshrutlash qoidalari aniqlanadigan va hokazolarni biladi. Keyin loyiha tadqiqotchisi loyiha tarkibini quyidagicha mazmunli tarzda namoyish qilishi mumkin:

Project Explorer

Rekit Studio loyiha elementlarining xususiyatlarini biladi, masalan, asinxron ("ko'k" belgisi bilan), Redux do'koniga ulanadigan komponentlar ("S" yashil belgisi bilan) va qaysi komponentlar React Router ("React Router" tomonidan boshqariladi) ba'zi marshrutlash qoidalarida ishlatiladigan to'q sariq rangli "R" belgisi bilan).

Ushbu loyiha tadqiqotchisi bilan siz loyiha elementlari orasida osongina o'tishingiz mumkin. Bundan tashqari, elementni ochmasdan va kodni ko'rib chiqmasdan qo'shimcha ma'lumot olishingiz mumkin.

Ta'kidlash kerak bo'lgan narsa shundaki, loyiha tadqiqotchisi yaxshi ishlashi uchun faqat loyihadagi src papkasi ostidagi fayllarni ko'rsatadi. Agar fayllarni src papkasidan, masalan, pack.json yoki .gitignore-dan tahrirlamoqchi bo'lsangiz, sizga boshqa matn muharriri kerak bo'lishi mumkin.

Kod yaratish

Java uchun Eclipse yoki .Net uchun Visual Studio kabi boshqa haqiqiy IDE kabi, Rekit Studio hech qanday ta'lim xarajatlarisiz o'zining intuitiv interfeysi bilan kod qozonlarni yaratishga yordam beradi. Masalan, tarkibiy qism yaratish uchun loyiha qidiruvchisidagi xususiyat tuguniga sichqonchaning o'ng tugmachasini bosing va "Qo'shimcha tarkibiy qism" ni bosing.

Komponent qo'shing

Nom berishdan tashqari, siz uning Redux do'koniga ulanishini yoki React Router qoidasida ishlatilishini belgilashingiz mumkin. "Ok" tugmachasini bosgandan so'ng, u barcha kerakli kod va konfiguratsiyalarni yaratadi. Operatsion jurnalida buning orqasida nima borligini ko'rishingiz mumkin. U styling uchun kamroq / scss faylni, sinov uchun sinov faylini yaratadi, unga URL orqali kirish uchun React Router qoidasini qo'shadi (agar URL-manzil o'rnatilsa) va hokazo.

Buning ortida sehr yo'q - Rekit Studio shunchaki qo'lda oldin bajarilishi kerak bo'lgan narsalarni avtomatik ravishda bajarishga yordam beradi. Jurnallarni tekshirish orqali nima bo'lganini har doim bilasiz.

Redux async harakatlarini yaratish uchun Rekit Studio reduktsionlarni va harakatlarni yaratish uchun sukut bo'yicha ishlatiladi:

Async harakati qo'shing

Shu bilan bir qatorda, "redit-saga" -dan foydalanib, "rekit-plagin-redux-saga" plaginini o'rnatib, async harakatlarini yaratishingiz mumkin. Kirish haqida ko'proq ma'lumot olish uchun plagin bo'limiga qarang.

Rekit tomonidan yaratilgan barcha fayl nomlari, funktsiya nomlari yoki o'zgaruvchan nomlar bu erda tasvirlangan kabi oldindan belgilangan qoidalarga amal qilishlari shart. Shunday qilib, siz nom maydoniga "mening komponentim" kabi nomni kiritsangiz ham, Rekit uni "MyComponent" ga o'zgartiradi. Ushbu yondashuv bilan loyihadagi barcha nomlar har doim mos keladi.

Ushbu kod qozonlari eng yaxshi umumiy amaliyotga muvofiq yaratilgan. O'zingizning biznes mantig'ingizni verbal kodni qo'lda yozmasdan to'ldirishingiz kerak. Kod yaratilgach, uni bepul tahrirlashingiz mumkin.

Qayta ishlab chiqarish muhimdir

Katta dasturni yaratishda, kodni toza, o'qilishi va keyin xizmat ko'rsatishi uchun qayta ishlash juda muhimdir. Refaktoring ba'zi asosiy qismlari loyiha elementlarining nomini o'zgartirish, siljitish va yo'q qilishdir. Zamonaviy texnologiyalar yordamida bu ish juda qiyinlashadi.

Masalan, agar biz async harakatining nomini o'zgartirishni xohlasak, u odatda bir nechta fayllarga tegishi va turli joylarda o'nlab kodlarni o'zgartirishi kerak. Async harakatini "fetchTopics" dan "fetchTopicList" ga o'zgartirishni xohlaymiz deb ayting, u quyidagi o'zgartirishlarga muhtoj:

Juda aqldan ozganga o'xshaydi, uni hech qachon qo'l bilan qilishni xohlamaysiz, to'g'rimi? Xuddi shu og'riq tarkibiy qismlar va harakatlarning harakatlanishi va yo'q qilinishida mavjud. Asbobning yordamisiz, og'riq ko'pchiligimizga kodni qayta tuzatishdan saqlaydi. Bu bizning loyihamizni qisqa vaqt ichida amalga oshirish qiyin bo'ldi.

Endi Rekit Studio-da Java yoki Eclipse uchun .Net uchun Visual Studio kabi boshqa IDE-larda bo'lgani kabi, tarkibiy qismni yoki harakatni o'ng tugmasini bosib, nomini o'zgartirish yoki o'chirish mumkin. Rekit Studio hamma narsani avtomatik ravishda bajaradi va uning orqasida nima borligini ko'rish uchun jurnallarni tekshirishingiz mumkin.

Loyihangizni intuitiv diagrammalar bilan ko'rib chiqing

Sizning loyihangiz o'sib ulg'ayganida, modullarning bog'liqlik munosabatlari murakkablashadi. Agar ularni to'liq ko'rib chiqmasangiz, bu ko'pincha regressiya muammolariga olib keladi. Kod har doim tushunarli bo'lishi uchun munosabatlarni har doim sodda saqlash yaxshi. Rekit Studio qaramlikni ko'rib chiqish uchun ikki xil diagrammalarni taqdim etadi:

1. Umumiy diagramma
U boshqaruv panelidagi sahifada (bosh sahifa) aks etadi, unda biz nafaqat funktsiyalar o'rtasidagi bog'liqlikni (Rekit ilovalarining yuqori darajasi tushunchasi), balki tarkibiy qismlar va harakatlar kabi oddiy modullarni ham ko'rishimiz mumkin. Shunday qilib, siz qaysi modullar refaktor uchun xavfli ekanligini (juda ko'p sonli) va qaysi modullarni (kamroq tushirish bilan) oson topishingiz mumkin.

Ushbu diagramma sizga ishlatilmagan modullarni topishga yordam beradi - masalan, yuqoridagi diagrammada ko'rsatilganidek "uy" xususiyatining ikkita komponenti endi loyihada ishlatilmaydi. Siz ularni xavfsiz olib tashlashingiz mumkin. Keraksiz kodni olib tashlash, loyihaning murakkabligini va ilovaning to'plam hajmini kamaytirishga yordam beradi.

2. Elementlar sxemasi

Project Explorer-dan elementni oching, so'ngra diagramma yorlig'i ostida elementlar diagrammasini ko'rishingiz mumkin. Bu element qanday yaratilishi yoki boshqalar tomonidan ishlatilishi haqida juda intuitiv ko'rinishni beradi. Bu modulning murakkabligi.

Masalan, SidePanel - bu boshqa ko'plab komponentlar va harakatlardan foydalanadigan murakkab komponent. Va bu boshqa xususiyatlarga bog'liq. Ehtimol, bu sodda va tushunish uchun soddalashtirish uchun refaktor komponentidir.

Qurish va sinovdan o'tkazish

IDE sifatida Rekit Studio shuningdek, intuitiv interfeys interfeyslari bilan loyihani qurishi va sinab ko'rishi mumkin. Odatiy bo'lib, Rekit Studio loyihani qurish uchun "npm run build" buyrug'ini ishlatishga harakat qiladi va birlik sinovlarini o'tkazish uchun "npm test - [test-file-pattern]" ni ishga tushiradi.

Loyihani qurish uchun asosiy menyuda "Build" menyusini bosing:

Keyin siz taraqqiyot satrini ko'rishingiz va natijani yaratishingiz mumkin. Ishlab chiqarish serveriga joylashtirishdan oldin, standart serverda ishlaydigan dist serverga kirish orqali hosil qilingan natijani tekshirishingiz mumkin: http: // localhost: 6077.

Birlikni tekshirish uchun siz barcha sinovlarni asosiy menyudagi "Sinovlarni ishga tushirish" bandini bosish orqali yoki sinovlardan o'tgan fayl / papkani o'ng tugmasini bosib bajarishingiz mumkin. Rekit Studio fayl namunasini sinash uchun buyruqni avtomatik o'zgartiradi:

Yuqorida "diagramma" xususiyatining sinov natijasi. Agar siz loyihaning barcha sinovlarini o'tkazsangiz, u sinov qamrovi to'g'risida hisobot tayyorlaydi. Siz unga asosiy menyu orqali kirishingiz mumkin:

Plagin tizimi

Rekit Studio funktsiyalar, harakatlar va tarkibiy qismlarning qozonxonalarini yaratishi mumkinligini ko'rishimiz mumkin. Agar siz selektsionerlar kabi yangi elementlarni yaratmoqchi bo'lsangiz yoki standart kod qaynatgichini o'zgartirishni xohlasangiz (masalan, async harakatlarida "redux-thunk" o'rniga "redux-saga" dan foydalanish), siz buni amalga oshirish uchun plaginlarni yaratishingiz mumkin.

Plagin tizimi haqida ko'proq ma'lumotni bu erda ko'ring.

Buyruqlar satrining interfeysi

Rekit Studio-dan tashqari Rekit loyihasini boshqarish uchun yana bir buyruq qatori interfeysi mavjud. Aslida Rekit Studio va Rekit CLI loyiha elementlarini boshqarish uchun "rekit-core" dan foydalanadilar. CLI tizimi plaginlarning ko'proq turlarini qo'llab-quvvatlaydi. Kelajakda Rekit Studio plagin tizimi uchun yagona interfeys interfeysi bilan ta'minlanadi.

Rekit portalidan Rekit Studio-ga ko'chirish

Agar mavjud loyihangiz Rekit portalidan foydalanayotgan bo'lsa, Rekit Studio-ga ko'chib o'tish juda oson, chunki Rekit Studio oldingi Rekit loyihalariga to'liq mos keladi. Buning uchun siz Rekit Studio-ni o'rnatishingiz va uni bu erda server.js-da boshlash uchun skriptni yangilashingiz kerak.

Loyihangizni Rekit loyihasiga aylantirish

Agar siz React, Redux va React Router-dan foydalanib loyihani yaratgan bo'lsangiz, uni Rekit loyihasiga aylantirishingiz mumkin, shunda uni boshqarish uchun Rekit Studio-dan foydalanishingiz mumkin. Bu qiyin emas, ammo mavzuni to'g'ri tanishtirish uchun mavzuga boshqa maqola kerak. Agar xohlasangiz, uni yozaman - izohlarda menga xabar bering. Reklama usulida fayllaringiz va kodlaringizni qayta tartibga solish muhim ahamiyatga ega.

Keyingisi nima

Rekit Studio hali ham boshlang'ich bosqichda, garchi biz uni uzoq vaqtdan beri veb-ilovalarni yaratish uchun ishlatgan bo'lsak ham. Kundalik ishimizda hammamiz undan foydalanganimiz uchun, biz uni takomillashtirishda davom etamiz.

Quyida ba'zi ustuvor nomzodlar ko'rsatilgan:

  • Yaxshi kod sintaksisini ta'kidlash.
  • Maxsus ESlint qoidalarini qo'llab-quvvatlang.
  • Avtomatik to'ldirish yaxshiroq, masalan, modul nomlarini o'rnatish.
  • Cmd + P-dan foydalanib tez ochiladigan fayllar.
  • Saqlanmagan bir nechta fayllarni qo'llab-quvvatlang. Ayni paytda kodingizni xavfsiz saqlash uchun faqat bitta fayl saqlanmagan holatda bo'lishi mumkin.
  • Diagrammalarning ko'proq turini qo'shing.
  • Foydalanuvchilarga komponentlar va harakatlardan tashqari oddiy fayllarni yaratish / qayta nomlash / o'chirishga ruxsat bering.
  • Hikoyalar kitobini qo'shing.
  • TypeScript-ni qo'llab-quvvatlash.
  • Server tomonidan qo'llab-quvvatlanadigan xizmat.

Ro'yxat uzoq bo'lishi mumkin va bu sizning fikringizga bog'liq - sizda mavjud bo'lgan har qanday narsani kutib qolamiz.

Xulosa

Old texnologiya juda tez rivojlanayotganiga qaramay, Rekit ikki yildan ortiq vaqt davomida barqaror emas, balki ramka sifatida emas. U amalda bo'lgan texnologiyalar texnologiyalarga bog'liq emas. Endi Rekit Studio-ning chiqarilishi biz kodlash tajribamizni yaxshilash uchun yangi bosqichdir. Umid qilamizki, sizga ham yoqadi!

Va nihoyat, shuni ta'kidlashni istardimki, Rekit sizning dasturingiz uchun SDK yoki npm to'plamlarini taqdim etmaydi. Bu faqat loyihani yaratish va boshqarish vositasi. Rekit bo'lmasa ham, siz kod yozish uchun istalgan matn muharrirlaridan foydalanishingiz va terminaldan Rekit loyihasi uchun skriptlarni ishga tushirishingiz mumkin. Ya'ni, siz Rekit-dan foydalanasiz, lekin bunga qaramaysiz.