Cara membuat component baru dan menambahkan state

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.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *