React.js
  • Roadmap belajar React.js
  • Tahap 1: Dasar-dasar JavaScript
    • Apa itu JavaScript dan kegunaannya
    • Sejarah dan perkembangan JavaScript
    • Apa itu Node.js dan hubungannya dengan JavaScript
    • Cara instal Node.js
    • Cara menjalankan JavaScript di Node.js
    • Variabel dalam JavaScript
    • Tipe data dalam JavaScript
    • Operator dalam JavaScript
    • Truly dan Falsy dalam JavaScript
    • Kondisional dalam JavaScript
    • Looping dalam JavaScript
    • Fungsi dalam JavaScript
    • Parameter dan Return Value dalam JavaScript
    • DOM di JavaScript dan Cara manipulasinya
    • Event Handling dalam JavaScript
    • Try, catch, dan finally dalam JavaScript
    • Callback dalam JavaScript
    • Promise dalam JavaScript
    • Async dan Await dalam JavaScript
  • Tahap 2: JavaScript Lanjutan
    • OOP dalam JavaScript
    • ES6
    • LocalStorage dalam JavaScript
    • FetchAPI dalam JavaScript
  • Tahap 3: Memulai dengan React.js
    • Apa itu React?
    • Konsep Virtual DOM
    • Apa itu JSX?
    • Langkah-langkah Setup Project React.js
    • Apa itu Komponen dalam React?
    • Apa itu Props dan State dalam React?
    • Apa itu Event Handling dalam React?
    • Apa itu Component Lifecycle dalam React?
    • Apa itu Hooks dalam React?
    • Apa itu Custom Hooks dalam React?
  • Tahap 4: React Lanjutan
    • Apa itu Context API dalam React?
    • Apa itu State Management (Redux)?
    • Apa itu Routing di React?
    • Apa itu Dynamic Routing, Private Routing, dan Nested Routing?
    • Cara menulis CSS di React
    • Cara Menggunakan Bootstrap di React
    • Cara Menggunakan Tailwind CSS di React
    • Cara Fetching data dari API di React
    • Cara Menampilkan data dinamis di React
    • Error handling dalam pengambilan data
    • Cara Testing komponen di React
    • End-to-end testing dengan Cypress atau Selenium
Powered by GitBook
On this page
  1. Tahap 3: Memulai dengan React.js

Langkah-langkah Setup Project React.js

Untuk memulai proyek dengan React.js, kita dapat menggunakan Create React App, alat yang disediakan oleh tim React untuk membuat aplikasi React baru dengan cepat dan mudah. Berikut adalah langkah-langkahnya:

1. Pastikan Node.js dan npm Terinstal

Create React App membutuhkan Node.js dan npm (Node Package Manager). Pastikan kedua alat ini sudah terinstal di sistem Anda.

  • Cara cek Node.js dan npm:

    node -v
npm -v

  • Jika belum terinstal, unduh dan instal dari Node.js.

2. Install Create React App

Create React App adalah alat baris perintah yang memungkinkan Anda membuat proyek React dengan cepat.

npx create-react-app my-app

Perintah di atas akan membuat folder my-app dengan struktur proyek React siap pakai.

3. Masuk ke Direktori Proyek

Pindah ke direktori proyek yang baru dibuat.

cd my-app

4. Jalankan Aplikasi React

Jalankan aplikasi React untuk memulai server pengembangan dan melihat aplikasi default di browser.

npm start

Perintah ini akan membuka aplikasi di browser pada http://localhost:3000.

Struktur Direktori Proyek

Setelah menjalankan create-react-app, Anda akan mendapatkan struktur direktori sebagai berikut:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

  • public/index.html: Template HTML utama.

  • src/index.js: Titik masuk JavaScript untuk aplikasi.

  • src/App.js: Komponen utama aplikasi.

Mengedit dan Mengembangkan Aplikasi

  • Komponen: Tambahkan komponen baru di dalam folder src/.

  • Style: Gunakan file CSS atau SASS untuk menambahkan gaya.

  • Testing: Tulis dan jalankan tes menggunakan Jest (termasuk secara default).

Sumber

  • React Documentation - Create a New React App

  • Create React App GitHub Repository

  • MDN Web Docs - Setting up a React environment

Dengan mengikuti langkah-langkah di atas, Anda akan memiliki proyek React.js yang siap untuk dikembangkan. Create React App adalah cara yang sangat mudah dan cepat untuk memulai, memungkinkan Anda fokus pada pengembangan aplikasi tanpa harus khawatir tentang konfigurasi build.

PreviousApa itu JSX?NextApa itu Komponen dalam React?

Last updated 8 months ago