Modul 3-2. Styling Component

Halo teman-teman, selamat datang kembali di course React JS bersama Nusantech Academy 🙂 .

Pada chapter sebelumnya, kita telah membahas komponen-komponen pada React JS. Agar tampilan komponen yang teman-teman buat lebih menarik, perlu kita lakukan styling pada komponen. Bagaimana caranya? Yuks simak terus chapter ini.

Pada chapter ini, kita akan melakukan styling pada komponen React JS. Terdapat tiga cara yang dapat kita gunakan untuk melakukan styling pada komponen React JS, yaitu Inline Styling, menggunakan CSS Stylesheet, dan menggunakan CSS Modules.

Inline Styling

Untuk melakukan styling secara inline, kita gunakan atribut “style” di setiap elemen JSX. Nilai dari atribut “style” merupakan sebuah objek Javascript. Berikut contohnya.

import React from 'react'
 
function App() {
  return (
    <div>
      <h1 style={{ color: 'blue' }}>Hi! Nusantech Academy</h1>
    </div>
  )
}
 
export default App

Pada contoh di atas, kita melakukan styling pada elemen <h1> dengan memberikan nilai pada atribut “style”. Nilai yang diberikan berupa objek Javascript dengan properti “color” di dalamnya. 

Penulisan Nama Properti

Karena penulisan style secara inline merupakan objek Javascript, maka untuk properti dengan dua nama seperti “background-color” ditulis secara camel case. “background-color” menjadi “backgroundColor”. Berikut contohnya.

import React from 'react'
 
function App() {
  return (
    <div>
      <h1 style={{ color: 'blue', backgroundColor: 'yellow' }}>
        Hi! Nusantech Academy
      </h1>
    </div>
  )
}
 
export default App

Objeck Javascript

Cara lain untuk melakukan styling, yaitu dengan mendefinisikan style di dalam sebuah objek. Kemudian kita letakkan objek tersebut sebagai nilai dari atribut “style”. Berikut contohnya.

import React from 'react'
 
function App() {
  const firststyle = { color: 'blue', backgroundColor: 'yellow' }
 
  return (
    <div>
      <h1 style={firststyle}>Hi! Nusantech Academy</h1>
    </div>
  )
}
 
export default App

CSS Stylesheet

Cara kedua untuk melakukan styling pada komponen React, yaitu dengan membuat style di dalam file yang berbeda. Style yang kita buat diletakkan di dalam file dengan ekstensi “.css”. Kemudian kita import file tersebut di dalam komponen yang kita buat. Berikut contohnya. Misal, kita membuat komponen di dalam file App.js dan untuk style kita buat di dalam file App.css

Di file App.css

.firstStyle {
    color: blue;
    background-color: yellow;
}

Di file App.js

import React from 'react'
import './App.css'
 
function App() {
  return (
    <div>
      <h1 className="firstStyle">Hi! Nusantech Academy</h1>
    </div>
  )
}
 
export default App

Pada contoh di atas, CSS yang telah kita buat di file App.css, yaitu “firstStyle” kita jadikan sebagai nilai dari atribut “className”. 

CSS Modules

Cara ketiga untuk melakukan styling pada komponen React, yaitu dengan menggunakan CSS Modules. Seperti kita menggunakan CSS Stylesheet, kita letakkan CSS style di dalam file yang berbeda dengan komponen yang kita buat. Perbedaan terletak pada ekstensi file yang digunakan. Pada CSS Modules menggunakan ekstensi file “.module.css”. Berikut contohnya.

Di file App.module.css

.firstStyle {
    color: blue;
    background-color: yellow;
}

Di file App.js

import React from 'react'
import style from './App.module.css'
 
function App() {
  return (
    <div>
      <h1 className={style.firstStyle}>Hi! Nusantech Academy</h1>
    </div>
  )
}
export default App

Pada CSS Modules, style yang telah kita buat diimport sebagai objek Javascript dan CSS yang kita buat merupakan properti dari objek tersebut. Pada contoh di atas kita membuat CSS “firstStyle” yang merupakan properti dari objek yang kita beri nama “style”. Nama objek dapat kita ubah sesuai dengan yang kita inginkan. 

Penutup

Pada chapter ini, kita telah belajar tentang styling pada komponen React. Terdapat tiga cara untuk melakukan styling pada komponen React, yaitu Inline Styling, CSS Stylesheet, dan CSS Modules. Untuk styling sederhana seperti mengubah warna text saja, biasanya menggunakan Inline Styling. Sedangkan untuk styling secara kompleks biasanya menggunakan CSS Stylesheet atau CSS Modules. 

Sekian teman-teman penjelasan tentang styling pada komponen React. Semoga teman-teman bisa memahami dengan baik ya. Sampai jumpa di chapter selanjutnya 🙂 . See you! 

Quiz

Untuk mengasah kemampuan teman-teman terkait materi ini, kami berikan beberapa soal untuk teman-teman jawab. Quiz dapat dikerjakan di sini: