ReactJS - Membuat Aplikasi React

Hai sana, para pengembang React masa depan! Saya sangat gembira untuk memandu Anda melalui perjalanan yang menarik dalam membuat aplikasi React pertama Anda. Sebagai seseorang yang telah mengajar ilmu komputer selama bertahun-tahun, saya dapat menjamin 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 blok Lego yang Anda bisa gunakan untuk membuat aplikasi web kompleks dengan mudah.

Memulai

Untuk membuat aplikasi React, kita butuh 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 menyarankan Visual Studio Code)

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

Menggunakan bundler Rollup

Mari kita mulai membuat aplikasi React menggunakan Rollup. Rollup adalah bundler modul JavaScript yang mengkompilasi potongan kode ke sesuatu yang lebih besar dan kompleks.

Langkah 1: Menyiapkan proyek

Pertama, mari kita buat direktori baru untuk proyek kita dan inisiasinya:

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

Ini akan membuat folder baru dan menginisiasi proyek Node.js baru. Itu seperti menempatkan fondasi 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 merasa takut oleh nama-nama panjang ini. Pahami mereka sebagai bahan untuk resep React kita!

Langkah 3: Membuat berkas konfigurasi

Mari kita buat dua berkas 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(),
],
};

Berkas ini memberitahu Rollup bagaimana untuk membundel aplikasi kita. Itu seperti memberikan petunjuk kepada koki bagaimana mempersiapkan makanan.

.babelrc:

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

Berkas ini mengkonfigurasi 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 berkas 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 dalam 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')
);

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

Langkah 5: Membuat berkas HTML

Buat berkas baru public/index.html:

<!DOCTYPE html>
<html lang="en">
<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 dimount.

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 berkas JavaScript terbundel 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 telah melihat bagaimana menggunakan Rollup, mari kita coba bundler populer lainnya: Parcel. Parcel dikenal karena pendekatan nol-konfigurasi nya, 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 berkas HTML

Buat src/index.html:

<!DOCTYPE html>
<html lang="en">
<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 bagaimana kita langsung menghubungkan ke berkas index.js. Parcel akan merawat bundling untuk kita!

Langkah 5: Menambahkan skrip ke package.json

Perbarui package.json Anda:

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

Langkah 6: Menjalankan aplikasi

Sekarang, jalankan aplikasi kita:

npm start

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

Untuk membangun untuk produksi:

npm run build

Ini akan membuat berkas optimalkan di direktori dist.

Mengkomparasi Rollup dan Parcel

Berikut adalah perbandingan cepat antara dua bundler yang kita gunakan:

Fitur	Rollup	Parcel
Konfigurasi	Memerlukan berkas konfigurasi	Tanpa konfigurasi
Kecepatan	Cepat	Sangat cepat
Ukuran bundel	Umumnya lebih kecil	Sedikit lebih besar
Kurva belajar	Lebih curam	Lebih landai
Fleksibilitas	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 telah membuat aplikasi React menggunakan Rollup dan Parcel. Ingat, perjalanan ribuan mil dimulai dari satu langkah, dan Anda telah mengambil langkah pertama Anda ke dunia menarik pengembangan React.

Sebagai 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 kesenian!

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

Credits: Image by storyset