Panduan Pemasangan ReactJS: Panduan untuk Pemula

Hai sana, para pengembang React masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia ReactJS. Sebagai seseorang yang telah mengajarkan ilmu komputer selama tahun, saya bisa menjamin bahwa belajar React seperti belajar menunggang sepeda – mungkin terlihat menakutkan pada awalnya, tapi sekali Anda mengenalinya, Anda akan mulai mengendarai dengan cepat!

ReactJS - Installation

Apa Itu ReactJS?

Sebelum kita memasuki pemasangan, mari kita mengerti dulu apa itu ReactJS. React adalah pustaka JavaScript yang populer untuk membangun antarmuka pengguna, khususnya untuk aplikasi halaman tunggal. Semua tentang membuat komponen UI yang dapat dipergunakan kembali dan mengelola state mereka sendiri, membuatnya mudah untuk membangun antarmuka kompleks.

Sekarang, mari kita mulai dan mengatur React!

Alat Rantai: Alat React Anda

Ketika bekerja dengan React, kita menggunakan set alat yang disebut "rantai alat" (toolchain). Bayangkan itu seperti pisau Switzerland Anda – itu memiliki segala sesuatu yang Anda butuhkan untuk memulai membangun aplikasi web yang menakjubkan.

Alat Esensial dalam Rantai Alat Kami

Alat	Tujuan
Node.js	Runtime JavaScript
npm (Node Package Manager)	Manajer paket untuk JavaScript
Babel	Kompiler JavaScript
Webpack	Pembundel modul
ESLint	Linter kode
Jest	Kerangka uji

Jangan khawatir jika istilah-istilah ini terdengar seperti bahasa asing untuk Anda saat ini. Kita akan menjelajahi setiap satu saat kita melanjutkan!

Server Statik: Tempat Bermain Lokal

Sebelum kita melompat ke setup yang kompleks, mari kita mulai dengan sesuatu yang sederhana – server statik. Ini akan memungkinkan kita untuk menyajikan aplikasi React kita secara lokal di komputer kita.

Menyiapkan Server Statik Sederhana

Pertama, pastikan Anda telah menginstal Node.js. Anda dapat mendownloadnya dari nodejs.org.
Buka terminal atau command prompt dan jalankan:

npm install -g serve

Perintah ini menginstal paket 'serve' secara global di sistem Anda.

Sekarang, buat direktori baru untuk proyek Anda:

mkdir my-react-app
cd my-react-app

Buat file HTML sederhana bernama index.html:

<!DOCTYPE html>
<html>
<head>
<title>My First React App</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

Sekarang, jalankan perintah serve:

serve

Voila! Anda seharusnya melihat pesan yang memberitahu Anda dimana aplikasi Anda disajikan. Biasanya, itu adalah http://localhost:5000. Buka URL ini di browser Anda, dan Anda akan melihat aplikasi React pertama Anda!

Kompiler Babel: Menterjemahkan Masa Depan

Ingat Babel dari rantai alat kita? Itu waktunya untuk bertemu dengan pengguna yang magical ini! Babel adalah kompiler JavaScript yang memungkinkan Anda menggunakan fitur JavaScript terbaru bahkan jika browser belum mendukungnya.

Mengapa Kita Butuh Babel?

Bayangkan Anda menulis surat kepada teman yang berbicara dalam bahasa lain. Babel seperti memiliki pengguna yang dapat segera mengkonversi surat Anda ke bahasa teman Anda. Dalam dunia React, Babel menerjemahkan JavaScript modern dan JSX (ekstensi sintaksis React) ke versi JavaScript yang semua browser dapat mengerti.

Menggunakan Babel dalam Proyek Kita

Kita sebenarnya sudahtermasuk Babel dalam file HTML sederhana di atas. Mari kitauraikan bagian itu:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Kode React Anda di sini
</script>

Baris pertama menyertakan pustaka Babel standalone. Baris kedua memberitahu Babel untuk mengkompilasi kode di dalam tag script.

Rantai Alat Create React App: Solusi Satu Kunci

Sekarang kita sudah mencicipi air React, mari kita melompat ke dalam dengan rantai alat Create React App. Ini adalah lingkungan nyaman dan kaya fitur untuk belajar dan membangun aplikasi single-page React baru.

Menyiapkan Create React App

Buka terminal dan jalankan:

npx create-react-app my-app

Setelah selesai, navigasikan ke aplikasi baru Anda:

cd my-app

Jalankan server pengembangan:

npm start

Aplikasi React baru Anda seharusnya secara otomatis terbuka di browser Anda, biasanya di http://localhost:3000.

Apa Ada Dalamnya?

Create React App mengatur lingkungan pengembangan yang terkonfigurasi sepenuhnya. Mari kita lihat apa yang kita dapatkan:

Fitur	Deskripsi
React	Pustaka inti React
webpack	Mengbundel kode dan aset Anda
Babel	Mengkompilasi JavaScript modern
ESLint	Memeriksa kesalahan kode Anda
Jest	Memungkinkan Anda menulis tes
Hot Reloading	Secara instan melihat perubahan Anda di browser

Komponen Pertama Anda

Mari kita buat komponen React sederhana. Buka src/App.js dan ganti isinya dengan:

import React from 'react';

function App() {
return (
<div>
<h1>Welcome to My React App</h1>
<p>This is my first component!</p>
</div>
);
}

export default App;

Simpan file dan periksa browser Anda. Anda seharusnya melihat komponen baru Anda dirender!

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia menarik pengembangan React. Kita telah menempuh banyak langkah – dari menyiapkan server statik sederhana hingga menggunakan rantai alat Create React App yang kuat.

Ingat, belajar React adalah perjalanan. Jangan khawatir jika segala sesuatu tidak langsung berjalan. Teruslatihan, terus bangun, dan terutama, terus bersenang-senang!

Dalam pelajaran berikutnya, kita akan mendalami komponen React dan mulai membangun aplikasi yang lebih kompleks. Sampai jumpa!

Credits: Image by storyset