Stories by Aditia Falacha Arvin on Medium

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*B2xgrJWzJICzk7eJ9NyYLw.jpeg"></figure>di postingan ini saya menuliskan pengalaman saya ketika perlu membuat sebuah input ask untuk sebuah inputan no rekening yang seperti gambar berikut, terdapat masking atau placeholder underscore ( _ ) sebagai visual pengisianya.
stack yang saya pakai kebetulan pakai react js :3, nah saya menemukan library <a href="https://www.npmjs.com/package/react-input-mask">react-input-mask</a>, tetapi itu terlalu powerfull untuk kasus yang sederhana, akhirnya coba coba bikin custom
<figure><img alt="" src="https://cdn-images-1.medium.com/max/652/1*8APvZVVsTFsTvcoQCJnFAg.png"></figure>berikut contoh code custom ketika riset, selanjutnya temen temen tinggal ubah menjadi component tersendiri atau di kembangkan lagi sesuai keperluan
<a href="https://medium.com/media/39623c3817160ee361e6ee2e54c5ce74/href">https://medium.com/media/39623c3817160ee361e6ee2e54c5ce74/href</a><a href="https://medium.com/media/baac75018aa9af8f8991099268a18dd6/href">https://medium.com/media/baac75018aa9af8f8991099268a18dd6/href</a>Semoga bermanfaat :)
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=47736522f398" width="1" height="1" alt="">

Custom Input Mask with Reactjs

I will share my VScode extensions and also to help me if i doing work with react native. I hope this extensions will help you code faster, cleaner and easier when develop react native.
I will add or remove the list, if something i am not use the extension again, or find better extension
<ul>
<li>
<a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets">ES7+ React/Redux/React-Native snippets </a> JavaScript and React/Redux snippets in ES7+ with Babel plugin features, this will help you code faster.</li>
<li>
<a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">ESLint</a> ESLint statically analyze your code to find problems and will inform you by red color.</li>
<li>Bracket Pair Colorize This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/625/1*Mc7P11ekmFL7irjflGkMIg.png"></figure><ul><li>
<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">Path Intellisens</a>e This extension will help you to autocompletes filenames.</li></ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/480/1*DFiplHuxoKED-uDrR3iJqg.gif"></figure><ul>
<li>
<a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode#:~:text=Prettier%20is%20an%20opinionated%20code,account%2C%20wrapping%20code%20when%20necessary.">Prettier — Code Formatter</a> <a href="https://prettier.io/">Prettier</a> is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.</li>
<li>
<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag">Auto Close Tag</a> This extension will help you to automatically add HTML/XML close tag.</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*EbGIozYQA3qS3nXpNtSDeg.gif"></figure><ul><li>
<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag">Auto Rename Tag</a> This have similliar like auto close tag, but this extension will help you to rename tag automatically in open and close tag.</li></ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ME0oAmIJdO6zaaYwL1DPwA.gif"></figure><ul>
<li>
<a href="https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight">Color Highlight</a> This extension styles css/web colors found in your document.</li>
<li>
<a href="https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer">SVG Viewer</a> This extensions will help you to viewing an SVG file from explorer context menu</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/841/1*4jgDiBembBhfkZ1EQS-s6A.gif"></figure><ul><li>
<a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">GitLens</a> GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.</li></ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/747/1*rDDkmugwCN8uXajJbJgcsw.gif"></figure><ul><li><a href="https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum">Lorem Ipsum</a></li></ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/738/1*RWvua0wsJDvV-c3AdBRQRA.gif"></figure>If you have any suggestion or want to add some extention please write down in comment :3
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=dae743273591" width="1" height="1" alt="">

VS Code Extensions for React Native

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Fxa6oJFh2lRD7EnAcZIcQg.png"></figure>Dengan menggunakan Portals pada react kita bisa memilih dimana kita dapat merender component pada DOM, tanpa harus berada dalam element root.
Kapan kita perlu menerapkanya?, dalam kasus ini saya pernah mengalami ketika ingin memunculkan sebuah modal yang cukup besar yang bersifat absolute, tetapi posisi modal dalam DOM nested didalam sebuah component yang memiliki style overflow scroll/hidden, sehingga modal yang muncul akan menyesuaikan ukuran dari parent, dan tidak tampil sesuai dengan yang kita inginkan, maka dari itu saya menemukan solusi dengan menerapkan Portals pada component modal tersebut, untuk menghindari style dari parent yang membuat tampilan kurang sesuai.
/public/index.html
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*b-6bA55yZKR3nTM-fynYVA.png"></figure>Tanpa basi basi langsung kita coba lewat kodingan, tapi dalam percobaan kita gak akan terlalu fokus pada styling ya!!
<ol><li>Pertama tentu saja kita buat project react, jalankan perintah pada terminal</li></ol>
<pre>npx create-react-app modal-react-portal</pre>
2. Setelah itu kita tambahkan div pada file /public/index.html
<a href="https://medium.com/media/020db3423ec128b6fa4f15dee28cbceb/href">https://medium.com/media/020db3423ec128b6fa4f15dee28cbceb/href</a>di sini kita menambahkan div dengan id modal-box, dengan tujuan kita ingin merender component modal kita dalam modal-box.
3. Buat file /src/components/Modals/Modals.module.css
<a href="https://medium.com/media/135f043dfeb5a1457e39a611280b46d9/href">https://medium.com/media/135f043dfeb5a1457e39a611280b46d9/href</a>4. Buat file /src/components/Modals/Modals.js
<a href="https://medium.com/media/e65013986511e47e1e618e558082d0a7/href">https://medium.com/media/e65013986511e47e1e618e558082d0a7/href</a>ReactDOM.createPortal(child, container) fungsi di atas sudah tersedia di react, dan kita perlu import dari ReactDom, dalam fungsi tersebut memiliki dua argument child berisi dengan sebuah component atau kode yang ingin kita render. container berisi dom element, atau lebih tepatnya dimana target kita ingin memunculkan child.
5. Ubah code pada src/App.js
<a href="https://medium.com/media/0629aa7e6047eb077a4aae82c1c4e02d/href">https://medium.com/media/0629aa7e6047eb077a4aae82c1c4e02d/href</a>6. Saat kita jalankan, dan kita coba cek inspect element, terlihat component modal masih belum dirender
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*B8pm6ZMupk4HpO0VFwrUlg.png"></figure>lalu ketika kita coba klik “Tampilkam Modal”, component akan di render di dalam modal-box, bukan dalam root
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WGeS7SDGtBaP9yy0FMoguA.png"></figure>DEMO
<a href="https://medium.com/media/524743a9e023efae945103c34e52e782/href">https://medium.com/media/524743a9e023efae945103c34e52e782/href</a><a href="https://github.com/aditiafa112/modal-react-portal/blob/main/README.md">modal-react-portal/README.md at main · aditiafa112/modal-react-portal</a>
reference : 1. <a href="https://www.instagram.com/p/Ca_3nWhgujz/">https://www.instagram.com/p/Ca_3nWhgujz/</a> 2. <a href="https://reactjs.org/docs/portals.html">https://reactjs.org/docs/portals.html</a> 3. <a href="https://reactjs.org/docs/create-a-new-react-app.html">https://reactjs.org/docs/create-a-new-react-app.html</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8a755be44ed9" width="1" height="1" alt="">

Create Modal with React Portals

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*d22Brz4MKGRLT4DqkUXrFw.gif"></figure>Dalam HTML, memiliki html form element seperti &lt;input&gt;, &lt;textarea&gt;, &lt;select&gt; dan dalam react biasanya kita menghandle value menggunakan react state seperti useState pada react hook, nah element yang di kontrol menggunakan state pada react ini disebut <a href="https://reactjs.org/docs/forms.html#controlled-components">Controlled Component</a>.
Dan ada alternatif selain menggunakan controlled component, hal ini di sebut <a href="https://reactjs.org/docs/uncontrolled-components.html#:~:text=In%20a%20controlled%20component%2C%20form,form%20values%20from%20the%20DOM.">Uncontrolled Component</a>, dimana ketika mengambil value dari form element seperti &lt;input&gt; menggunakan ref atau useRef (pada react hook) atau HTML form event onSubmit.
Agar lebih mudah di pahami kita akan buat contoh simple dari keduanya :
Controlled Component example using react hooks (useState)
<a href="https://medium.com/media/532b6b462834107f22b8a4ab5bb49497/href">https://medium.com/media/532b6b462834107f22b8a4ab5bb49497/href</a>Uncontrolled Component example using react hooks (useRef)
<a href="https://medium.com/media/9bd5a6ac643bcb495b77a1053a5dfdd0/href">https://medium.com/media/9bd5a6ac643bcb495b77a1053a5dfdd0/href</a>Uncontrolled Component example using react hooks (NodeSelector)
<a href="https://medium.com/media/922dfe7bfe2612a750f13b464a3c1160/href">https://medium.com/media/922dfe7bfe2612a750f13b464a3c1160/href</a>terkait NodeSelectors ini bisa dibaca lebih lanjut dari <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors#the_nodeselector_interface">link</a> ini.
referensi :
<ul>
<li><a href="https://reactjs.org/docs/uncontrolled-components.html">Uncontrolled Components - React</a></li>
<li><a href="https://reactjs.org/docs/forms.html">Forms - React</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors#the_nodeselector_interface">Locating DOM elements using selectors - Web APIs | MDN</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=82a7cbad2511" width="1" height="1" alt="">

Uncontrolled dan Controlled Component di react

Jika temen temen pernah menggunakan fitur pada javascript seperti async/await atau .then().catch pada javascript, sebenarnya fitur tersebut sudah dilengkapi promise.
promise sendiri dalam bahasa artinya janji, apabila menggunakan promise maka code setelah promise akan menunggu code sebelumnya selesai terlebih dahulu untuk dijalankan.
Contoh penggunakan promise yang sering kita temui :
<blockquote>const getNama = new Promise((resolve, reject) =&gt; { setTimeout(() =&gt; { if(true){ resolve(‘My name is …’) }else{ reject(‘name not found’) } }, 3000) })</blockquote>
di atas adalah salah satu bentuk promise, yang memiliki dua parameter atau props yaitu “resolve” dan “reject”, pada const di atas akan mengembalikan suatu data berupa nama, apabila nama di temukan maka harus dikembalikan menggunakan resolve, apabila nama tidak ditemukan makan akan dikembalikan menggunakan reject.
cara pemanggilan promise yang saya pelajari ada 2, dengan menggunakan .then() atau await;
<blockquote>//Pada fetch</blockquote>
<blockquote>getNama.then((res) =&gt; { console.log(‘response: ‘, res) }).catch((err) =&gt; { console.log(‘error: ‘, err) })</blockquote>
di atas adalah penggunakan .then() untuk mendapatkan data dari const promise, return dari resolve akan masuk di bagian .then() dan reject akan masuk ke bagian .catch()
<blockquote>//Pada async/await dan try/catch</blockquote>
<blockquote>
const iniData = async () =&gt; { try { let response = await getNama console.log(‘response: ‘, response) } catch (err) { console.log(‘error: ‘ err) } }</blockquote>
untuk penggunaan await di wajibkan untuk di bungkus dengan async function agar fitur promise bisa berjalan. penggunaan await sendiri hanya akan mengembalikan nilai resolve, tapi apabila di perlukan untuk mendapat nilai reject, maka perlu di bungkus dengan try catch, dimana hasil reject akan masuk ke bagian catch
Sekian dulu pengalaman yang dapat saya bagikan :3, jika ada kesalahan mungkin bisa di cantumkan di kolom komentar terimakasih.
terimakasih
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4c14db5fa9b1" width="1" height="1" alt="">

Stories

Custom Input Mask with Reactjs.

VS Code Extensions for React Native.

Create Modal with React Portals.

Uncontrolled dan Controlled Component di react.

Memahami promise, resolve, reject pada javascript.