Panduan ReactJS: Membangun Aplikasi React Pertama Anda

Hai sana, pengembang React masa depan! Saya sangat excited 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 dapat menjamin Anda 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 menguraikan secara langkah demi langkah.

Mengapa React?

Bayangkan Anda membangun rumah dari 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 ke dalam, mari pastikan kita memiliki segala sesuatu yang diperlukan:

1. Pengetahuan dasar HTML dan CSS
2. Kenalan 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 kita mulai dengan membuat proyek React pertama kita. Kita akan menggunakan alat yang disebut Create React App, yang mensetup 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 itu selesai, navigasikan ke folder proyek baru Anda:

cd my-first-react-app

Sekarang, mari kita mulai aplikasi kita:

npm start

Voila! Anda seharusnya melihat jendela browser baru yang membuka aplikasi React pertama Anda. Itu belum banyak, tapi kita baru saja memulai!

Mengerti Struktur Proyek

Mari kita lihat apa yang Create React App telah mensetup 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 bagi 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 reload.
</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 menguraikan nya:

1. Kita mengimpor React dan file lain yang diperlukan
2. Kita mendefinisikan fungsi App
3. Fungsi ini mengembalikan beberapa JSX (JavaScript XML) - sintaks khusus yang mirip HTML tapi memungkinkan kita untuk menggunakan JavaScript didalamnya
4. Akhirnya, kita ekspor komponen supaya bisa digunakan di tempat lain

mari kita 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 excited untuk belajar React!</p>
</div>
);
}

export default App;

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

Menambah Interaktivitas dengan State

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

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 excited untuk belajar React!</p>
<button onClick={handleClick}>
Anda telah menekan saya {count} kali
</button>
</div>
);
}

export default App;

mari kitauraikan ini:

1. Kita mengimpor useState, hook React yang memungkinkan kita menambahkan state ke komponen kita
2. Kita menggunakan useState(0) untuk membuat variabel state count dan fungsi setCount untuk mengupdate nya
3. Kita mendefinisikan fungsi handleClick yang meningkatkan hitungan
4. Dalam JSX kita menambah tombol yang menampilkan hitungan dan memanggil handleClick saat ditekan

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

Membuat Komponen Baru

Sekarang, saat aplikasi kita tumbuh, kita ingin membaginya menjadi komponen kecil, yang dapat digunakan kembali. Mari kita 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 menekan saya {count} kali
</button>
</div>
);
}

export default Counter;

Sekarang, mari kita 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 excited untuk belajar React!</p>
<Counter />
<Counter />
</div>
);
}

export default App;

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

Kesimpulan

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

Ingat, belajar coding seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan mudah kecewa jika sesuatu belum jelas langsung. Terus mencoba, terus membangun, dan terutama, tetap menyenangkan!

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

Credits: Image by storyset