Belajar React JS untuk Pemula 2026: Tutorial Lengkap dari Nol

React JS adalah library JavaScript paling populer untuk membuat user interface. Di artikel ini, kita akan belajar React dari nol sampai bisa bikin aplikasi web modern. Cocok banget untuk pemula!

Apa Itu React JS?

React adalah JavaScript library untuk building user interfaces, dibuat oleh Facebook (sekarang Meta) tahun 2013.

Kenapa React Populer?

1. Component-Based

UI dipecah jadi component kecil
Reusable & maintainable
Easy to test

2. Virtual DOM

Update UI super cepat
Efficient rendering
Better performance

3. Huge Ecosystem

Banyak library pendukung
Large community
Tons of resources

4. Job Market

Paling banyak dicari perusahaan
Gaji tinggi (Rp 8-20 juta/bulan)
Remote work friendly

5. Learn Once, Write Anywhere

Web (React)
Mobile (React Native)
Desktop (Electron)

Persiapan: Yang Perlu Disiapkan

1. JavaScript Fundamentals

Sebelum belajar React, pastikan paham:

Variables (let, const)
Functions & arrow functions
Arrays & objects
Array methods (map, filter, reduce)
Destructuring
Spread operator
Promises & async/await
ES6+ syntax

2. HTML & CSS Basics

HTML tags & structure
CSS selectors & properties
Flexbox & Grid
Responsive design

3. Tools yang Dibutuhkan

Node.js & npm Download: https://nodejs.org (LTS version)

node --version  # v20.x.x
npm --version   # v10.x.x

Code Editor

VS Code (recommended)
WebStorm
Sublime Text

VS Code Extensions:

ES7+ React/Redux/React-Native snippets
Prettier
ESLint
Auto Rename Tag

Setup Project React

Cara 1: Create React App (CRA) - Deprecated 2024

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

Note: CRA sudah tidak recommended di 2026. Gunakan Vite!

Cara 2: Vite (Recommended 2026)

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Keunggulan Vite:

Super fast (10x lebih cepat dari CRA)
Hot Module Replacement (HMR) instant
Modern build tool
Smaller bundle size

Struktur Project

my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── index.html
├── package.json
└── vite.config.js

Konsep Dasar React

1. JSX (JavaScript XML)

JSX adalah syntax extension untuk JavaScript yang mirip HTML.

// JSX
const element = <h1>Hello, React!</h1>;

// Compiled to JavaScript
const element = React.createElement('h1', null, 'Hello, React!');

Rules JSX:

Harus ada 1 parent element
Use className instead of class
Use htmlFor instead of for
Self-closing tags harus ada /
JavaScript expression dalam {}

function App() {
  const name = "John";
  const age = 25;
  
  return (
    <div className="container">
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old</p>
      <p>Next year: {age + 1}</p>
    </div>
  );
}

2. Components

Component adalah building block React. Ada 2 jenis:

Function Component (Modern)

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

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

// Implicit return
const Welcome = ({ name }) => <h1>Hello, {name}</h1>;

Class Component (Legacy)

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

Recommendation: Gunakan Function Component + Hooks (modern way).

3. Props

Props adalah data yang dikirim dari parent ke child component.

// Parent
function App() {
  return (
    <div>
      <Welcome name="John" age={25} />
      <Welcome name="Jane" age={23} />
    </div>
  );
}

// Child
function Welcome({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  );
}

Props Rules:

Read-only (immutable)
Passed from parent to child
Can be any data type

4. State

State adalah data internal component yang bisa berubah.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

State Rules:

Mutable (bisa diubah)
Private to component
Triggers re-render when updated
Update via setter function

5. Event Handling

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };
  
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      
      <form onSubmit={handleSubmit}>
        <input type="text" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Common Events:

onClick
onChange
onSubmit
onMouseEnter
onMouseLeave
onKeyDown
onFocus
onBlur

6. Conditional Rendering

function Greeting({ isLoggedIn }) {
  // If-else
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in</h1>;
  
  // Ternary operator
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in</h1>}
    </div>
  );
  
  // Logical AND
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
}

7. Lists & Keys

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build project' },
    { id: 3, text: 'Get job' }
  ];
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Key Rules:

Must be unique among siblings
Use stable ID (not index)
Helps React identify changes

React Hooks

Hooks adalah functions yang let you “hook into” React features.

1. useState

Manage component state.

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

// Example
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const [isActive, setIsActive] = useState(false);
const [items, setItems] = useState([]);
const [user, setUser] = useState({ name: '', email: '' });

2. useEffect

Side effects (API calls, subscriptions, timers).

import { useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);
  
  // Run once on mount
  useEffect(() => {
    fetchData();
  }, []);
  
  // Run when dependency changes
  useEffect(() => {
    console.log('Count changed');
  }, [count]);
  
  // Cleanup
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);
    
    return () => clearInterval(timer);
  }, []);
}

Dependency Array:

[] - run once on mount
[dep] - run when dep changes
No array - run on every render

3. useContext

Share data without prop drilling.

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Button</button>;
}

4. useRef

Access DOM elements or persist values.

import { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);
  
  const focusInput = () => {
    inputRef.current.focus();
  };
  
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

5. useMemo & useCallback

Performance optimization.

import { useMemo, useCallback } from 'react';

function Example({ items }) {
  // Memoize expensive calculation
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);
  
  // Memoize function
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);
  
  return <div>Total: {total}</div>;
}

Project: Todo App

Mari kita buat Todo App lengkap!

import { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
  
  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, {
        id: Date.now(),
        text: input,
        completed: false
      }]);
      setInput('');
    }
  };
  
  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="app">
      <h1>Todo App</h1>
      
      <div className="input-container">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(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' : ''}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span>{todo.text}</span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
      
      <div className="stats">
        <p>Total: {todos.length}</p>
        <p>Completed: {todos.filter(t => t.completed).length}</p>
        <p>Active: {todos.filter(t => !t.completed).length}</p>
      </div>
    </div>
  );
}

export default App;

React Router

Untuk multi-page application.

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/user/:id" element={<User />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Fetch Data dari API

import { useState, useEffect } from 'react';

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Best Practices

1. Component Organization

src/
├── components/
│   ├── common/
│   │   ├── Button.jsx
│   │   └── Input.jsx
│   ├── layout/
│   │   ├── Header.jsx
│   │   └── Footer.jsx
│   └── features/
│       └── TodoList.jsx
├── hooks/
│   └── useFetch.js
├── utils/
│   └── helpers.js
└── App.jsx

2. Naming Conventions

Components: PascalCase (UserProfile.jsx)
Functions: camelCase (handleClick)
Constants: UPPER_SNAKE_CASE (API_URL)
Files: match component name

3. Props Destructuring

// Good
function User({ name, age, email }) {
  return <div>{name}</div>;
}

// Bad
function User(props) {
  return <div>{props.name}</div>;
}

4. Key Prop

// Good
{items.map(item => <Item key={item.id} {...item} />)}

// Bad
{items.map((item, index) => <Item key={index} {...item} />)}

5. Conditional Rendering

// Good
{isLoading && <Spinner />}
{error && <Error message={error} />}

// Bad
{isLoading ? <Spinner /> : null}

Next Steps

Setelah mahir React basics, lanjut belajar:

State Management: Redux, Zustand, Jotai
Styling: Tailwind CSS, styled-components, CSS Modules
Forms: React Hook Form, Formik
Testing: Jest, React Testing Library
TypeScript: Type-safe React
Next.js: React framework untuk production
React Native: Mobile app development

Resources Belajar

Official

React.dev (new docs)
React Tutorial
React Hooks

YouTube

Web Dev Simplified
Traversy Media
Codevolution
Programming with Mosh

Practice

Frontend Mentor
React Challenges
Build real projects

Kesimpulan

React JS adalah skill yang sangat valuable di 2026. Dengan menguasai React, Anda bisa:

Build modern web apps
Get high-paying jobs
Freelance dengan rate tinggi
Expand ke React Native

Key takeaways:

Start with JavaScript fundamentals
Use Vite for new projects
Master hooks (useState, useEffect)
Build real projects
Practice consistently

Belajar React JS untuk Pemula 2026: Tutorial Lengkap dari Nol

Belajar React JS untuk Pemula 2026: Tutorial Lengkap dari Nol

Apa Itu React JS?

Kenapa React Populer?

Persiapan: Yang Perlu Disiapkan

1. JavaScript Fundamentals

2. HTML & CSS Basics

3. Tools yang Dibutuhkan

Setup Project React

Cara 1: Create React App (CRA) - Deprecated 2024

Cara 2: Vite (Recommended 2026)

Struktur Project

Konsep Dasar React

1. JSX (JavaScript XML)

2. Components

3. Props

4. State

5. Event Handling

6. Conditional Rendering

7. Lists & Keys

React Hooks

1. useState

2. useEffect

3. useContext

4. useRef

5. useMemo & useCallback

Project: Todo App

React Router

Fetch Data dari API

Best Practices

1. Component Organization

2. Naming Conventions

3. Props Destructuring

4. Key Prop

5. Conditional Rendering

Next Steps

Resources Belajar

Official

YouTube

Practice

Kesimpulan

Artikel Terkait

Bagikan Artikel Ini

Related Articles

Cara Membuat API dengan Node.js 2026: Tutorial REST API Lengkap

Jasa Pembuatan Website Company Profile 2026: Profesional & Terpercaya

Keamanan Website 2026: Panduan Lengkap Proteksi dari Cyber Attack