Intermediate · Level 7: React FundamentalsIntermediate55 menitBahasa Indonesia

Membuat Component Pertama di Local Project

Membuat file component baru, memberi props sederhana, dan mengimport component ke App.tsx.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membuat folder components di src
Membuat file component React baru
Menggunakan props sederhana di local project
Mengimport component ke App.tsx

ReactComponentsPropsLocal Workflow

Isi lesson

6 blok

1.
Project lokal mulai rapi saat UI dipisahBelum selesaiWajib
2.
src/components/ProfileCard.tsxBelum selesaiWajib
3.
Import component di App.tsxBelum selesaiWajib
4.
Checklist local taskBelum selesaiWajib
5.
Import path sering salah satu karakterBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Project lokal mulai rapi saat UI dipisah

Wajib

Setelah kamu bisa mengedit `App.tsx`, langkah berikutnya adalah membuat component sendiri. Untuk project kecil, mulai dari component yang mudah dijelaskan, misalnya `ProfileCard`, `ProjectCard`, atau `NoteCard`.

Component baru biasanya disimpan di folder `src/components`. Folder ini bukan aturan wajib dari React, tetapi membantu project tetap rapi saat jumlah component bertambah.

Bagian ini memengaruhi progres lesson.

src/components/ProfileCard.tsx

Wajib

tsx

type ProfileCardProps = {
  name: string;
  role: string;
  summary: string;
};

export function ProfileCard({ name, role, summary }: ProfileCardProps) {
  return (
    <article className="profile-card">
      <h2>{name}</h2>
      <p>{role}</p>
      <p>{summary}</p>
    </article>
  );
}

`ProfileCard` menerima props agar isi card bisa diganti dari parent. Type props membuat bentuk data lebih jelas.

Bagian ini memengaruhi progres lesson.

Import component di App.tsx

Wajib

tsx

import { ProfileCard } from "./components/ProfileCard";

function App() {
  return (
    <main>
      <h1>Fluent React Notes</h1>
      <ProfileCard
        name="Rina"
        role="Frontend learner"
        summary="Sedang membangun React app lokal pertama."
      />
    </main>
  );
}

export default App;

App menyusun component dan mengirim props. `ProfileCard` fokus menampilkan satu card.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di project lokal kamu:

Buat folder `src/components`.
Buat file `ProfileCard.tsx` atau component card sejenis.
Buat type props sederhana.
Export component dari file tersebut.
Import component di `App.tsx`.
Kirim minimal dua props dari `App.tsx`.
Pastikan component tampil di browser.
Tambahkan style kecil untuk class component di file CSS.

Jika component tidak muncul, cek path import, nama export, dan error di terminal atau browser Console.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Import path sering salah satu karakter

Jika file berada di `src/components/ProfileCard.tsx`, import dari `App.tsx` biasanya `./components/ProfileCard`. Huruf besar-kecil pada nama file bisa penting, terutama saat project nanti berjalan di environment Linux.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Component lokal bisa dibuat di folder `src/components`.
Props membuat component bisa menerima data dari parent.
App.tsx bertugas menyusun component utama.
Error import biasanya terkait path, nama file, atau nama export.
Berikutnya kamu akan menambahkan state dan event di local project.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Project lokal mulai rapi saat UI dipisah.

Memuat progres Review module