Pada tutorial kali ini KonsepKoding akan berbagi tutorial mengenai bagaimana caranya membuat styling Card yang cakep menggunakan ReactJS dengan library Styled-Components.  Nah Styled-Components sendiri adalah sebuah cara untuk membuat styling atau css dengan dijadikan sebuah komponen baru dalam sebuah variabel kemudian di panggil dalam return atau render View.

Apa Yang Akan Kita Pelajari?.


1. Membuat Project React Baru
2. Menginstall Library Styled-Component
3. Membuat Card React Yang Cakep

Membuat Project React Baru


npx create-react-app my-app
cd my-app

Menginstall Library Styled-Component


Setelah itu buka terminal/CMD anda di root folder anda kemudian ketikan perintah di bawah ini:

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

Membuat Card React Yang Cakep


Buka App.js anda kemudian ketikan kode di bawah ini :



Setelah itu run project anda dan hasilnya akan seperti gambar di bawah ini :



Sekian semoga tutorial ini dapat bermanfaat dan membantu kamu yang sedang mempelajari Desain CSS pada ReactJS.