Panduan ReactJS: Membangun Aplikasi React Pertama Anda

Halo sana, para pengembang React masa depan! Saya sangat senang untuk memulai perjalanan ini bersama Anda saat kita masuk ke dunia ReactJS. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa menjamin bahwa React tidak hanya kuat tetapi juga sangat menyenangkan untuk dipelajari. Jadi, mari kita mulai!

Apa Itu ReactJS?

React adalah pustaka JavaScript untuk membangun antarmuka pengguna. Itu dikembangkan oleh Facebook dan sejak itu menjadi salah satu pustaka front-end yang paling populer di dunia. Tetapi jangan khawatir jika itu terdengar menakutkan - kita akan memecahnya secara berangsur-angsur.

Mengapa React?

Bayangkan Anda membangun rumah kartu. Setiap kali Anda ingin mengubah sesuatu, Anda harus dengan hati-hati mengatur setiap kartu, kan? React seperti memiliki kartu ajaib yang secara otomatis mengatur diri mereka saat Anda mengubah salah satu bagian. Itu membuat membangun dan memperbarui aplikasi web menjadi lebih mudah dan cepat.

Prasyarat

Sebelum kita masuk, mari pastikan kita memiliki apa yang diperlukan:

1. Pengetahuan dasar tentang HTML dan CSS
2. Kesempatan dengan JavaScript (jangan khawatir, kita akan mereview saat kita maju)
3. Penyunting teks (saya merekomendasikan Visual Studio Code)
4. Node.js terinstal di komputer Anda

Menyiapkan Proyek React Pertama Anda

mari mulai dengan membuat proyek React pertama Anda. Kita akan menggunakan alat yang disebut Create React App, yang mengatur semua yang kita butuhkan dengan hanya satu perintah.

1. Buka terminal atau command prompt Anda
2. Navigasikan ke folder tempat Anda ingin membuat proyek Anda
3. Jalankan perintah berikut:

npx create-react-app my-first-react-app

Ini mungkin memakan beberapa menit. Setelah selesai, navigasikan ke folder proyek Anda:

cd my-first-react-app

Sekarang, mari kita mulai aplikasi kita:

npm start

Voila! Anda seharusnya melihat jendela browser baru yang terbuka dengan aplikasi React pertama Anda berjalan. Itu belum banyak, tetapi kita baru saja memulai!

Memahami Struktur Proyek

mari lihat apa yang Create React App telah mengatur untuk kita:

my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

File yang paling penting untuk kita saat ini adalah di folder src. App.js adalah tempat kita akan menulis sebagian besar kode kita.

Komponen React Pertama Anda

Buka src/App.js di penyunting teks Anda. Anda seharusnya melihat sesuatu seperti ini:

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

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> dan simpan untuk memuat ulang.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Belajar React
</a>
</header>
</div>
);
}

export default App;

Ini adalah komponen React. Jangan khawatir jika itu terlihat membingungkan - kita akan memecahnya:

1. Kita import React dan file lain yang diperlukan
2. Kita tentukan fungsi App
3. Fungsi ini mengembalikan beberapa JSX (JavaScript XML) - sintaks khusus yang terlihat seperti HTML tapi memungkinkan kita untuk menggunakan JavaScript di dalamnya
4. Akhirnya, kita ekspor komponen sehingga bisa digunakan di tempat lain

mari modifikasi komponen ini untuk menjadikannya milik kita:

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

function App() {
return (
<div className="App">
<h1>Selamat Datang di Aplikasi React Pertama Saya!</h1>
<p>Saya senang untuk belajar React!</p>
</div>
);
}

export default App;

Simpan file dan periksa browser Anda - itu seharusnya mengupdate secara otomatis!

Menambah Interaktivitas dengan State

Sekarang, mari kita membuat aplikasi kita sedikit lebih interaktif dengan menambah tombol yang menghitung berapa kali ia diklik.

Ganti isi App.js dengan ini:

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>Selamat Datang di Aplikasi React Pertama Saya!</h1>
<p>Saya senang untuk belajar React!</p>
<button onClick={handleClick}>
Anda telah mengklik saya {count} kali
</button>
</div>
);
}

export default App;

mari pecahkan ini:

1. Kita import useState, hook React yang memungkinkan kita menambahkan state ke komponen kita
2. Kita gunakan useState(0) untuk membuat variabel state count dan fungsi setCount untuk memperbarui itu
3. Kita tentukan fungsi handleClick yang meningkatkan hitungan
4. Dalam JSX kita, kita menambah tombol yang menampilkan hitungan dan memanggil handleClick saat diklik

Simpan dan periksa browser Anda - Anda seharusnya memiliki tombol yang menghitung klik Anda!

Membuat Komponen Baru

Sekarang, saat aplikasi kita tumbuh, kita akan ingin membaginya menjadi komponen yang lebih kecil dan dapat digunakan kembali. mari buat komponen baru untuk penghitung kita.

Buat file baru src/Counter.js dan tambahkan kode ini:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
Anda telah mengklik saya {count} kali
</button>
</div>
);
}

export default Counter;

Sekarang, mari gunakan komponen baru ini di App.js:

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

function App() {
return (
<div className="App">
<h1>Selamat Datang di Aplikasi React Pertama Saya!</h1>
<p>Saya senang untuk belajar React!</p>
<Counter />
<Counter />
</div>
);
}

export default App;

Lihat itu! Sekarang kita memiliki dua penghitung independen di halaman kita.

Kesimpulan

Selamat! Anda telah membuat aplikasi React pertama Anda, belajar tentang komponen, state, dan bahkan membuat komponen yang dapat digunakan kembali. Ini hanya awal perjalanan React Anda, tetapi Anda sudah jauh maju.

Ingat, belajar coding seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan frustasi jika sesuatu belum jelas segera. Terus mencoba, terus membangun, dan terutama, terus bersenang-senang!

Dalam pelajaran berikutnya, kita akan mendalamkan React props, manajemen state yang lebih kompleks, dan mulai membangun aplikasi yang lebih substantial. Sampai saat itu, coding saja!

Credits: Image by storyset