Published

React Js Cheat Sheet

Published
Gaudhiwaa Hendrasto
Daftar Isi

1. Components

1.1 Functional Components

Digunakan untuk membuat komponen sederhana yang hanya membutuhkan render UI tanpa kebutuhan untuk melacak status (state).

import React from 'react'

const FunctionalComponent = () => {
  return <div>This is a functional component</div>
}

export default FunctionalComponent

1.2 Class Components

Digunakan ketika kita membutuhkan manajemen status (state) atau menggunakan fitur-fitur khusus lainnya seperti lifecycle methods.

import React, { Component } from 'react'

class ClassComponent extends Component {
  render() {
    return <div>This is a class component</div>
  }
}

1.3 JSX (JavaScript XML) Syntax

Untuk membuat elemen-elemen UI. JSX adalah kombinasi antara JavaScript dan XML.

import React from 'react'

const JSXComponent = () => {
  return (
    <div>
      <h1>Hello, JSX!</h1>
      <p>This is JSX syntax in React.</p>
    </div>
  )
}

export default JSXComponent

2. Props (Properties)

2.1 Passing Props

Props (properties) adalah cara untuk melewatkan data dari satu komponen ke komponen lain di React.

import React from 'react'

const Greeting = (props) => {
  return <div>Hello, {props.name}!</div>
}

export default Greeting

// Usage: <Greeting name="John" />

Dengan cara ini, kita dapat menggunakan komponen Greeting di mana saja dalam aplikasi dan memberikan nama yang berbeda melalui prop "name".

2.2 Default props

Default Props adalah nilai default yang akan digunakan oleh sebuah prop jika tidak ada nilai yang diberikan untuk prop tersebut.

import React from 'react'

const Greeting = (props) => {
  return <div>Hello, {props.name}!</div>
}

Greeting.defaultProps = {
  name: 'Guest',
}

export default Greeting

// Usage: <Greeting />

Dalam contoh ini, kita menetapkan nilai default "Guest" untuk prop "name" dalam komponen Greeting.

2.3 Prop Types

Prop types adalah cara untuk menentukan tipe data yang diharapkan untuk setiap prop dalam sebuah komponen. Dengan prop types, kita dapat memvalidasi prop-prop yang diberikan agar sesuai dengan tipe data yang diharapkan.

import React from 'react'
import PropTypes from 'prop-types'

const Greeting = (props) => {
  return <div>Hello, {props.name}!</div>
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
}

export default Greeting

// Usage: <Greeting name="John" />

Dalam contoh ini, kita menetapkan prop "name" harus berupa string dan harus disediakan.

3. State

3.1 useState Hook

Dengan menggunakan useState, kita dapat mengubah nilai state dan merender ulang komponen setiap kali nilai state berubah.

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default Counter

Saat tombol ditekan, nilai count akan bertambah dan komponen akan dirender ulang dengan nilai count yang baru.

3.2 Class Component State

State pada class component digunakan untuk menyimpan data yang berubah seiring waktu dan memengaruhi render UI.

import React, { Component } from 'react'

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    )
  }
}

export default Counter

Pada class component kita menggunakan constructor untuk menginisialisasi state awal dan kemudian mengubahnya menggunakan metode setState().

3.3 Immutable State

Berbeda dengan useState Hook di atas, Immutable State membantu memastikan bahwa kita menggunakan nilai status yang paling baru setiap kali perubahan dilakukan. Cara ini meminimalisir potensi masalah karena tanpa memperhatikan perubahan yang mungkin terjadi.

import React, { useState } from 'react'

const ImmutableCounter = () => {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount((prevCount) => prevCount + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default ImmutableCounter

4. Lifecycle Methods (Class Components)

4.1 componentDidMount

componentDidMount adalah metode life cycle yang dipanggil setelah komponen berhasil dirender ke DOM. Ini digunakan untuk melakukan tugas-tugas yang memerlukan akses ke DOM atau untuk melakukan permintaan data ke server.

import React, { Component } from 'react'

class LifecycleComponent extends Component {
  componentDidMount() {
    console.log('Component mounted')
  }

  render() {
    return <div>Lifecycle Component</div>
  }
}

export default LifecycleComponent

4.2 componentDidUpdate

componentDidUpdate adalah metode life cycle yang dipanggil setelah pembaruan (update) komponen. Ini digunakan untuk mengeksekusi kode setelah pembaruan komponen, misalnya ketika nilai state atau prop berubah.

import React, { Component } from 'react'

class LifecycleComponent extends Component {
  state = {
    count: 0,
  }

  componentDidMount() {
    console.log('Component mounted')
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log('Count updated')
    }
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment Count
        </button>
      </div>
    )
  }
}

export default LifecycleComponent

4.3 componentWillUnmount

componentWillUnmount adalah metode life cycle yang dipanggil sebelum sebuah komponen dihapus dari DOM. Ini digunakan untuk membersihkan sumber daya yang digunakan oleh komponen, seperti penghapusan event listener atau pembatalan permintaan jaringan yang tertunda.

import React, { Component } from 'react'

class LifecycleComponent extends Component {
  componentDidMount() {
    console.log('Component mounted')
  }

  componentWillUnmount() {
    console.log('Component will unmount')
  }

  render() {
    return <div>Lifecycle Component</div>
  }
}

export default LifecycleComponent

5. Hooks (Functional Components)

5.1 useState

useState adalah hook yang digunakan untuk menambahkan state ke dalam functional component. Dengan useState, kita bisa membuat variabel state dan sebuah fungsi untuk mengubah nilai dari state tersebut.

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter

5.2 useEffect

useEffect digunakan untuk menangani efek samping dalam functional component, contohnya fetching data, update DOM secara langsung, dan timer.

import React, { useState, useEffect } from 'react'

function Timer() {
  const [seconds, setSeconds] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1)
    }, 1000)

    return () => clearInterval(interval)
  }, [seconds])

  return <div>Seconds: {seconds}</div>
}

export default Timer

Pada contoh ini, kita menggunakan useEffect untuk membuat timer yang mengupdate nilai setiap detik.

5.3 useContext

useContext adalah hook yang digunakan untuk mengakses nilai dari sebuah context di dalam functional component. Context memungkinkan kita untuk melewati data tanpa harus melewati prop secara manual.

import React, { useContext } from 'react'

const ThemeContext = React.createContext('light')

function ThemeToggle() {
  const theme = useContext(ThemeContext)

  return <button>{theme === 'light' ? 'Switch to Dark' : 'Switch to Light'}</button>
}

export default ThemeToggle

5.4 useReducer

useReducer adalah hook yang mirip dengan reducer dalam Redux. Ini digunakan untuk mengelola state yang lebih kompleks dengan aturan pembaruan yang lebih kompleks.

import React, { useReducer } from 'react'

const initialState = { count: 0 }

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    default:
      throw new Error()
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  )
}

export default Counter

5.5 useCallback

useCallback digunakan untuk memorisasi fungsi callback sehingga fungsi tersebut tidak dibuat ulang setiap kali komponen dirender ulang. Ini membantu dalam mengoptimalkan kinerja komponen.

import React, { useState, useCallback } from 'react'

function MemoizedComponent() {
  const [count, setCount] = useState(0)

  const increment = useCallback(() => {
    setCount(count + 1)
  }, [count])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default MemoizedComponent

5.6 useMemo

useMemo digunakan untuk menghitung komputasi yang mahal dan menyimpan nilainya agar tidak dihitung ulang setiap kali komponen dirender ulang.

import React, { useMemo } from 'react'

function ExpensiveCalculation({ value }) {
  const result = useMemo(() => {
    // Perform expensive calculation here
    return value * 2
  }, [value])

  return <div>Result: {result}</div>
}

export default ExpensiveCalculation

5.7 useRef

useRef digunakan untuk membuat referensi ke elemen DOM atau nilai lain di dalam functional component. Ini berguna ketika kita perlu mengakses atau memanipulasi elemen DOM secara langsung.

import React, { useRef } from 'react'

function FocusInput() {
  const inputRef = useRef(null)

  const handleClick = () => {
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  )
}

export default FocusInput

6. Conditional Rendering

6.1 If Statements

Digunakan untuk melakukan pengujian kondisi dan menentukan apakah suatu komponen harus dirender atau tidak berdasarkan kondisi yang diberikan.

import React from 'react'

const ConditionalComponent = ({ condition }) => {
  if (condition) {
    return <div>This component is rendered conditionally.</div>
  } else {
    return <div>This component is not rendered.</div>
  }
}

export default ConditionalComponent

6.2 Ternary Operators

Cara lain untuk melakukan pengujian kondisi dalam satu baris kode.

import React from 'react'

const ConditionalComponent = ({ condition }) => {
  return condition ? (
    <div>This component is rendered conditionally.</div>
  ) : (
    <div>This component is not rendered.</div>
  )
}

export default ConditionalComponent

6.3 Logical && Operator

Digunakan ketika kita hanya perlu melakukan rendering berdasarkan satu kondisi.

import React from 'react'

const ConditionalComponent = ({ condition }) => {
  return condition && <div>This component is rendered conditionally.</div>
}

export default ConditionalComponent

7. Lists and Keys

7.1 Rendering Lists and Keys

Ketika kita ingin merender daftar item dalam React, kita dapat menggunakan fungsi map untuk mengubah setiap item dalam array menjadi elemen HTML yang sesuai. Kunci (keys) dalam daftar React membantu React untuk mengidentifikasi item mana yang telah ditambahkan, dihapus, atau diubah. Biasanya, kunci ini adalah id unik dari setiap item dalam daftar.

import React from 'react'

const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  )
}

export default ListComponent

8. Component Composition

8.1 Children Props

Props children digunakan untuk mengirimkan elemen atau konten ke dalam komponen sebagai anak-anaknya. Ini memungkinkan kita untuk menambahkan konten apa pun di dalam komponen tersebut, yang akan dirender sesuai dengan struktur yang telah ditentukan.

import React from 'react'

const Card = ({ title, children }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </div>
  )
}

export default Card

9. React Router

9.1 BrowserRouter

BrowserRouter digunakan untuk mengelola riwayat perambanan dan membuat aplikasi React dapat berfungsi sebagai aplikasi web dengan banyak halaman. Ini biasanya digunakan sebagai pembungkus tingkat atas di sekitar seluruh aplikasi.

import React from 'react'
import { BrowserRouter } from 'react-router-dom'

const App = () => {
  return <BrowserRouter>{/* Your route components here */}</BrowserRouter>
}

export default App

9.2 Route

Route digunakan untuk menentukan kapan dan bagaimana sebuah komponen harus dirender berdasarkan URL saat ini. Ini adalah elemen dasar dalam menentukan navigasi dan tata letak halaman dalam aplikasi React.

import React from 'react'
import { Route } from 'react-router-dom'

const Home = () => {
  return <div>Home Component</div>
}

const About = () => {
  return <div>About Component</div>
}

const App = () => {
  return (
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  )
}

export default App

Link digunakan untuk membuat tautan dalam aplikasi React yang mengarah ke rute tertentu. Ini digunakan sebagai pengganti tag <a> tradisional untuk navigasi dalam aplikasi React.

import React from 'react'
import { Link } from 'react-router-dom'

const Navbar = () => {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  )
}

export default Navbar

9.4 Switch

Switch digunakan untuk memastikan bahwa hanya satu rute yang cocok/exact akan dirender pada suatu waktu.

import React from 'react'
import { Switch, Route } from 'react-router-dom'

const Home = () => {
  return <div>Home Component</div>
}

const About = () => {
  return <div>About Component</div>
}

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  )
}

export default App

9.5 Route Parameters

Route parameters digunakan untuk menangkap nilai dinamis dari URL dan menggunakannya dalam komponen yang dirender.

import React from 'react'
import { Route } from 'react-router-dom'

const UserProfile = ({ match }) => {
  const { username } = match.params

  return <div>User Profile: {username}</div>
}

const App = () => {
  return <Route path="/profile/:username" component={UserProfile} />
}

export default App

10. Context API

10.1 Creating Context

Dalam contoh ini, kita menggunakan Context API untuk menyimpan dan membagikan data pengguna dari API.

import React, { createContext, useContext } from 'react'

const ThemeContext = createContext()

const ThemeProvider = ({ children }) => {
  const theme = 'light' // Example theme
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
}

export { ThemeProvider, ThemeContext }

Komponen UserProvider bertanggung jawab untuk menyediakan nilai data pengguna ke dalam konteks. Penggunaan useState digunakan untuk menyimpan data pengguna, dan useEffect digunakan untuk mengambil data pengguna dari API ketika komponen dimuat.

10.2 useContext Hook

Dalam komponen UserDataComponent, kita menggunakan hook useContext untuk mengakses nilai data pengguna dari konteks UserContext.

import React, { createContext, useContext, useState, useEffect } from 'react'

const UserContext = createContext()

const UserProvider = ({ children }) => {
  const [userData, setUserData] = useState(null)

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await fetch('https://api.example.com/user')
        const userData = await response.json()
        setUserData(userData)
      } catch (error) {
        console.error('Error fetching user data:', error)
      }
    }

    fetchUserData()
  }, [])

  return <UserContext.Provider value={userData}>{children}</UserContext.Provider>
}

export { UserProvider, UserContext }

11. Redux

11.1 Actions

Actions adalah objek JavaScript yang menggambarkan perubahan yang ingin kita lakukan pada state aplikasi. Biasanya, sebuah action memiliki properti type yang menunjukkan jenis perubahan yang akan dilakukan.

export const increment = () => {
  return {
    type: 'INCREMENT',
  }
}

export const decrement = () => {
  return {
    type: 'DECREMENT',
  }
}

11.2 Reducers

Reducers adalah fungsi-fungsi JavaScript yang menerima state dan action sebagai argumen, dan mengembalikan state baru berdasarkan action yang diterima. Mereka adalah bagian yang bertanggung jawab untuk mengelola perubahan state aplikasi.

const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    case 'DECREMENT':
      return { count: state.count - 1 }
    default:
      return state
  }
}

export default counterReducer

11.3 Store

Store adalah objek JavaScript yang menggabungkan reducer dan menyimpan seluruh state aplikasi. Store adalah pusat dari Redux, yang mengatur aliran data dalam aplikasi.

import { createStore } from 'redux'
import counterReducer from './reducer'

const store = createStore(counterReducer)

export default store

11.4 Connect Function (React-Redux)

Connect adalah fungsi yang disediakan oleh React-Redux yang menghubungkan komponen React dengan store Redux. Ini memungkinkan komponen untuk mengakses state dan fungsi aksi dari store Redux.

import React from 'react'
import { connect } from 'react-redux'
import { increment, decrement } from './actions'

const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    count: state.count,
  }
}

export default connect(mapStateToProps, { increment, decrement })(Counter)

12. Forms

12.1 Handling Form Data

Pada contoh ini, kita menggunakan hook useState untuk membuat sebuah formulir yang mengelola data input.

import React, { useState } from 'react'

const FormComponent = () => {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  })

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData({ ...formData, [name]: value })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(formData) // Process form data
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Submit</button>
    </form>
  )
}

export default FormComponent

Setiap kali nilai input berubah, fungsi handleChange akan dipanggil untuk memperbarui data formulir dengan menggunakan setFormData. Saat formulir disubmit, fungsi handleSubmit akan dipanggil untuk melakukan proses pada data formulir yang telah diisi.

12.2 Controlled Components

Controlled components adalah elemen formulir di React yang nilai-nilainya dikendalikan oleh state React.

import React, { useState } from 'react'

const ControlledComponent = () => {
  const [inputValue, setInputValue] = useState('')

  const handleChange = (e) => {
    setInputValue(e.target.value)
  }

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Controlled Input"
      />
      <p>Input Value: {inputValue}</p>
    </div>
  )
}

export default ControlledComponent

Pada contoh ini, nilai input dikelola oleh hook useState, dan setiap kali nilai input berubah, state akan diperbarui dan nilai input akan dipantulkan kembali ke komponen.

12.3 Uncontrolled Components

Uncontrolled components adalah elemen formulir di React yang nilai-nilainya tidak dikendalikan oleh state React.

import React, { useRef } from 'react'

const UncontrolledComponent = () => {
  const inputRef = useRef()

  const handleClick = () => {
    alert(`Input Value: ${inputRef.current.value}`)
  }

  return (
    <div>
      <input type="text" ref={inputRef} placeholder="Uncontrolled Input" />
      <button onClick={handleClick}>Get Value</button>
    </div>
  )
}

export default UncontrolledComponent

Pada contoh ini, kita menggunakan ref untuk mengakses nilai input. Saat tombol diklik, nilai dari input yang tidak terkendali akan diambil langsung dari elemen DOM menggunakan ref.

Ditulis oleh Gaudhiwaa Hendrasto