NgeReact Eps. 1 : Hello World dan Buat To Do App
Bismillahirohmanirohim, Assalamualaikum Warahmatullahi Wabarakatuh. Hai sobat sekalian 👋 . Apa kabarnya? Semoga sehat-sehat selalu ya, staysafe tetap semangat belajar ngodingnya. Sudah cukup lama nih saya tidakupdate medium. Ya maklum sebagai engineer, kesibukan pasti ada saja. Jadi beberapa pekan kebelakang ini saya tidak sempat mengupdate medium. Jadi tidak perlu panjang kali lebar lagi, pada kesempatan kali ini saya akan sharing sedikit ilmu mengenai React JS. Pada artikel sebelumnya sudah saya beri gambaran sedikit tentang React JS. Sekarang waktunya kita langsung praktik cusss….
Sebelumnya saya jelaskan sedikit NgeReact Episode Pertama ini. Jadi kita akan praktik mengenai React JS, dari hello world, sampai membuat sebuah To Do App. Design To Do App yang akan kita buat ini sebenarnya terinspirasi dari Arounda yang membuat sebuah design UI task management. Tapi berhubung saya masih newbie juga xixixi, jadi maaf kalo ekspetasi jauh dari design hehe. Cus langsung kita siapkan bahan dan alat. Sebelumnya pastikan semua bahan di bawah ini sudah terinstall di laptop sobat sekalian:
- Text Editor (rekomdasi menggunakan VsCode)
- Node JS (rekomendasi versi LTS, install di Link)
- Kopi dan cemilan untuk menemani saat ngoding 😅😅😅
Langsung saja cuzzzz…
Install dan Hello World
- Jika alat dan bahan sudah tersedia semua, maka langsung saja kita install react nya terlebih dahulu. Buat folder NgeReact di komputer anda, lalu buka terminal di folder tersebut, dan ketikan tulisan npx create-react-app todo-app seperti di bawah ini:
2. Tunggu hingga install selesai, setelah selesai buka folder di text editor, maka tampilan akan seperti di bawah ini:
3. Buka terminal pada text editor lalu ketik npm start untuk menjalankan React App nya. Buka localhost:3000 pada browser, maka akan muncul tampilan seperti di bawah ini:
4. Jika sudah sukses menjalankan React nya, mari kita ikuti instruksi react awal, dimana untuk mengedit kita bisa menuju folder /src lalu mengubah App.js. Dimana App.js ini adalah induk dari code react nya.
5. Kita coba ubah isi App.js nya menjadi seperti di bawah ini :
Maka akan dihasilkan tampilan seperti di bawah ini:
6. Hapus beberapa file pada folder src yang tidak terpakai, seperti App.test.js , logo.svg , dan setupTests.js
7. Setelah itu, kita buat file styles.module.css tempat kita membuat styling untuk tampilan app nya.
8. Kali ini kita menggunakan metode CSS module untuk stylingnya, untuk metode lainnya bisa di lihat pada artikel https://blog.codigo.id/styling-in-your-react-a40baef78613. Jadi kita import variable nya sebagai styles
Tambahkan class .title pada module css
Maka akan menghasilkan tempilan di bawah ini:
Cukup untuk membuat hello world dan setup Css Module nya, lanjut kita membuat To Do App nya.
Membuat Layout
- Pertama-tama download icon terlebih dahulu di Drive ini, lalu ekstrak dan taruh semua icon di folder Public di dalam folder img
2. Lalu buat struktur untuk container seperti dibawah
buat class di styles.module.css sesuai nama classname nya
maka tampilan akan seperti:
2. Tambahkan AppBar sesuai desain dengan code :
jangan lupa Css nya juga
maka hasilnya:
3. Tambahkan title dan white box nya, dengan sesuaikan code nya:
tambahkan di styles.module.css nya seperti:
maka tampilan akan seperti:
4. Tambahkan tag untuk tampilan list todo nya nanti
tambahkan pula styling di module css nya:
5. Buat fab untuk button tambah menggunakan code dibawah:
tambahkan css nya:
maka tampilana akan seperti dibawah ini:
6. Pada awal code di function App() tambahkan sebuah hooks sebelum return seperti dibawah ini:
Logikanya, jika added itu nantinya menjadi true maka akan merender sebuah code di conditionnya. Untuk mengetes tambah kan function OnClick seperti di bawah ini pada button fab nya.
Maka hasilnya akan seperti:
7. Buat app bar pada code yang akan kita render jika added = true:
tambahkan css nya juga di module css:
maka hasiknya seperti:
8. Tambahkan juga text area, input date, dan button di added conditionnya
tambahkan Css nya juga
maka tampilan akan seperti:
tambahkan fungsi pada onclick icon close nya agar ketika di click close maka akan menghide added render nya
maka hasilnya seperti dibawah ini:
Membuat Fungsional
- Buat state todo dan setTodo serta fungtion handleChange yang natinya dipakai untuk merekam perubahan pada text area nya, taruh code sebelum conditioning added tadi
kita coba test seperti gambar di bawah ini:
2. Buat state data dan handleCreate, untuk fungsional pada button createnya
kita test, maka hasilnya seperti di bawah, dimana ketika textarea terisi, lalu kita mengklik button Create maka akan menjalan kan function handleCreate
3. Buat state date dan handleChangeDate, untuk fungsional pada input date nya,
kita tes dan coba cek di console, maka akan muncul perubahannya
4. Kita update si handleCreate nya agar bisa mengirim data ke localstorage dan mengsetState data
maka akan muncul data pada localStorage :
5. Lalu kita buat perintah agar state data ketika di load harus mengget data dari localStorage. Di sini saya menggunakan fungsi hooks useEffect, yang bisa dibaca tutorial lebih lanjutnya di https://reactjs.org/docs/hooks-effect.html
6. Kita tinggal mapping saja isi dari state data ke To Do List yang sudah dibuat tadi dengan cara:
maka hasilnya seperti di bawah ini:
7. Buat fungsi complete pada checkbok di todo listnya, agar setelah di checked maka todo akan hilang
8. Jangan lupa render total data pada description di atas white boxnya
Taraaa…. 🎉🎉🥳🥳 To Do app siap ditest.
Sekian sharing sedikit di NgeReact Episode pertama ini, semoga bermanfaat. Maaf jika hasil masih kurang memuaskan juga hehe, maklum masih newbie. Jangan lupa beri saya claps 👏👏👏 dan juga mampir ke trakteer saya di https://trakteer.id/rafly-maulana-muqes untuk mendukung agar blog ini lebih berkembang. Sekian terimakasih banyak spasibo, Wasalamualaikum Warahmatullahi Wabarakatuh.
Referensi:
- Inpirasi design dari https://dribbble.com/shots/6581661-To-Do-App-Task-manager-concept
- Trakter saya di https://trakteer.id/rafly-maulana-muqes
- Link Code di https://github.com/raflymaulana28/ToDoApp
