Tutorial Membuat Aplikasi Web Menggunakan React.js

React.js adalah salah satu library populer dalam pengembangan frontend yang digunakan untuk membangun antarmuka pengguna (UI) yang interaktif. React.js dikembangkan oleh Facebook dan telah digunakan oleh banyak perusahaan besar, termasuk Instagram, Airbnb, dan WhatsApp. Jika Anda ingin membuat aplikasi web yang efektif, cepat, dan responsif, React.js mungkin menjadi pilihan yang tepat untuk Anda.

පෙන්ඩහුලුවන්

Sebelum kita mulai, pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di komputer Anda. Node.js dan npm sangat penting karena mereka menyediakan lingkungan dan alat yang diperlukan untuk mengembangkan aplikasi web menggunakan React.js.

Langkah 1: Menginisialisasi Proyek React

Untuk membuat aplikasi React.js baru, kita bisa menggunakan Create React App, yaitu alat pembuat aplikasi yang meminimalisir konfigurasi awal. Jalankan perintah berikut di terminal atau command prompt Anda:

"`බෑෂ්
npx create-react-app මගේ-app
cd my-app
npm ආරම්භය
""

Perintah ini akan membuat direktori baru bernama `my-app`, mengunduh dan menginstal semua dependensi yang diperlukan, serta memulai server pengembangan. Anda sekarang dapat membuka browser dan mengakses `http://localhost:3000` untuk melihat aplikasi React.js default.

Langkah 2: Struktur Folder

Mari kita lihat struktur folder yang telah dibuat oleh Create React App:

""
my-app/
├── නෝඩ්_මොඩියුල/
├── පොදු/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Berisi semua dependensi proyek Anda.
– `public/`: Berisi file statis, termasuk `index.html` yang merupakan titik masuk aplikasi.
– `src/`: Tempat Anda akan menghabiskan sebagian besar waktu Anda. Berisi komponen React, file CSS, dan asset lainnya.

Langkah 3: Menghapus File yang Tidak Diperlukan

Untuk memulai dengan bersih, mari kita hapus beberapa file yang tidak diperlukan. Hapus `logo.svg` dan `App.test.js` di dalam folder `src/`. Kemudian, buka `App.css` dan `index.css`, hapus semua kode CSS yang ada di dalamnya agar kita mulai dengan lembar gaya yang bersih.

Langkah 4: Membuat Komponen Pertama Anda

React.js berbasis pada komponen. Komponen adalah blok bangunan aplikasi web Anda. Mari kita modifikasi `App.js` untuk membuat komponen pertama kita.

Buka `src/App.js` dan ganti dengan kode berikut:

“`jsx
'react' වලින් React ආයාත කරන්න;
import ‘./App.css’;

ශ්‍රිතය යෙදුම() {
ආපසු (

);
}

අපනයන පෙරනිමි යෙදුම;
""

Inisialisasi kode React di dalam `App.js` menggunakan JSX (JavaScript XML) yang memungkinkan kita untuk menuliskan HTML-like syntax di dalam JavaScript. Simpan perubahan dan lihat hasilnya di browser.

Langkah 5: Menambahkan Komponen Baru

Sekarang mari kita tambahkan beberapa komponen baru. Buat folder baru bernama `components` di dalam folder `src`. Kemudian buat file baru `HelloWorld.js` di dalam folder `components`.

“`jsx
'react' වලින් React ආයාත කරන්න;

function HelloWorld() {
ආපසු (

);
}

export default HelloWorld;
""

Buka `App.js` dan import komponen `HelloWorld` yang baru saja kita buat:

“`jsx
'react' වලින් React ආයාත කරන්න;
import ‘./App.css’;
import HelloWorld from ‘./components/HelloWorld’;

ශ්‍රිතය යෙදුම() {
ආපසු (

);
}

අපනයන පෙරනිමි යෙදුම;
""

Sekarang, `App.js` merender komponen `HelloWorld` pada halaman utama.

Langkah 6: Menambahkan State Management dengan useState

React memiliki hook yang sangat kuat untuk mengelola state. Mari kita tambahkan beberapa state ke dalam aplikasi kita. Misalnya, kita ingin menambahkan penghitung yang dapat meningkat setiap kali tombol diklik.

Buka `HelloWorld.js` dan tambahkan state dan hook `useState`:

“`jsx
'react' වලින් React, { useState } ආයාත කරන්න;

function HelloWorld() {
const [ගණන, setCount] = useState(0);

const incrementCount = () => {
setCount(count + 1);
}

ආපසු (

);
}

export default HelloWorld;
""

State `count` diinisialisasi dengan nilai 0, dan setiap kali tombol diklik, fungsi `incrementCount` akan meningkatkan nilai ini.

Langkah 7: Menambahkan Styling

Untuk menambahkan styling, kita bisa menggunakan CSS di dalam file `App.css` atau kita dapat menggunakan library CSS-in-JS seperti styled-components. Mari kita tetap menggunakan CSS standar untuk sekarang.

Buka `App.css` dan tambahkan beberapa styling:

“`css
.App {
පෙළ-පෙළගැස්ම: මැද;
}

.App-header {
background-color: 282c34;
min-height: 100vh;
ප්රදර්ශනය: flex;
flex-දිශාව: තීරුව;
align-items: මධ්‍යස්ථානය;
යුක්ති සහගත-අන්තර්ගතය: මධ්යස්ථානය;
font-size: calc(10px + 2vmin);
වර්ණය: සුදු;
}

button {
padding: 10px 20px;
ආන්තික-ඉහළ: 20px;
අකුරු ප්‍රමාණය: 16 පීඑක්ස්;
}
""

Langkah 8: Menambahkan Routing dengan React Router

Untuk menambahkan navigasi antara halaman-halaman berbeda di aplikasi kita, kita dapat menggunakan React Router. Instal React Router dengan menjalankan perintah berikut:

"`බෑෂ්
npm ස්ථාපනය react-router-dom
""

Kemudian, buat dua komponen baru: `Home.js` dan `About.js` di dalam folder `components`.

`Home.js`:
“`jsx
'react' වලින් React ආයාත කරන්න;

function Home() {
ආපසු (

);
}

export default Home;
""

`About.js`:
“`jsx
'react' වලින් React ආයාත කරන්න;

function About() {
ආපසු (

);
}

export default About;
""

Selanjutnya, buka `App.js` dan atur routing:

“`jsx
'react' වලින් React ආයාත කරන්න;
import { BrowserRouter as Router, Route, Link, Switch } from ‘react-router-dom’;
import ‘./App.css’;
import HelloWorld from ‘./components/HelloWorld’;
import Home from ‘./components/Home’;
import About from ‘./components/About’;

ශ්‍රිතය යෙදුම() {
ආපසු (

);
}

අපනයන පෙරනිමි යෙදුම;
""

Dengan ini, kita telah menambahkan navigasi dasar antara halaman berbeda di aplikasi kita.

වසා දැමීම

Itulah tutorial dasar untuk membuat aplikasi web menggunakan React.js. Kita telah melalui langkah-langkah pengaturan proyek, pembuatan komponen, menambahkan state management, styling, dan routing. React.js memiliki ekosistem yang kaya dengan banyak library dan alat yang dapat membantu Anda membangun aplikasi web yang lebih kompleks.

Selamat mencoba, dan semoga tutorial ini membantu Anda dalam memulai perjalanan Anda dengan React.js!