0
Login
Cheatsheet Dilihat: 103 kali

React JS Cheatsheet – Components, Hooks & Syntax Paling Sering Digunakan

Referensi cepat komponen, hooks, dan sintaks React JS yang paling sering digunakan untuk membangun aplikasi web modern.

#1 import React from 'react' 
Mengimpor library React
#2 import { useState } from 'react' 
Mengimpor hook useState
#3 import { useEffect } from 'react' 
Mengimpor hook useEffect
#4 import { useContext } from 'react' 
Mengimpor hook useContext
#5 import { useRef } from 'react' 
Mengimpor hook useRef
#6 import { useMemo } from 'react' 
Mengimpor hook useMemo
#7 import { useCallback } from 'react' 
Mengimpor hook useCallback
#8 import { useReducer } from 'react' 
Mengimpor hook useReducer
#9 import { useLayoutEffect } from 'react' 
Mengimpor hook useLayoutEffect
#10 import { useId } from 'react' 
Mengimpor hook useId
#11 import { useTransition } from 'react' 
Mengimpor hook useTransition
#12 import { useDeferredValue } from 'react' 
Mengimpor hook useDeferredValue
#13 import { useImperativeHandle } from 'react' 
Mengimpor hook useImperativeHandle
#14 import { forwardRef } from 'react' 
Mengimpor forwardRef
#15 import ReactDOM from 'react-dom' 
Mengimpor ReactDOM
#16 import ReactDOM from 'react-dom/client' 
Mengimpor ReactDOM client untuk React 18
#17 ReactDOM.createRoot() 
Membuat root React
#18 root.render(<App />) 
Render komponen utama
#19 function App() { return <div>Hello</div> } 
Membuat functional component
#20 const App = () => <div>Hello</div> 
Arrow function component
#21 export default App 
Export default komponen
#22 export function App() {} 
Named export komponen
#23 import App from './App' 
Import komponen
#24 import { Component } from './Component' 
Import named component
#25 return <div>Content</div> 
Return JSX dalam komponen
#26 <>...</> 
React Fragment untuk membungkus elemen tanpa div
#27 <React.Fragment></React.Fragment> 
Fragment versi lengkap
#28 {variable} 
Menampilkan variabel dalam JSX
#29 {1 + 2} 
Menjalankan ekspresi JavaScript dalam JSX
#30 const name='John'; <h1>{name}</h1> 
Menampilkan variabel di JSX
#31 items.map(item => <li>{item}</li>) 
Loop data dengan map
#32 key={id} 
Menambahkan key pada list
#33 onClick={handleClick} 
Event click handler
#34 onChange={handleChange} 
Event change handler
#35 onSubmit={handleSubmit} 
Event submit form
#36 onMouseEnter={handleHover} 
Event hover
#37 style={{color:'red'}} 
Inline styling JSX
#38 className='container' 
Class CSS dalam JSX
#39 htmlFor='inputId' 
Pengganti for pada label
#40 dangerouslySetInnerHTML 
Menampilkan HTML raw
#41 useState() 
Hook untuk state
#42 setCount(count+1) 
Update state
#43 useEffect(()=>{}) 
Effect dijalankan setiap render
#44 return ()=>{} 
Cleanup function pada useEffect
#45 useRef() 
Hook untuk referensi DOM
#46 const ref=useRef(null) 
Membuat ref
#47 ref.current 
Mengakses nilai ref
#48 <input ref={inputRef} /> 
Menghubungkan ref dengan elemen
#49 useContext(Context) 
Menggunakan context
#50 const ThemeContext=createContext() 
Membuat context
#51 <ThemeContext.Provider value={theme}> 
Provider context
#52 dispatch({type:'increment'}) 
Dispatch action reducer
#53 lazy(()=>import('./Component')) 
Lazy loading component
#54 <Suspense fallback={<Loading/>}> 
Suspense loading fallback
#55 React.memo(Component) 
Memoization component
#56 PropTypes.string 
Validasi prop string
#57 PropTypes.number 
Validasi prop number
#58 PropTypes.bool 
Validasi prop boolean
#59 PropTypes.array 
Validasi prop array
#60 PropTypes.object 
Validasi prop object
#61 defaultProps 
Default value props
#62 <input value={value} onChange={e=>setValue(e.target.value)} /> 
Controlled component
#63 <form onSubmit={handleSubmit}> 
Form handler
#64 event.preventDefault() 
Mencegah reload form
#65 useTransition() 
Hook concurrent rendering
#66 startTransition(()=>setState()) 
Menjalankan update non-urgent
#67 useDeferredValue(value) 
Menunda update nilai
#68 const id=useId() 
Membuat id unik
#69 useLayoutEffect(()=>{}) 
Effect sebelum paint DOM
#70 const list=[...items] 
Spread operator array
#71 const newObj={...obj} 
Spread object
#72 props.children 
Mengakses child komponen
#73 const {title}=props 
Destructuring props
#74 function Button({title}){} 
Props destructuring parameter
#75 <ChildComponent prop='value' /> 
Mengirim props
#76 props.prop 
Mengakses props
#77 if(condition) return <A/> 
Conditional rendering
#78 condition && <Component/> 
Conditional render AND
#79 condition ? <A/> : <B/> 
Ternary rendering
#80 Array.from() 
Konversi iterable ke array
#81 Object.keys(obj) 
Mengambil key object
#82 Object.values(obj) 
Mengambil value object
#83 JSON.stringify(obj) 
Convert object ke JSON
#84 fetch('/api') 
HTTP request
#85 axios.get('/api') 
HTTP request dengan axios
#86 try{...}catch(e){...} 
Error handling
#87 clearInterval(id) 
Menghapus interval
#88 localStorage.getItem('key') 
Ambil data dari localStorage
#89 window.location.href='/home' 
Redirect halaman
#90 navigate('/home') 
Navigasi React Router
#91 import {BrowserRouter} from 'react-router-dom' 
Router utama
#92 <Route path='/' element={<Home/>}/> 
Route halaman
#93 <Link to='/about'> 
Link navigasi
#94 useParams() 
Mengambil parameter URL
#95 useNavigate() 
Navigasi programmatic
#96 useLocation() 
Mengambil info lokasi URL