FluentStack

Mengenal Struktur `src`

Intermediate · Level 7: React FundamentalsIntermediate45 menitBahasa Indonesia

Mengenal Struktur `src`

Membaca file utama di folder src: main.tsx, App.tsx, CSS, assets, dan component kecil.

StatusMemuat progres

ProgresMemuat...

...

Menyiapkan langkah berikutnya

Tujuan belajar

Mengidentifikasi file utama dalam folder src
Menjelaskan peran main.tsx dan App.tsx
Membedakan file entry, component, style, dan assets
Menghapus fokus dari file yang belum perlu diedit

ReactProject StructureTypeScript

Isi lesson

6 blok

1.
`src` adalah tempat source code React kamuBelum selesaiWajib
2.
Struktur `src` yang umumBelum selesaiWajib
3.
main.tsx sebagai entryBelum selesaiWajib
4.
App.tsx sebagai component utamaBelum selesaiWajib
5.
Checklist local taskBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

`src` adalah tempat source code React kamu

Wajib

Folder `src` berisi source code app React. Di awal, jangan merasa harus memahami semua file sekaligus. Fokus pada alur sederhana: `main.tsx` memasang React ke halaman, `App.tsx` berisi component utama, file CSS mengatur tampilan, dan folder component bisa kamu buat untuk UI yang dipisah.

Project template bisa sedikit berbeda antar versi, tetapi mental model-nya sama: entry file memulai app, component menyusun UI, style file mengatur tampilan.

Bagian ini memengaruhi progres lesson.

Struktur `src` yang umum

Wajib

bash

src/
  assets/
  App.css
  App.tsx
  index.css
  main.tsx

`main.tsx` adalah entry React. `App.tsx` adalah component utama. CSS bisa diubah untuk tampilan awal. `assets` biasanya menyimpan gambar atau file statis kecil.

Bagian ini memengaruhi progres lesson.

main.tsx sebagai entry

Wajib

tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

`main.tsx` mengambil elemen root dari HTML lalu merender component `App`. Untuk awal, kamu biasanya cukup membaca file ini, bukan sering mengubahnya.

Bagian ini memengaruhi progres lesson.

App.tsx sebagai component utama

Wajib

tsx

function App() {
  return (
    <main>
      <h1>Fluent React Notes</h1>
      <p>Project React lokal pertama saya.</p>
    </main>
  );
}

export default App;

`App` adalah component utama yang bisa kamu edit untuk mulai membangun UI sendiri.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di project lokal kamu:

Buka folder `src`.
Temukan `main.tsx` dan baca import `App`.
Buka `App.tsx` dan ubah teks heading menjadi nama project kamu.
Simpan file dan lihat perubahan di browser.
Buka `App.css` atau `index.css` dan ubah style kecil.
Jangan hapus `main.tsx` atau elemen root sebelum kamu memahami perannya.

Tandai selesai setelah kamu bisa menjelaskan peran `main.tsx`, `App.tsx`, dan file CSS utama.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

`src` menyimpan source code React app.
`main.tsx` adalah entry yang merender `App` ke root.
`App.tsx` adalah component utama yang paling sering diedit di awal.
CSS file mengatur tampilan awal project.
Berikutnya kamu akan membuat component baru dan mengimportnya ke App.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: `src` adalah tempat source code React kamu.

Memuat progres Review module