Setup Project React

Instalasi Node.js dan npm

Sebelum memulai, pastikan Node.js dan npm sudah terinstall di komputer Kalian.

Cek versi Node.js dan npm

node --version
npm --version

Versi yang Direkomendasikan

Gunakan Node.js versi LTS (Long Term Support) terbaru. Saat ini versi yang direkomendasikan adalah v18.x atau v20.x ke atas.

Membuat Project React

Membuat Project dengan Create React App

Create React App (CRA) adalah tool resmi dari tim React yang membantu setup project tanpa konfigurasi build yang rumit.

Membuat project baru

# Buat project React baru
npx create-react-app my-react-app

# Masuk ke direktori project
cd my-react-app

# Jalankan development server
npm start

Setelah menjalankan npm start, browser akan otomatis membuka http://localhost:3000 dan menampilkan halaman welcome React.

npx vs npm

npx adalah package runner yang sudah termasuk dalam npm 5.2+. Dengan npx, Kalian tidak perlu menginstall create-react-app secara global.

Memahami Struktur Project

Struktur project yang dihasilkan oleh Create React App:

favicon.ico

index.html

manifest.json

App.css

App.js

App.test.js

index.css

index.js

logo.svg

.gitignore

package.json

README.md

File dan Folder Penting

File/Folder	Deskripsi
`public/index.html`	Template HTML utama. React akan me-mount aplikasi ke element dengan id="root"
`src/index.js`	Entry point aplikasi React
`src/App.js`	Root component aplikasi
`package.json`	Daftar dependencies dan scripts
`node_modules/`	Folder berisi semua package yang terinstall

Membuat Struktur Folder yang Lebih Baik

Untuk project yang lebih terorganisir, mari kita buat struktur folder yang modular:

Membuat struktur folder

cd src
mkdir components pages hooks context
mkdir components/Header components/TaskItem components/TaskForm
mkdir pages/Home pages/About

Struktur folder akhir:

App.jsx

App.css

index.js

index.css

Organisasi Folder

Struktur folder ini mengikuti prinsip:

components/ - Komponen yang reusable
pages/ - Komponen yang merepresentasikan halaman
hooks/ - Custom hooks
context/ - Context providers untuk state management

Membersihkan File Default

Hapus file yang tidak diperlukan dan modifikasi App.js:

src/App.jsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My React Task Manager</h1>
        <p>Selamat datang di aplikasi Task Manager!</p>
      </header>
    </div>
  );
}

export default App;

Update App.css:

src/App.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f4f7f9;
}

.App {
  min-height: 100vh;
}

.App-header {
  background-color: #3498db;
  color: white;
  padding: 2rem;
  text-align: center;
}

.App-header h1 {
  margin-bottom: 0.5rem;
}

Command eject akan mengeluarkan semua konfigurasi webpack dan tool lainnya. Ini adalah operasi one-way dan tidak bisa di-undo. Jangan lakukan eject kecuali Kalian benar-benar membutuhkan kontrol penuh atas konfigurasi.

Install Dependencies Tambahan

Untuk praktikum ini, kita akan membutuhkan beberapa package tambahan:

Install React Router

npm install react-router-dom

Install Testing Library (opsional, sudah include di CRA)

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

React DevTools

Install ekstensi React DevTools di browser untuk memudahkan debugging:

React DevTools

React DevTools memungkinkan Kalian untuk:

Inspect component tree
Melihat props dan state
Debug performance
Melacak component re-renders

Verifikasi Setup

Pastikan aplikasi berjalan dengan baik:

Jalankan npm start
Buka browser di http://localhost:3000
Kalian seharusnya melihat halaman dengan judul "My React Task Manager"
Coba ubah kode di App.js dan lihat perubahan otomatis di browser (Hot Module Replacement)

Setup Selesai!

Selamat! Setup project React Kalian sudah selesai. Selanjutnya kita akan mulai membuat komponen-komponen React.

Troubleshooting

Port 3000 sudah digunakan

Jika port 3000 sudah digunakan, Kalian bisa menggunakan port lain:

# Windows
set PORT=3001 && npm start

# macOS/Linux
PORT=3001 npm start

Error saat npm install

Jika terjadi error saat install dependencies, coba:

# Hapus node_modules dan package-lock.json
rm -rf node_modules package-lock.json

# Install ulang
npm install

Module not found

Pastikan import path sudah benar dan file exists. Perhatikan case-sensitive di Linux/macOS.

Instalasi Node.js dan npm

Membuat Project React

Membuat Project dengan Create React App

Memahami Struktur Project

File dan Folder Penting

Membuat Struktur Folder yang Lebih Baik

Membersihkan File Default

Scripts yang Tersedia

Install Dependencies Tambahan

React DevTools

Verifikasi Setup

Troubleshooting

Port 3000 sudah digunakan

Error saat npm install

Module not found

On this page