Hallo Dumbways Addict! Balik lagi nih bareng kita 😎✌
.&nbsp;
Kali ini kita akan membahas salah satu topik yang cukup seru nih, yaitu kita bakal membahas beberapa projek latihan reactjs yang cukup oke untuk dijadikan bahan latihan. Daripada menggabut ria, lebih baik kita membuat projek latihan sederhana biar kita makin wush-wush lagi nih ngoding ReactJS-nya. 😁
.&nbsp;
Oke, tanpa berlama-lama, berikut beberapa projek ReactJS yang bisa temen-temen gunakan sebagai bahan pembelajaran :
.&nbsp;
.&nbsp;
<h2>Projek Counter </h2>
.&nbsp;
<img src="https://lh4.googleusercontent.com/I3pvGa9_3iC-bYKlJVqrYEuic2ak7XyIJYdYPmT8VHI9LUK1ZQbD6MrirxvwqxI9PR1aPdz6OBrvibIYckf7DK3LTF5qfEZuThBkp4V_NA7VNhLIsDtHBpYD2BHflnDlkG06CPRMMu--EXT1zksUTwzX0u9pPNPFJ_3lB9FwR1NedlZRrEOgbMay8DQ6imKXbSFarQ" alt="" style="height: ;width: "/>
.&nbsp;
Projek counter ini merupakan salah satu projek paling sederhana untuk pemula. Pada projek counter ini akan cukup melatih pemahaman kita mengenai penggunaan state.
.&nbsp;
Link demo : <a href="https://codesandbox.io/s/counter-00xnew?file=/src/App.js" target="_self"><ins>https://codesandbox.io/s/counter-00xnew?file=/src/App.js</ins></a>&nbsp;
.&nbsp;
.&nbsp;
<h2>Projek UseRef DOM Manipulation (Generate Random Color) .&nbsp;</h2>

<img src="https://lh3.googleusercontent.com/zIgh_WMmwl4fq7TCTQtp-5sPg9zaMyvYvAB32i8_qS0fVPopHkVBWr0tXnkqBGhST8ulJchtMuOYUmZ-UrYHfCJSAeUEIlKYx21xdNrR-6zROY4bgMBwwdo2r6Ggy0oispqeSRwbgYyENQSMrOiH2MEyz0lcJ2ntUhbuDtEUYQl2FUvbagm7CQUpHaZCwhdDQEFDQQ" alt="" style="height: ;width: "/>
.&nbsp;
Menjadi : 
.&nbsp;
.&nbsp;

<img src="https://lh3.googleusercontent.com/gsVVo8BWFL3irxcnqiwXKw6cilICIlKgNRWv06fvhFOjYBVpneDjNRNbCeQ8Zbqs9v2uKG-6o18cWmbN4VVjKW8IDdoTJk3iuG3W5-fsIlfFMixc2cqc0lYS_9lFvUWNd5A-3TMsSpm7vQGZmAtn4Taqv8iGyAkELsxKC1tAtGar4RbqJMDFjphgtUdezV_Ryjh1xg" alt="" style="height: ;width: "/>
.&nbsp;
UseRef merupakan salah satu hooks dalam reactjs yang gunanya secara garis besar adalah untuk :
<ul>
<li>Memanipulasi DOM</li>
<li>Meningkatkan Performa (tidak merender ulang ketika terjadi perubahan pada sebuah data, misalnya ketika ingin menyimpan perubahan data pada form registrasi, dsb)</li>
</ul>
.&nbsp;
Link Demo : <a href="https://codesandbox.io/s/belajaruserefgeneraterandomcolor-qjh2ys" target="_self"><ins>https://codesandbox.io/s/belajaruserefgeneraterandomcolor-qjh2ys</ins></a>&nbsp;
.&nbsp;
.&nbsp;
<h2>Projek Latihan Conditional Rendering .&nbsp;</h2>



<img src="https://lh3.googleusercontent.com/KM2nx3HEs3lUrg0tazuICVvBZ-TCRnqfUxiFGW2s-vH6eumtUHqjnk7IHFoxXCEnutv5L0Q9XkT4ufhA1Yp8YyARIeW--wcbxVPEe2wid8ib2rbrBZySxF6psA9RHG4C2_12aaVnBR4dRHlFc3hNFjhY46ZxixnIrDMqlAkuIhYGKU7ZSU9q5kdBaRPvsYXxQDYj3w" alt="" style="height: ;width: "/>
.&nbsp;
Menjadi :
. 

<img src="https://lh3.googleusercontent.com/srAm2tzPDgRaAXzvg59FRdG7AX_vIw0_xpH2doJTKFuWzdsIyqIDjnAAYldikxf_r9OiLCiGjlxL2tSPI4qrqzHYKLYceiPnSEDh0Em8Jyg9l3c2dBmt5b2UfYC91ekJ50wP7DAqfZiYiDqGg7vPBd9n1lg-HDs_yZGqHqxH-iZX8m9PpgA4tSoUJnXge9hD8zWEqQ" alt="" style="height: ;width: "/>
.&nbsp;
Conditional rendering merupakan salah satu konsep dalam reactjs yang digunakan untuk merender component sesuai dengan kondisi yang dibuat. Ada beberapa cara dalam conditional rendering, diantaranya menggunakan :
<ul>
<li style="margin-left:2.25pt;">&amp;&amp; Operator</li>
<li style="margin-left:2.25pt;">Ternary Operator</li>
<li style="margin-left:2.25pt;">If-Else Operator</li>
</ul>
.&nbsp;
Link demo : <a href="https://codesandbox.io/s/latihanconditionalrendering-6cpw2l?file=/src/App.js" target="_self"><ins>https://codesandbox.io/s/latihanconditionalrendering-6cpw2l?file=/src/App.js</ins></a> &nbsp;
.&nbsp;
.&nbsp;

<h2>Projek Latihan UseCallback .&nbsp;</h2>

<img src="https://lh6.googleusercontent.com/O_LzhcpawAl6Nkdro37RzZi1tyIety58Oys7MYDPe0CXdO9Ioz4y8zfgtRCZrsADUWAIDr5BUIrhuWDeCP1C2o4BGbYR6dRU9BJrJgwu6-xm8P2NQMuyApsgceyXqjtuDfEX5QVNYSO9QKdQ1YET9OvxsaKVKCdnu4NVpgBxLANcxINpbpKhAKegmvkVV5DSUzvwog" alt="" style="height: ;width: "/>

.&nbsp;
UseCallback sendiri merupakan salah satu hooks dalam reactjs yang digunakan untuk me-memoize (mengingat) hasil render component. Jadi apabila nilai suatu component tidak ada perubahan maka tidak perlu di render lagi. Mempelajari useCallback dan menerapkannya pada projek akan berdampak cukup besar dalam perihal kecepatan / performa pada aplikasi kita dalam jangka waktu yang panjang. Such a good investment! 😎
. .&nbsp;
Link demo : <a href="https://codesandbox.io/s/usecallback-85bdsp?file=/src/App.js" target="_self"><ins>https://codesandbox.io/s/usecallback-85bdsp?file=/src/App.js</ins></a>&nbsp;
.&nbsp;
. .&nbsp;
.&nbsp;
<h2>Projek Fetching Anime</h2>
. .&nbsp;
<img src="https://lh5.googleusercontent.com/AD196WWLvLTWo8OpUzNDp-DdADMPvf9hqNRsY6Y1U-eyaNa-OQ16fHbfs5Us32nsMw6egKplESV3ZK94aKAIw_mYq3gQptiEnMphWAcvugmcp6TnLrnhOeae0c5SPvs-P8KcSmYd0PMad6Mpia9nCd7tUXVEU41qt3dj3Chvnfiy5b6Nb7FQXW3N7en8IwQCUo961A" alt="" style="height: ;width: "/>
.&nbsp;
Untuk projek yang satu ini cukup seru ya ges ya untuk para penyuka anime hehe. Intinya dalam projek ini temen-temen bakal cukup banyak belajar beberapa hal tentang fetching data menggunakan axios. Silahkan dicoba demonya dan clone projeknya di link dibawah. Good luck 😁✌
.&nbsp;
Link demo : <a href="https://ngewibu.vercel.app/" target="_self"><ins>https://ngewibu.vercel.app/</ins></a>
Link projek : <a href="https://github.com/Taufik-H/ngewibu" target="_self"><ins>https://github.com/Taufik-H/ngewibu</ins></a> .
Baik, sekian dulu dari kita. Terima kasih dan tetap semangat guys! 😎👍 &nbsp;

Kali ini kita akan membahas salah satu topik yang cukup seru nih, yaitu kita bakal membahas beberapa projek latihan reactjs yang cukup oke untuk dijadikan bahan latihan. Daripada menggabut ria, lebih baik kita membuat projek latihan sederhana biar kita makin wush-wush lagi nih ngoding ReactJS-nya. 😁

Projek Latihan ReactJS untuk Pemula yang Bisa Dicoba Untuk Mengasah Skill Kamu!