React UI Component Playgrounds

Menjadi seorang programmer React, sangatlah lumrah jika teman-teman sering membuat aplikasi yang bisa digunakan oleh banyak orang. Dalam pembuatan aplikasi, tentunya dibutuhkan komponen UI yang mana kecepatan pengembangan dan kemampuan untuk mengatur serta berbagi komponen menjadi hal yang sangat penting didalam prosesnya. Tak heran jika banyak tools dibentuk guna membantu teman-teman dalam proses pembuatan aplikasinya, mulai dari pembuat dokumen hingga online playground dan catalogs to faster sharing.

Untuk memudahkan teman-teman dalam menemukan tools yang tepat, penulis akan memperkenalkan beberapa playground yang mungkin dapat membantu teman-teman memvisualisasikan, menguji, berbagi, dan mengembangkan komponen React. Berikut ini React UI component playground yang perlu teman-teman ketahui:

1. Bit

   

Bit merupakan tools open-source yang memungkinkan teman-teman merangkum komponen dengan semua file dan dependensinya, serta menjalankannya di berbagai aplikasi di luar kotak.

Selain itu, karena tools ini dapat memudahkan teman-teman untuk berbagi dan berkolaborasi dalam berbagai komponen di seluruh proyek, maka tools ini juga menyediakan cloud-based hub yang gratis bernama bit.dev. Di mana dengan cloud-based hub tersebut teman-teman dapat dengan mudah berbagi, menemukan, dan berkolaborasi pada komponen teman-teman.

Komponen yang teman-teman bagikan melalui bit.dev dapat ditemukan hanya dengan mencari berdasarkan konteks, ukuran bundel atau bahkan dependensi. Selain itu, teman-teman juga dapat dengan cepat menelusuri hasilnya berdasarkan snapshot visual dari komponen yang dibuat.

Tools ini juga menyajikan komponen di playground secara langsung, sehingga teman-teman dapat mencobanya terlebih dahulu sebelum memilih untuk digunakannya dalam aplikasi. Apabila teman-teman mempunyai JSDocs atau file dengan format .md sebagai bagian dari kode, tools ini akan mengurai dan menyajikan dokumen yang sama pula. Namun jika komponennya termasuk kedalam file unit-test, maka tools ini akan menjalankannya secara terpisah dan menyajikan hasilnya sebagai bagian dari dokumen untuk setiap komponen.

Saat teman-teman sudah menemukan komponen yang ingin digunakan, maka teman-teman cukup gunakan NPM atau Yarn sebagai media penginstalnya. Kemudian apabila teman-teman berbagi komponen melalui tools ini, teman-teman tidak perlu lagi mengatur repositorinya serta tidak perlu mengubah kode dan hubnya.

Untuk lebih jelasnya teman-teman dapat melihat komponen yang terdapat di dalam bit.dev dengan mengunjungi link dibawah ini:

https://bit.dev/components

1. Codesandbox

Codesandbox merupakan komponen online code editor yang mengotomatiskan hal-hal seperti transpiling, bundling, dan manajemen dependensi yang dapat memudahkan teman-teman membuat proyek baru dalam satu klik. Selain itu, Codesandbox juga dapat menampilkan pratinjau langsung untuk menunjukkan hasil kode saat temen-temen melakukan pengetikan. Untuk mempublikasikan suatu proyek atau aplikasi yang telah dibuat, teman-teman hanya cukup membagikan urlnya saja.

Seiring dengan perkembangan teknologi yang kian melesat, dirilislah Codesandbox versi 2.5 yang mana makin menambahnya peningkatan UI baru seperti sidebar baru, view-mode, floating previews, dan masih banyak lagi. Selain itu juga disediakannya dukungan konfigurasi, integrasi rapi ke GitHub dan template angular.

1. Stackblitz

Stackblitz merupakan online IDE untuk aplikasi web yang berdayakan oleh Visual Studio Code. Sama seperti Codesandbox, Stackblitz juga dapat menjadi tempat untuk teman-teman membuat proyek angular dan React yang dapat dibagikan hanya cukup dengan melalui tautan URL.

Stackblitz secara otomatis dapat menangani penginstalan dependensi, kompilasi, bundling, dan hot realod saat teman-teman melakukan pengetikan. Selain itu juga dapat menyempurnakan intellisense dari npm, pencarian proyek (Cmd + P), go to definition, dan fitur-fitur utama kode VS lainnya yang hanya berfungsi diluar kotak.

Stackblitz juga menggunakan Progressive Web App API untuk menjalankan dev server secara langsung didalam browser, sehingga teman-teman dapat terus mengkode walaupun dalam keadaan offline.

1. JS Bin

   

JS Bin merupakan debugging tools development web kolaboratif open source dari Remy Sharp, yang memungkinkan teman-teman menulis kode dan menyimpannya secara real time, serta menyajikan render full preview secara real time pula. Sementara itu, untuk rendering jarak jauh teman-teman dapat melihat hasilnya di perangkat dan platform apa pun yang mana dapat diperbarui secara real time.

Js Bin juga menyediakan prosesor diluar kotak termasuk coffee-script, Less, Markdown, dan Jade. Selain itu, JS Bin juga dilengkapi dengan dukungan CSS dan JSX yang menjadikannya sebagai tools untuk dapat digunakan dengan komponen React secara online. Dengan JS Bin teman-teman juga bisa mendebug panggilan ajax dari jarak jauh.

Berikut merupakan link panduan yang mungkin dapat membantu teman-teman dalam menggunakan JS Bin:

http://www.codeblocq.com/2016/09/Setup-the-latest-React-in-JSBin/

1. PlayCode

   

Playcode.io memungkinkan teman-teman dengan cepat membuat eksperimen Frontend. Teman-teman juga dapat membagikan proyek melalui URL, membuat seluruh aplikasi web, serta mempublikasikan ke domain. Selain itu, juga dapat memungkinkan teman-teman menggunakan konsol untuk debug, menggunakan lib untuk javascript, css, seperti jQuery, React, Vue, dll. Sementara setiap perubahan kode teman-teman akan disimpan ke server playcode.

1. CodePen

   

CodePen merupakan lingkungan online development yang sangat populer bagi para FrontEnd developer untuk menggunakan dan berbagi snippets dengan cara visual. Codepen berfungsi sebagai online code editor dan open-source learning environment, tempat untuk membuat code snippets secara kreatif dan mengujinya.

Teman-teman dapat menulis snippets HTML, CSS, dan JavaScript dan mendapatkan real team preview, debug, share, dan merasakan kode secara langsung. Sintaks preprosesor meliputi Sass, KURANG, Stylus, PostCSS, Markdown, Haml, Slim, Pug dan lainnya. CodePen juga memiliki presentation mode khusus untuk showcase.

Berikut adalah cheatsheet yang berguna untuk menyiapkan React playground di CodePen.

Referensi:

[https://blog.bitsrc.io/11-react-ui-component-playgrounds-for-2018-eef5a87a1bf8](