Fundamental React

Apa itu React ?

React adalah pustaka JavaScript untuk membuat antar muka, terutama single-page applications.

Menginstal React

Untuk memulai menggunakan React, kamu bisa menjalankan perintah berikut:

Using Vite

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

JSX (JavaScript XML)

JSX syntax extension untuk JavaScript, memungkinkan menulis kode seperti HTML di JavaScript.

Example:

const element = <h1>Hello, World!</h1>;

JSX is transpiled into JavaScript by tools like Babel.

Components

Aplikasi React dibangun menggunakan komponen. Komponen adalah bagian UI yang independen dan dapat digunakan kembali.

Example: of a Functional Component:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Props (Properties)

Props digunakan itu meneruskan data dari komponen induk ke komponen anak.

Example:

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

function App() {
  return <Greeting name="Alice" />;
}

State

State adalah cara untuk menyimpan data yang bisa berubah setiap saat. Di React setiap component bisa memiliki state masing-masing.

Managing State in Functional Components (using useState Hook):

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Handling Events

React memungkinkan kamu untuk menangani event seperti click dll.

Example:

function Button() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return <button onClick={handleClick}>Click me</button>;
}

Conditional Rendering

Di React, Kamu dapat merender komponen atau elemen secara kondisional berdasarkan status atau properti.

Example:

function Greeting(props) {
  return props.isLoggedIn ? <h1>Welcome, {props.name}!</h1> : <h1>Please log in.</h1>;
}

Lists and Keys

React menggunakan keys untuk memperbarui daftar elemen secara efisien saat data berubah.

Example:

const items = ["apple", "banana", "cherry"];

function ItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

useEffect Hook

Hook useEffect memungkinkan kamu menambahkan efek samping di dalam komponent.

Example:

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means it runs only once when the component mounts

  return <div>{data ? JSON.stringify(data) : "Loading..."}</div>;
}

React Router

React Router adalah pustaka untuk mengatur routing di React.

Example:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <h1>Home</h1>
        </Route>
        <Route path="/about">
          <h1>About</h1>
        </Route>
      </Switch>
    </Router>
  );
}