Memulai dengan React Cosmos

Ditulis oleh Elizabeth Amaechi

pengantar

Salah satu dari banyak nilai jual React adalah bahwa pengguna dapat membangun komponen dan menggunakannya kembali berulang kali dalam basis kode tertentu. Anda dapat mengambil fitur ini lebih jauh dengan bantuan alat pengembang React Cosmos.

React Cosmos digunakan untuk membangun komponen React yang terisolasi dan dapat diskalakan. Ini memungkinkan Anda membuat satu-satunya komponen untuk aplikasi React Anda. Anda dapat mempertimbangkan kasus penggunaan yang berbeda serta pola desain yang berbeda saat menggunakan React Cosmos, yang akan memungkinkan Anda untuk membuat komponen yang sangat serbaguna dan terisolasi yang sesuai dengan banyak kondisi lainnya.

Manfaat menggunakan React Cosmos

React Cosmos bekerja dengan memanfaatkan fitur komponen. Jumlah fitur komponen ini adalah apa yang membentuk pustaka komponen Anda. Ini kemudian dirender pada UI untuk memudahkan pelacakan. Manfaat utama menggunakan React Cosmos adalah ia dapat memindai proyek React Anda dan memungkinkan Anda merender komponen di dalam masing-masingnya, dengan kombinasi alat peraga apa pun atau dalam keadaan apa pun.

Di bagian ini, kita akan membahas beberapa dari banyak manfaat menggunakan React Cosmos.

Pembuatan komponen yang dapat digunakan kembali

Seperti yang dinyatakan sebelumnya, React Cosmos membawa manfaat penggunaan kembali dari React ke tingkat berikutnya, memungkinkan pembuatan komponen yang terisolasi dan dapat digunakan kembali. Ini memberi Anda lebih banyak ruang untuk membuat arsitektur yang kuat sekaligus mencegah Anda dari keharusan menulis ulang UI yang sudah ditentukan.

Berbagi UI di berbagai proyek

Selain menggunakan kembali UI dalam proyek tertentu, React Cosmos memungkinkan penggunaan kembali komponen di berbagai proyek dalam portofolio Anda. Ini sangat membantu dalam menciptakan branding yang solid dan seragam di seluruh proyek Anda.

Debug mudah

Jauh lebih mudah untuk mengidentifikasi dan memperbaiki kesalahan dalam aplikasi Anda ketika Anda menggunakan React Cosmos karena ia mengisolasi komponen ke dalam unit individu, daripada memaksa Anda untuk bekerja dengan komponen yang tidak terisolasi. Ini membuat pengembangan lebih mudah dan lebih cepat karena lebih mudah untuk mengetahui sumber kesalahan Anda.

Bangun dan publikasikan pustaka komponen Anda

Anda dapat membuat komponen React Cosmos Anda tersedia secara publik untuk rekan kerja Anda atau siapa pun di internet. Ini bisa berguna jika Anda memutuskan untuk membangun atau meluncurkan pustaka komponen Anda sendiri untuk penggunaan umum.

Ejekan API eksternal waktu nyata

Pengguna dapat melihat status aplikasi mereka saat ini secara real-time dengan mengejek API eksternal. Ini membuat pengembangan lebih cepat dan juga berguna selama debugging.

Menginstal React Cosmos

React Cosmos dapat digunakan pada proyek React atau React Native apa pun, tetapi untuk artikel ini, kami akan fokus pada React. Pastikan Anda telah menginstal proyek React Anda sebelumnya dengan menggunakan npx create-react-app .

Sekarang, mari kita instal React Cosmos di proyek React kita menggunakan npm (Node Package Manager):

 npm i --D react-cosmos

atau Benang:

 yarn add --dev react-cosmos

Anda dapat mengonfirmasi bahwa instalasi berhasil dengan memeriksa package.json di proyek React Anda.

Setelah instalasi, langkah selanjutnya adalah membuat package.json di aplikasi Anda. Ini akan memungkinkan Anda untuk memulai proyek Cosmos Anda. Sertakan kode berikut di bawah bagian skrip file package.json

 "scripts" : { "cosmos" : "cosmos" , "cosmos:export" : "cosmos-export"
}

Seluruh package.json akan terlihat seperti ini:

 {
"name" : "reactcosmos" , "version" : "0.1.0" , "private" : true , "dependencies" : { "@testing-library/jest-dom" : "^5.12.0" , "@testing-library/react" : "^11.2.7" , "@testing-library/user-event" : "^12.8.3" , "react" : "^17.0.2" , "react-dom" : "^17.0.2" , "react-scripts" : "4.0.3" , "web-vitals" : "^1.1.2" }, "scripts" : { "start" : "react-scripts start" , "build" : "react-scripts build" , "test" : "react-scripts test" , "eject" : "react-scripts eject" , "cosmos" : "cosmos" , "cosmos:export" : "cosmos-export" }, "eslintConfig" : { "extends" : [ "react-app" , "react-app/jest" ] }, "browserslist" : { "production" : [ ">0.2%" , "not dead" , "not op_mini all" ], "development" : [ "last 1 chrome version" , "last 1 firefox version" , "last 1 safari version" ] }, "devDependencies" : { "react-cosmos" : "^5.6.2" }
}

Mari kita lanjutkan untuk memulai aplikasi kita.

Meluncurkan aplikasi React kami dengan React Cosmos

Jalankan perintah di bawah ini di dalam terminal Anda:

Menggunakan npm:

 npm run cosmos

Atau, menggunakan Benang:

 yarn cosmos

Anda akan diminta untuk mengunjungi localhost:5000 untuk melihat pustaka komponen Anda. Anda belum akan melihat komponen apa pun di sana karena kami belum membuatnya.

Pustaka komponen kosong Anda

Jika Anda dihadapkan dengan pesan kesalahan, Anda harus melakukan hal berikut:

  1. Buat file bernama babel.config.js dan perbarui kontennya dengan kode di bawah ini:
 module . exports = { presets : [ [ ' @babel/preset-env ' , { targets : { node : ' current ' }}], [ ' @babel/preset-react ' , { targets : { node : ' current ' }}] // add this ] };
  1. Buat file lain bernama postcss.config.js dan perbarui kontennya seperti ini:
 module . exports = {}

Ini akan memperbaiki masalah Babel atau PostCSS. Jika kesalahan berlanjut, Anda dapat membaca pesan dan mencoba memecahkan masalah atau menelusuri pesan kesalahan di browser favorit Anda.

Membangun komponen React pertama kami

Untuk membangun komponen pertama kita, kita perlu membuat perlengkapan. File Fixture biasanya hanya berisi satu ekspor default — baik komponen React atau node React. Untuk membuatnya, kita perlu menambahkan .fixture ke nama file yang berisi komponen kita — kita akan menggunakan main.fixture.js . Dengan cara ini, React Cosmos dapat dengan mudah melacaknya.

Lanjutkan untuk membuat file bernama button.fixture.jsx di dalam src aplikasi React Anda. Langkah selanjutnya adalah memperbarui file dengan kode di bawah ini:

 // button.fixture.jsx import React from ' react ' ; export default function Hello () { return < h1 > Hello, World </ h1 > }

Hore! Anda baru saja membuat komponen terisolasi pertama Anda menggunakan React Cosmos. Untuk mengonfirmasi ini, lanjutkan ke localhost:5000 lagi, di mana Anda akan melihat komponen pertama Anda terdaftar di bawah All Fixtures .

Komponen pertama Anda telah dibuat

Memperbarui komponen Bereaksi Anda

Sekarang kita telah berhasil membuat komponen pertama kita, kita dapat melanjutkan untuk memperbaruinya. Di bagian ini, kita akan membuat komponen tombol. Lanjutkan untuk memperbarui konten button.fixture.jsx kami seperti yang ditunjukkan di bawah ini.

 import React from ' react ' ; import ' ./button.fixture.css ' export default function Button () { return < button > Hey, Click me </ button >; }

Apa yang kami lakukan di atas adalah membuat tag tombol dan menautkan stylesheet CSS kami yang belum dibuat. Sekarang, buat file lain bernama button.fixture.css untuk styling komponen tombol kita. Perbarui konten file baru sebagai berikut:

 button { padding : 10px 20px ; color : #fff ; border : none ; outline : none ; background-color : teal ; border-radius : 8px ; display : block ; margin : auto ; margin-top : 40px ; cursor : pointer ; }

Ini akan memberi gaya pada tombol yang baru dibuat. Anda dapat sekali lagi melanjutkan ke localhost:5000 untuk melihat perubahan yang kami buat pada komponen kami.

Tombol baru Anda dengan perubahan di pustaka komponen

Kami telah berhasil membuat dan memperbarui komponen tombol terisolasi kami! Sekarang dapat digunakan untuk aplikasi kami yang berbeda. Saat Anda membuat lebih banyak komponen, komponen tersebut akan muncul di dasbor pra-render Anda untuk dilihat.

Perhatikan bahwa file perlengkapan harus ditempatkan di dalam src dari aplikasi React Anda. Anda dapat membuat fixture baik dengan menambahkan .fixture ke nama file Anda atau membuat __fixtures__ dan menempatkan semua file fixture Anda di dalamnya.

File multi-perlengkapan

Mungkin sulit untuk mengekspor lebih dari satu komponen dari satu file perlengkapan, terutama jika Anda mengizinkan hanya satu ekspor default. Anda dapat mengatasi masalah ini dengan menempatkan komponen Anda dalam bentuk object , seperti yang ditunjukkan di bawah ini; ini akan memungkinkan Anda untuk mengekspor beberapa komponen dengan satu file perlengkapan.

 export default { primary : < PrimaryButton > Click me </ PrimaryButton >, primaryDisabled : < PrimaryButton disabled > Click me </ PrimaryButton >, secondary : < SecondaryButton > Click me </ SecondaryButton >, secondaryDisabled : < SecondaryButton disabled > Click me </ SecondaryButton >, };

Kesimpulan

React Cosmos adalah cara terbaik untuk membuat komponen terisolasi untuk aplikasi React Anda saat ini atau di masa depan, terutama karena mudah digunakan dan dengan debugging cepat, di antara manfaat lainnya. Cobalah React Cosmos untuk pengembangan yang mudah dan lebih cepat saat Anda membangun komponen berikutnya!

Visibilitas penuh ke dalam aplikasi React produksi

Men-debug aplikasi React bisa jadi sulit, terutama ketika pengguna mengalami masalah yang sulit untuk direproduksi. Jika Anda tertarik untuk memantau dan melacak status Redux, memunculkan kesalahan JavaScript secara otomatis, dan melacak permintaan jaringan yang lambat dan waktu muat komponen, coba LogRocket .

Dasbor LogRocket

LogRocket seperti DVR untuk aplikasi web, merekam secara harfiah semua yang terjadi pada aplikasi React Anda. Alih-alih menebak mengapa masalah terjadi, Anda dapat menggabungkan dan melaporkan status aplikasi Anda saat masalah terjadi. LogRocket juga memantau kinerja aplikasi Anda, melaporkan dengan metrik seperti beban CPU klien, penggunaan memori klien, dan banyak lagi.

Paket middleware LogRocket Redux menambahkan lapisan visibilitas ekstra ke dalam sesi pengguna Anda. LogRocket mencatat semua tindakan dan status dari toko Redux Anda.

Modernkan cara Anda men-debug aplikasi React Anda — mulai memantau secara gratis .

June 25, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *