React Fundamental: Panduan Lengkap Belajar Library JavaScript Paling Populer 2024

By | September 27, 2025
0 Comment

 

React Fundamental: Panduan Lengkap Belajar Library JavaScript Paling Populer 2024

Pernah nggak sih kamu penasaran kenapa React.js jadi begitu populer? Dari startup sampai perusahaan besar seperti Facebook, Netflix, dan Airbnb—semua pakai React. Tapi waktu coba belajar sendiri, kok malah pusing dengan konsep-konsep yang katanya “fundamental” tapi terasa abstrak banget? Tenang, kamu nggak sendirian!

React itu sebenarnya seperti bermain LEGO. Kamu bikin komponen-komponen kecil (seperti brick LEGO), lalu menyusunnya jadi aplikasi yang kompleks. Yang bikin React spesial adalah cara berpikirnya yang modular dan reusable. Sekali kamu paham konsep dasarnya, semuanya akan masuk akal dan bahkan menyenangkan!

Di panduan fundamental ini, kita akan belajar React dari nol absolut. Saya janji bakal pakai analogi yang mudah dimengerti dan contoh code yang realistic. Kita akan hindari jargon-jargon teknis yang bikin mumet. Ready to build your first React app? Let’s dive in!

Apa Itu React.js dan Kenapa Dia Begitu Populer?

React adalah JavaScript library untuk membangun user interfaces—bukan framework lengkap seperti Angular. Pikirkan React seperti “engine” untuk bagian UI saja.

Analoginya: Kalau bikin mobil, React itu seperti mesinnya. Kamu masih butuh parts lain (transmisi, roda, dll) untuk mobil yang lengkap. Tapi dengan mesin yang bagus, mobil bisa jalan dengan powerful!

7 Alasan React Jadi Pilihan Utama Developer

  1. Component-Based Architecture: Bikin UI seperti menyusun LEGO
  2. Virtual DOM: Performance lebih cepat karena minim manipulasi DOM langsung
  3. Reusable Components: Write once, use everywhere
  4. Large Ecosystem: Ribuan library dan tools pendukung
  5. Great Developer Experience: Hot reload, error boundaries, dev tools
  6. Strong Community: Banyak resources belajar dan support
  7. Job Opportunities: Demand tinggi di pasar kerja

Setup Development Environment

Sebelum coding, kita perlu siapkan “panggung”-nya dulu. Untuk pemula, saya rekomendasikan menggunakan Create React App.

1. Install Node.js dan npm

Download dari website Node.js (versi LTS recommended). npm otomatis terinstall bersama Node.js.

2. Create React App

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

Voila! Aplikasi React pertamamu sudah jalan di http://localhost:3000

3. Struktur Project Dasar

my-first-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
└── package.json

Konsep Fundamental React yang Wajib Dipahami

1. JSX: JavaScript + XML

JSX adalah syntax extension yang membuat kita bisa nulis HTML-like code di JavaScript.

// ❌ Bukan HTML biasa!
const element = <h1>Hello, World!</h1>;

// ✅ JSX yang valid
function Welcome() {
  return (
    <div>
      <h1>Hello React!</h1>
      <p>Selamat belajar JSX</p>
    </div>
  );
}

Rules JSX:

  • Hanya boleh return satu parent element (gunakan <></> fragment)
  • Attribute pakai camelCase (className, not class)
  • Self-closing tags harus ditutup (<img />, not <img>)

2. Components: Building Blocks of React

Component adalah fungsi JavaScript yang return JSX. Ada dua jenis component:

Function Components (Modern)

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Atau dengan Arrow Function
const Welcome = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

Class Components (Legacy)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Untuk pemula, fokus ke Function Components saja—lebih simple dan modern.

3. Props: Data Flow ke Components

Props seperti parameter fungsi—digunakan untuk passing data dari parent ke child component.

// Parent Component
function App() {
  return (
    <div>
      <Welcome name="Budi" age={25} />
      <Welcome name="Sari" age={30} />
    </div>
  );
}

// Child Component
function Welcome(props) {
  return (
    <div>
      <h2>Hello {props.name}!</h2>
      <p>Usia: {props.age} tahun</p>
    </div>
  );
}

4. State: Data yang Bisa Berubah

State adalah data yang bisa berubah selama component hidup. Gunakan useState hook untuk manage state.

import { useState } from 'react';

function Counter() {
  // [currentValue, setterFunction] = useState(initialValue)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Tambah
      </button>
      <button onClick={() => setCount(count - 1)}>
        Kurang
      </button>
    </div>
  );
}

Event Handling di React

Event handling di React mirip dengan DOM, tapi dengan beberapa perbedaan:

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Login dengan:', username, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input 
        type="password" 
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Conditional Rendering: Tampilkan Content Berdasarkan Kondisi

Beberapa cara conditional rendering di React:

1. Ternary Operator

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign up.</h1>
      )}
    </div>
  );
}

2. Logical && Operator

function Notification({ message }) {
  return (
    <div>
      {message && <div className="alert">{message}</div>}
    </div>
  );
}

3. If Statement di Luar JSX

function UserProfile({ user }) {
  let content;
  
  if (user) {
    content = <div>Hello {user.name}</div>;
  } else {
    content = <div>Please login</div>;
  }
  
  return <div>{content}</div>;
}

List Rendering dengan map()

Render list data dengan method map(). Jangan lupa key prop!

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build project', completed: true },
    { id: 3, text: 'Deploy app', completed: false }
  ];

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <span style={{
            textDecoration: todo.completed ? 'line-through' : 'none'
          }}>
            {todo.text}
          </span>
        </li>
      ))}
    </ul>
  );
}

Important: Key harus unique dan stable untuk performance optimization.

React Hooks Fundamental

Hooks adalah fungsi yang memungkinkan kita menggunakan state dan lifecycle features di function components.

1. useState – Manage State

const [state, setState] = useState(initialValue);

2. useEffect – Side Effects

Untuk data fetching, subscriptions, atau DOM manipulations.

useEffect(() => {
  // Code yang dijalankan setelah render
  document.title = `You clicked ${count} times`;
}, [count]); // Hanya re-run jika count berubah

3. useContext – Global State

const value = useContext(MyContext);

Building Your First Complete React App: Todo List

Mari kita praktikkan semua konsep dengan bikin Todo List app sederhana.

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, {
        id: Date.now(),
        text: inputValue,
        completed: false
      }]);
      setInputValue('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="todo-app">
      <h1>My Todo List</h1>
      
      <div className="add-todo">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="Add new todo..."
        />
        <button onClick={addTodo}>Add</button>
      </div>

      <ul className="todo-list">
        {todos.map(todo => (
          <li key={todo.id} className={todo.completed ? 'completed' : ''}>
            <span onClick={() => toggleTodo(todo.id)}>
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>

      <div className="stats">
        Total: {todos.length} | 
        Completed: {todos.filter(t => t.completed).length}
      </div>
    </div>
  );
}

export default TodoApp;

Styling di React

Beberapa approach styling yang populer:

1. CSS Modules (Recommended untuk Pemula)

// TodoItem.module.css
.todoItem {
  padding: 10px;
  border: 1px solid #ddd;
  margin: 5px 0;
}

.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

// TodoItem.js
import styles from './TodoItem.module.css';

function TodoItem({ todo }) {
  return (
    <div className={`${styles.todoItem} ${todo.completed ? styles.completed : ''}`}>
      {todo.text}
    </div>
  );
}

2. Styled Components

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  padding: 10px 20px;
  border: 2px solid blue;
`;

3. Tailwind CSS

function Button({ children, primary }) {
  const classes = primary 
    ? 'bg-blue-500 text-white' 
    : 'bg-white text-blue-500';
  
  return (
    <button className={`px-4 py-2 border-2 border-blue-500 ${classes}`}>
      {children}
    </button>
  );
}

Best Practices untuk Pemula

  1. Component Naming: Gunakan PascalCase untuk component names
  2. Small Components: Buat components kecil dan focused
  3. Props Validation: Gunakan PropTypes atau TypeScript
  4. Key Prop: Selalu gunakan unique key untuk list items
  5. State Immutability: Jangan langsung mutate state

Common Mistakes Pemula dan Solusinya

Mistake Problem Solution
Lupa key prop di list Performance issues, unexpected behavior Selalu gunakan unique key
Mutate state langsung Component tidak re-render Gunakan setState atau functional update
Too many re-renders Infinite loop Check dependencies di useEffect
Complex components Hard to maintain Break down into smaller components

Next Steps setelah Menguasai Fundamental

  • React Router: Untuk navigation dan routing
  • State Management: Redux, Zustand, atau Context API
  • API Integration: Fetch data dari backend
  • Testing: Jest dan React Testing Library
  • Performance Optimization: Memo, useMemo, useCallback

Resources Belajar React Lainnya

  • Official React Docs: reactjs.org (sangat recommended!)
  • React Tutorial: Official tutorial dengan game tic-tac-toe
  • FreeCodeCamp: Interactive React course gratis
  • YouTube Channels: Traversy Media, The Net Ninja

React fundamental itu seperti belajar naik sepeda—awalnya terasa awkward, tapi sekali kamu dapat “feel”-nya, semuanya akan terasa natural. Kunci utamanya adalah practice dan jangan takut experiment dengan code.

Remember: Every expert was once a beginner. Start building, make mistakes, learn, and repeat. Happy coding! 🚀