Component in React with TypeScript

Di dalam React kita bisa membuat Component yang memiliki tipe data sendiri. Hal ini bisa dilakukan dengan menggunakan TypeScript. Berikut adalah contoh penggunaan TypeScript pada Component React.

import React from "react";
 
interface Props {
  name: string;
}
 
const Hello: React.FC<Props> = ({ name }) => {
  return <h1>Hello {name}</h1>;
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki tipe data Props. Props tersebut memiliki satu properti yaitu name yang bertipe data string. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello name="John Doe" />;
};
 
export default App;

State di dalam Component

State adalah sebuah data yang bisa berubah. Di dalam React kita bisa menggunakan state di dalam Component. Berikut adalah contoh penggunaan state di dalam Component.

import React, { useState } from "react";
 
const Counter: React.FC = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
 
export default Counter;

Pada contoh di atas kita membuat Component Counter yang memiliki state count dan setCount. State tersebut memiliki nilai awal 0. Untuk mengubah nilai state tersebut kita bisa menggunakan setCount yang akan mengubah nilai count menjadi count + 1. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
 
import Counter from "./Counter";
 
const App: React.FC = () => {
  return <Counter />;
};
 
export default App;

Props di dalam Component

Props adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Berikut adalah contoh penggunaan Props di dalam Component.

import React from "react";
 
interface Props {
  name: string;
}
 
const Hello: React.FC<Props> = ({ name }) => {
  return <h1>Hello {name}</h1>;
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props name yang bertipe data string. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello name="John Doe" />;
};
 
export default App;

Props Children di dalam Component

Props Children adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props Children ini bisa berupa Component lain, string, atau bahkan HTML. Berikut adalah contoh penggunaan Props Children di dalam Component.

import React from "react";
 
interface Props {
  children: React.ReactNode;
}
 
const Hello: React.FC<Props> = ({ children }) => {
  return <h1>{children}</h1>;
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props children yang bertipe data React.ReactNode. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello>Hello World</Hello>;
};
 
export default App;

Props Function di dalam Component

Props Function adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props Function ini berupa sebuah function yang bisa digunakan di dalam Component anak. Berikut adalah contoh penggunaan Props Function di dalam Component.

import React from "react";
 
interface Props {
  onClick: () => void;
}
 
const Button: React.FC<Props> = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};
 
export default Button;

Pada contoh di atas kita membuat Component Button yang memiliki Props onClick yang bertipe data () => void. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Button from "./Button";
 
const App: React.FC = () => {
  const handleClick = () => {
    alert("Hello World");
  };
 
  return <Button onClick={handleClick} />;
};
 
export default App;

Props Object di dalam Component

Props Object adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props Object ini berupa sebuah object yang bisa digunakan di dalam Component anak. Berikut adalah contoh penggunaan Props Object di dalam Component.

import React from "react";
 
interface Props {
  user: {
    name: string;
    age: number;
  };
}
 
const User: React.FC<Props> = ({ user }) => {
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};
 
export default User;

Pada contoh di atas kita membuat Component User yang memiliki Props user yang bertipe data object. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import User from "./User";
 
const App: React.FC = () => {
  const user = {
    name: "John Doe",
    age: 20,
  };
 
  return <User user={user} />;
};
 
export default App;

Props Optional di dalam Component

Props Optional adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props Optional ini berupa sebuah data yang bisa dikirimkan atau tidak dikirimkan ke Component anak. Berikut adalah contoh penggunaan Props Optional di dalam Component.

import React from "react";
 
interface Props {
  name?: string;
}
 
const Hello: React.FC<Props> = ({ name }) => {
  return <h1>Hello {name}</h1>;
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props name yang bertipe data string. Props tersebut bersifat optional. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello />;
};
 
export default App;

Props Default di dalam Component

Props Default adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props Default ini berupa sebuah data yang bisa dikirimkan atau tidak dikirimkan ke Component anak. Jika tidak dikirimkan maka nilai default akan digunakan. Berikut adalah contoh penggunaan Props Default di dalam Component.

import React from "react";
 
interface Props {
  name: string;
}
 
const Hello: React.FC<Props> = ({ name }) => {
  return <h1>Hello {name}</h1>;
};
 
Hello.defaultProps = {
  name: "John Doe",
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props name yang bertipe data string. Props tersebut memiliki nilai default John Doe. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello />;
};
 
export default App;

Props Ref di dalam Component

Props Ref adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props Ref ini berupa sebuah data yang bisa digunakan untuk mengakses DOM di dalam Component anak. Berikut adalah contoh penggunaan Props Ref di dalam Component.

import React from "react";
 
interface Props {
  ref: React.RefObject<HTMLDivElement>;
}
 
const Hello: React.FC<Props> = ({ ref }) => {
  return <div ref={ref}>Hello World</div>;
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props ref yang bertipe data React.RefObject<HTMLDivElement>. Props tersebut digunakan untuk mengakses DOM di dalam Component anak. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React, { useRef } from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);
 
  return <Hello ref={ref} />;
};
 
export default App;

Props HTML di dalam Component

Props HTML adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props HTML ini berupa sebuah data yang bisa digunakan untuk mengakses DOM di dalam Component anak. Berikut adalah contoh penggunaan Props HTML di dalam Component.

import React from "react";
 
interface Props extends React.HTMLProps<HTMLDivElement> {}
 
const Hello: React.FC<Props> = ({ ...props }) => {
  return <div {...props}>Hello World</div>;
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props ...props yang bertipe data React.HTMLProps<HTMLDivElement>. Props tersebut digunakan untuk mengakses DOM di dalam Component anak. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello className="hello" />;
};
 
export default App;

Attibute HTML di dalam Component

Attibute HTML adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Attibute HTML ini berupa sebuah data yang bisa digunakan untuk mengakses DOM di dalam Component anak. Berikut adalah contoh penggunaan Attibute HTML di dalam Component.

import React from "react";
 
interface Props {
  className?: string;
}
 
const Hello: React.FC<Props> = ({ className }) => {
  return <div className={className}>Hello World</div>;
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props className yang bertipe data string. Props tersebut digunakan untuk mengakses DOM di dalam Component anak. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello className="hello" />;
};
 
export default App;

Props HTML dan Attibute HTML di dalam Component

Props HTML dan Attibute HTML adalah sebuah data yang dikirimkan dari Component induk ke Component anak. Props HTML dan Attibute HTML ini berupa sebuah data yang bisa digunakan untuk mengakses DOM di dalam Component anak. Berikut adalah contoh penggunaan Props HTML dan Attibute HTML di dalam Component.

import React from "react";
 
interface Props extends React.HTMLProps<HTMLDivElement> {
  className?: string;
}
 
const Hello: React.FC<Props> = ({ className, ...props }) => {
  return (
    <div className={className} {...props}>
      Hello World
    </div>
  );
};
 
export default Hello;

Pada contoh di atas kita membuat Component Hello yang memiliki Props className yang bertipe data string. Props tersebut digunakan untuk mengakses DOM di dalam Component anak. Untuk menggunakan Component tersebut kita bisa menggunakan cara berikut.

import React from "react";
import Hello from "./Hello";
 
const App: React.FC = () => {
  return <Hello className="hello" />;
};
 
export default App;