Indonesia

Tutorial ReactJS

Hooks

Fitur Tingkat Lanjut ReactJS

Konsep Tambahan

Panduan Pemula Instalasi ReactJS

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

ReactJS - Installation

Apa Itu ReactJS?

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

Sekarang, mari kita mulai mengatur React!

Alat: Toolchain React Anda

Ketika bekerja dengan React, kita menggunakan set alat yang disebut "toolchain." Bayangkan ini sebagai pisau瑞士 Army knife Anda – memiliki segala sesuatu yang Anda butuhkan untuk mulai membangun aplikasi web yang menakjubkan.

Alat Esensial dalam Toolchain Kami

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

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

Server Statik: Tempat Bermain Lokal

Sebelum kita melompat ke pengaturan 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.

Mengatur Server Statik Sederhana

  1. Pertama, pastikan Anda telah menginstal Node.js. Anda dapat mendownloadnya dari nodejs.org.

  2. Buka terminal atau command prompt dan jalankan:

npm install -g serve

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

  1. Sekarang, buat direktori baru untuk proyek Anda:
mkdir my-react-app
cd my-react-app
  1. 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>
  1. 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: Menyajikan Masa Depan

Ingat Babel dari toolchain kami? Saatnya kita temui penyajak magis ini! Babel adalah kompiler JavaScript yang memungkinkan Anda menggunakan fitur JavaScript terbaru bahkan jika browser belum mendukungnya.

Mengapa Kita Butuh Babel?

Imaginasi Anda menulis surat kepada teman yang berbicara dalam bahasa lain. Babel seperti memiliki penyajak yang dapat secara instan mengkonversi surat Anda ke bahasa teman Anda. Dalam dunia React, Babel mensajikan JavaScript modern dan JSX (ekstensi sintaksis React) ke versi JavaScript yang dapat dimengerti oleh semua browser.

Menggunakan Babel dalam Proyek Kami

Kita sebenarnya sudah termasuk Babel dalam file HTML sederhana kami 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.

Toolchain Create React App: Solusi All-in-One

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

Mengatur Create React App

  1. Buka terminal dan jalankan:
npx create-react-app my-app
  1. Setelah selesai, navigasikan ke aplikasi baru Anda:
cd my-app
  1. Jalankan server pengembangan:
npm start

Aplikasi React baru Anda seharusnya 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 dapat:

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

Komponen Pertama Anda

Mari kita buat komponen React sederhana. Buka src/App.js dan ganti isiannya 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 yang dirender!

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia menarik pengembangan React. Kita telah meliputi banyak hal – dari mengatur server statik sederhana hingga menggunakan toolchain Create React App yang kuat.

Ingat, belajar React adalah perjalanan. Jangan khawatir jika segala sesuatu tidak langsung berjalan mulus. Terus praktik, terus bangun, dan yang paling penting, terus bersenang-senang!

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

Credits: Image by storyset

Tutorial Sebelumnya:
ReactJS - Pengenalan
Tutorial Selanjutnya:
ReactJS - Fitur