Styled Components, Era Baru CSS

Sedikit cerita, pada awal tahun 2017 lalu saya sempat membaca sebuah artikel yang direkomendasikan oleh salah seorang web developer senior dari sebuah perusahaan di mana saya bekerja. Artikel tersebut berisi tentang Evolusi CSS, yang kalau tidak salah memiliki urutan evolusi dimulai dari CSS, SASS, BEM CSS, CSS Modules dan Styled Components. FYI, pada saat itu saya sendiri baru memiliki sedikit ilmu tentang CSS dan SASS, yang otomatis membuat saya asing dengan 3 evolusi terakhir, hehe. Beberapa minggu kemudian untuk pertama kalinya saya menggunakan Styled Components saat belajar React menggunakan React Boilerplate. Namun pada akhirnya malah membuat saya menyukai Styled Components ketimbang React, eh.

Sedikit membagi pemahaman saya tentang Styled Components. Styled Components merupakan sebuah library Javascript yang menawarkan kemudahan dalam mengatur style antarmuka pengguna (UI) khususnya untuk React dan React Native (saya belum tahu apakah library ini juga bisa dipakai pada framework JS seperti AngularJS atau tidak). Dengan Styled Components kita bisa menyimpan CSS di dalam JS, cukup menarik bagi saya. Untuk lebih jelasnya kita bisa kunjungi site resminya di sini.

Nah, maka dari itu artikel saya kali ini membahas tentang sedikit pengenalan Styled Components dan cara menggunakannya pada aplikasi React sederhana. Tak perlu panjang lebar lagi, mari kita mencobanya, Let’s try!

Setting up React

Pertama, siapkan dulu aplikasi React sederhana dengan menggunakan Webpack dan Babel. Dimulai dari npm init (perintah untuk membuat file package.json), masukkan informasi tentang aplikasi kita. Kemudian install React dan React DOM dengan perintah npm install --save react react-dom. Setelah itu install Webpack dengan perintah npm install --save-dev webpack webpack-dev-server. Dan yang terakhir adalah install Bable dengan perintah npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 babel-preset-react. Dan berikut adalah struktur folder sederhana aplikasi React kita beserta contoh source code-nya.

+ first-styled-components
  + dist
    - index.html
  + node_modules
  + src
    - index.jsx
  - package.json
  - webpack.config.js

FIle package.json

File webpack.config.js

FIle index.html

File index.jsx

Aplikasi React kita telah selesai, untuk menjalankan aplikasi ini gunakan perintah npm start, kemudian kunjungi http://localhost:8081/ pada browser kita. Maka kita mendapatkan tampilan aplikasi seperti pada gambar berikut.

Styled Components Library

Nah, sekarang saatnya kita akan menambahkan library Styled Components pada aplikasi React kita. Yang perlu kita lakukan cukuplah sederhana, yakni meng-install-nya dengan perintah npm install --save styled-components. Setelah itu kita ubah sedikit file index.jsx kita menjadi seperti berikut.

File index.jsx baru.

Jalankan kembali aplikasi kita, maka tampilan aplikasi React kita akan menjadi seperti berikut.

Cukup menarik bukan? Yup, dengan Styled Components kita tidak perlu melakukan request file CSS lagi pada aplikasi React, yang terpenting adalah kita memahami CSS supaya bisa menggunakan library ini.

Nah, demikianlah sedikit pengenalan Styled Components dengan contoh sederhana penggunaannya pada aplikasi React dari saya. Semoga artikel ini bermanfaat dan nantikan artikel saya selanjutnya ya. See you next time!