ReactJS - Membuat Aplikasi React

Halo sana, pengembang React masa depan! Saya sangat senang untuk mengantar Anda melalui perjalanan menarik dalam membuat aplikasi React pertama Anda. Sebagai orang yang telah mengajar ilmu komputer selama tahun tahun, saya bisa memastikan kepada Anda bahwa React tidak hanya kuat tetapi juga menyenangkan untuk dipelajari. Jadi, mari kita mulai!

ReactJS - Creating a React Application

Apa Itu React?

Sebelum kita mulai mengoding, mari kita pahami apa itu React. React adalah pustaka JavaScript populer untuk membuat antarmuka pengguna. Itu dikembangkan oleh Facebook dan sekarang digunakan oleh banyak perusahaan besar seperti Netflix, Instagram, dan Airbnb. Pahami React sebagai set Lego yang Anda bisa gunakan untuk membuat aplikasi web kompleks dengan mudah.

Memulai

Untuk membuat aplikasi React, kita memerlukan beberapa alat. Jangan khawatir jika Anda belum pernah menggunakan ini sebelumnya - kita akan melalui setiap langkah bersama!

Prasyarat

Node.js dan npm (Node Package Manager)
Editor kode (Saya merekomendasikan Visual Studio Code)

Jika Anda belum menginstal ini,ambil sedikit waktu untuk melakukan itu. Itu seperti mempersiapkan dapur Anda sebelum memasak makanan lezat!

Menggunakan bundler Rollup

Marilah kita mulai membuat aplikasi React menggunakan Rollup. Rollup adalah bundler module JavaScript yang mengompilasi potongan-potongan kode ke sesuatu yang lebih besar dan kompleks.

Langkah 1: Menyiapkan proyek

Pertama, mari kita buat direktori baru untuk proyek kita dan inisialisasikan itu:

mkdir my-react-app
cd my-react-app
npm init -y

Ini membuat folder baru dan menginisialisasi proyek Node.js baru. Itu seperti membuat dasar rumah kita!

Langkah 2: Menginstal dependensi

Sekarang, mari kita instal paket yang diperlukan:

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

Jangan terlalu terkejut oleh nama-nama panjang ini. Pahami mereka sebagai bahan untuk resep React kita!

Langkah 3: Membuat file konfigurasi

Mari kita buat dua file penting:

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

File ini memberitahu Rollup bagaimana membindel aplikasi kita. Itu seperti memberikan intruksi kepada koki bagaimana mempersiapkan makanan.

.babelrc:

{
"presets": ["@babel/preset-react"]
}

File ini mengonfigurasi Babel, yang membantu menerjemahkan JavaScript modern ke versi yang dapat dipahami oleh browser lama.

Langkah 4: Membuat komponen React kita

Sekarang, mari kita buat komponen React pertama kita! Buat file baru src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>Selamat datang di aplikasi React pertama saya!</p>
</div>
);
}

export default App;

Ini adalah komponen utama kita. Itu seperti bintang pertunjukan kita!

Berikutnya, buat src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

File ini bertanggung jawab untuk merender komponen App kita ke HTML.

Langkah 5: Membuat file HTML

Buat file baru public/index.html:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

Ini adalah tempat aplikasi React kita akan dipasang.

Langkah 6: Menambahkan skrip ke package.json

Perbarui package.json Anda untuk mencakup skrip ini:

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

Skrip ini akan membantu kita membangun dan menjalankan aplikasi kita.

Langkah 7: Membangun dan menjalankan aplikasi

Sekarang, mari kita hidupkan kreatif kita! Jalankan:

npm run build

Ini akan membuat file JavaScript terbindel kita. Untuk melihat aplikasi Anda, buka public/index.html di browser. Selamat! Anda baru saja membuat aplikasi React pertama Anda menggunakan Rollup!

Menggunakan bundler Parcel

Sekarang kita sudah melihat bagaimana menggunakan Rollup, mari kita coba bundler populer lainnya: Parcel. Parcel dikenal karena pendekatan tanpa konfigurasi, membuatnya sangat mudah untuk memulai.

Langkah 1: Menyiapkan proyek

Buat proyek baru:

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

Langkah 2: Menginstal dependensi

Instal React dan Parcel:

npm install react react-dom
npm install --save-dev parcel-bundler

Langkah 3: Membuat komponen React

Buat src/App.js:

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>Aplikasi ini dibundel dengan Parcel.</p>
</div>
);
}

export default App;

Buat src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

Langkah 4: Membuat file HTML

Buat src/index.html:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Parcel React App</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

Perhatikan bahwa kita langsung menghubungkan ke file index.js. Parcel akan merawat bundling untuk kita!

Langkah 5: Menambahkan skrip ke package.json

Perbarui package.json:

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

Langkah 6: Menjalankan aplikasi

Sekarang, jalankan aplikasi:

npm start

Parcel akan secara otomatis membuka aplikasi Anda di browser. Setiap perubahan yang Anda buat akan segera ditunjukkan!

Untuk membangun untuk produksi:

npm run build

Ini akan membuat file optimalkan di direktori dist.

Mengkomparasi Rollup dan Parcel

Berikut adalah perbandingan cepat antara dua bundler yang kita gunakan:

Fitur	Rollup	Parcel
Konfigurasi	Memerlukan file konfigurasi	Tanpa konfigurasi
Kecepatan	Cepat	Sangat cepat
Ukuran bundel	Umumnya lebih kecil	Sedikit lebih besar
Kurva belajar	Lebih curam	Lebih halus
Flexibilitas	Sangat dapat dikustomisasi	Kurang dapat dikustomisasi

Kedua bundler ini memiliki kekuatan mereka sendiri, dan pilihan antara mereka seringkali tergantung pada kebutuhan proyek khusus Anda.

Kesimpulan

Selamat! Anda sekarang sudah membuat aplikasi React menggunakan Rollup dan Parcel. Ingat, perjalanan ribuan mil dimulai dengan satu langkah, dan Anda telah mengambil langkah pertama ke dunia menarik pengembangan React.

Sekiranya Anda terus belajar dan tumbuh, Anda akan menemukan bahwa React membuka dunia baru kemungkinan di pengembangan web. Itu seperti belajar menggambar - awalnya Anda mungkin kesulitan dengan bentuk dasar, tapi segera Anda akan membuat karya masterpiece!

Terus latih, tetap curiga, dan terutama, bersenang-senang! React adalah alat yang kuat, tapi juga menyenangkan untuk digunakan. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

ReactJS -Arsitektur

Tutorial Selanjutnya:

ReactJS - JSX