Halo teman – teman semuanya, lama tidak berjumpa. Dan pada hari ini saya akan memberikan tips dan trik seputar dunia website, pada article yang lalu saya sudah memberikan tips bagaimana cara mengintall reactjs dengan NPM dan juga CDN. Kali ini kita akan belajar tentang Cara membuat component baru dan menambahkan state jika kita buka website reactjs, saya akan install versi yang terbaru yaitu v16.13.0
Kemudian akan saya install mengggunakan NPM dengan cara npx create-react-app saya membuat project dengan nama article
Kemudian saya run dengan cara masuk ke peoject saya dengan cara
cd article
npm start
Maka akan berjalan di localhost:3000, kemudia ketika kita buka di app.js maka yang tersedia react component menggunakan function component, karena memang pada reactjs kita dapat membuat component menggunakan class dan juga function, jika kita menggunakan class component maka kita dapat membuat state, dengan cara
state = {
}
Tetapi jika kita membuat component dengan function kita juga dapat membuat state dengan react hooks, tinggal kita import usestate, lalu tinggal kita gunakan function usestate()
Baik kali ini kita akan membuat component baru dan akan kita import pada file app.js
Silahkan buat folder bernama component di dalam folder src, kemudian di dalam folder component buatlah file bernama Home.js, dan kita buat class component
Kemudian kita akan import pada file app.js, ketikkan seperti gambar di bawah ini
Kemudian hasilnya seperti gambar di bawah ini
Pada class Home kita buat state untuk menampilkan data, dengan cara
Pada state yang kita buat, kita dapat menampung bermacam – macam data, ada string, interger, array, bolean dan juga object. Nah cara menampilkannya adalah seperti gambar di bawah ini
Dan hasilnya seperti gambar di bawah ini
Nah itulah Cara membuat component baru dan menambahkan state, kita sudah berhasil membuat component baru dan di dalam component kita juga sudah membuat state lalu kita tampilkan hasil nya pada localhost:3000. Baiklah sekian pada artikel kali ini, tentu kita akan lanjut di artikel berikutnya untuk mengulah tentang reactjs. Terimakasih dan sampai jumpa.
