Kenapa Harus React? Struktur, Kelebihan, dan Cara Menggunakannya

  

(https://ms314006.github.io/simple-implementing-ssr-in-react/)

  Hai, hari ini saya ingin sharing tentang React. Dari pengertian dasar hingga beberapa aspek yang lebih teknis seperti struktur, cara membuat, hingga perbandingannya dengan Vue. Langsung saja untuk pembahasan nya.

Apa itu React?

    React adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI). Library ini berfokus pada pengembangan komponen UI yang dapat digunakan kembali, terutama untuk aplikasi web single-page. React terkenal karena kemampuannya dalam membuat UI yang interaktif dan efisien. Sementara itu, ada istilah lain yang sering muncul yaitu React Native dan React JS.

- React, React JS: Sebenarnya, istilah ini sering dipakai secara bergantian, dan keduanya mengacu pada library React yang sama.

- React Native: Ini adalah framework khusus yang memungkinkan pengembang membangun aplikasi mobile menggunakan konsep yang sama dengan React, tapi dengan komponen khusus untuk Android dan iOS. Jadi, meskipun keduanya berbasis React, React Native diarahkan untuk mobile, sedangkan React/React JS biasanya untuk web.

Next.js dan Hubungannya dengan React

   Next.js adalah framework yang dibangun di atas React untuk menambah fungsionalitas seperti Server-Side Rendering (SSR), Static Site Generation (SSG), serta pengaturan routing yang lebih mudah. Jika React sendiri hanya berfokus pada antarmuka pengguna (UI), Next.js menyediakan fitur tambahan yang memungkinkan aplikasi React lebih dioptimalkan untuk performa dan SEO (Search Engine Optimization).

- Apa itu SSR dan SSG?

SSR (Server-Side Rendering): Ini adalah proses merender halaman di server dan mengirimkan halaman yang sudah dirender sepenuhnya ke pengguna. Dengan SSR, aplikasi bisa merespons permintaan pengguna lebih cepat dan lebih SEO-friendly, karena mesin pencari dapat membaca konten yang sudah dirender di server.

SSG (Static Site Generation): Ini adalah metode di mana halaman-halaman aplikasi di-render terlebih dahulu saat build time, kemudian disimpan sebagai file statis. Halaman-halaman ini bisa langsung dikirimkan ke pengguna tanpa harus dirender ulang di server, yang membuat loading menjadi lebih cepat. SSG cocok untuk halaman-halaman statis atau yang kontennya jarang berubah.

Next.js memungkinkan pengembang memilih antara SSR dan SSG untuk setiap halaman dalam aplikasi, tergantung pada kebutuhan performa dan interaktivitas. Misalnya, halaman dengan data dinamis sering menggunakan SSR, sedangkan halaman dengan konten tetap cocok menggunakan SSG.

Dengan fitur-fitur ini, Next.js menjadi pilihan tepat untuk membangun aplikasi yang membutuhkan kecepatan, interaktivitas, dan SEO yang lebih baik..

Perbedaan React dengan Vue

(https://www.reddit.com/r/ProgrammerHumor/comments/bl4n0r/i_love_vue/?rdt=54072)

1. Pendekatan dan Fokus:

React: React adalah library UI yang fokus pada pengembangan antarmuka pengguna (UI) dengan fleksibilitas tinggi. React hanya menyediakan komponen dasar untuk membangun UI, jadi Anda biasanya akan menambahkan library lain sesuai kebutuhan (seperti untuk routing atau state management). Hal ini membuat React sangat fleksibel dan cocok untuk proyek besar yang memerlukan banyak kustomisasi.

Vue: Vue adalah framework yang lebih lengkap dan hadir dengan banyak fitur bawaan seperti routing (Vue Router) dan state management (Vuex). Vue sangat cocok untuk proyek kecil hingga menengah yang membutuhkan setup yang cepat dan terstruktur. Vue juga menawarkan pendekatan “opiniated,” artinya Vue sudah memiliki aturan dan konvensi yang memandu struktur aplikasi.

2. Cara Penulisan Komponen:

React: Menggunakan JSX (JavaScript XML), yang memungkinkan Anda menulis HTML di dalam file JavaScript. Ini menjadikan seluruh logika dan UI bisa ditulis dalam satu file komponen, yang banyak disukai oleh developer karena memungkinkan kontrol penuh atas UI dan logika.

Vue: Vue menggunakan template HTML yang dipisahkan dari logika JavaScript. Template Vue memisahkan struktur HTML, logika, dan gaya (CSS), yang membuatnya lebih mirip dengan cara tradisional dan lebih mudah dipahami oleh pemula.

3. Dokumentasi dan Komunitas:

React: React memiliki komunitas yang sangat besar dengan banyak pustaka dan alat tambahan yang tersedia. Ini memudahkan pengembang untuk menemukan solusi dan pustaka yang mendukung hampir semua kebutuhan.

Vue: Vue memiliki dokumentasi yang sangat lengkap dan terorganisir, yang membuatnya lebih mudah dipelajari bagi pemula. Komunitas Vue juga berkembang pesat, meskipun belum sebesar React.

Struktur Dasar Proyek React

    Ketika Anda membuat proyek React menggunakan Create React App, Anda akan mendapatkan struktur folder dan file seperti berikut:

1. node_modules: Folder ini berisi semua dependensi atau pustaka yang diinstall melalui npm atau yarn. Misalnya, pustaka React itu sendiri, alat bantu pengembangan, serta pustaka tambahan lain yang dibutuhkan oleh aplikasi Anda. Anda tidak perlu mengedit apa pun di dalam folder ini, karena node_modules akan dibuat ulang saat Anda menjalankan npm install dari package.json.

2. public:Folder ini berisi file-file statis yang akan disajikan langsung ke browser. Beberapa file utama di dalam folder ini antara lain:

• index.html: Template HTML utama aplikasi. React akan merender aplikasi Anda ke dalam elemen <div id="root"></div> di file ini.
• favicon.ico: Ikon yang muncul di tab browser.
• manifest.json: Berisi informasi tentang aplikasi, terutama untuk aplikasi yang dioptimalkan untuk Progressive Web Apps (PWA).

File di dalam public bisa diakses langsung, dan umumnya tidak mengalami banyak perubahan saat aplikasi dijalankan.

3. src: Folder ini adalah inti dari aplikasi React Anda, tempat seluruh kode aplikasi berada. Beberapa file umum yang mungkin ditemukan di dalamnya adalah:

• index.js: Entry point utama aplikasi, yang berfungsi untuk merender komponen utama (App) ke elemen dengan ID root di index.html.
• App.js: Komponen utama yang pertama kali dirender dalam aplikasi. Di dalamnya, Anda biasanya memulai struktur dasar dari komponen-komponen lainnya.
• App.css: File CSS utama untuk komponen App.js. Anda bisa memodifikasi atau menambahkan file CSS lain di sini.

Di dalam src, Anda juga akan menambahkan komponen lain sesuai kebutuhan, seperti komponen UI, halaman, dan fitur tambahan.

package.json: File ini berisi metadata tentang proyek Anda, termasuk nama aplikasi, versi, deskripsi, serta dependensi yang diperlukan. Anda juga akan menemukan scripts, yang berisi perintah untuk menjalankan atau membangun aplikasi, seperti start, build, dan test.

package-lock.json: File ini berisi versi spesifik dari semua dependensi dalam proyek. Ini memastikan bahwa setiap orang yang menginstal dependensi aplikasi akan mendapatkan versi yang sama, menjaga konsistensi aplikasi di lingkungan pengembangan yang berbeda.

Cara Membuat Aplikasi React JS

Untuk memulai aplikasi React, Anda bisa menggunakan Create React App, alat yang disediakan oleh tim React untuk membuat aplikasi dasar dengan cepat. Berikut langkah-langkahnya:

1. Pastikan Node.js sudah terinstal.

2. Buka terminal, jalankan perintah berikut:

npx create-react-app nama-aplikasi

3. Setelah selesai, masuk ke folder aplikasi Anda:

cd nama-aplikasi

4. Mulai server pengembangan:

npm start

5. Buka localhost:3000 di browser untuk melihat aplikasi Anda.

Kenapa Harus Menggunakan React?

1. Fleksibilitas Tinggi untuk Berbagai Proyek: React tidak membatasi Anda pada aturan khusus atau cara tertentu dalam membangun aplikasi. Anda bebas mengombinasikan React dengan pustaka lain untuk mengatur arsitektur sesuai kebutuhan proyek. Ini menjadikannya pilihan ideal untuk proyek besar yang mungkin membutuhkan banyak fitur kustom.

2. Reusable Components: React berfokus pada pengembangan komponen yang dapat digunakan kembali, sehingga memudahkan pemeliharaan dan pengembangan fitur baru. Komponen ini bisa digunakan di banyak tempat dalam aplikasi tanpa harus menulis ulang kode, yang sangat efisien untuk proyek jangka panjang.

Kenapa Memilih React dibanding Vue?

Jika Anda mengerjakan proyek besar atau enterprise yang membutuhkan kustomisasi tinggi dan fitur kompleks, React mungkin pilihan yang lebih baik.

Vue lebih cocok untuk tim kecil atau proyek dengan persyaratan sederhana karena fitur bawaannya yang lebih lengkap, tetapi React lebih fleksibel dan memberikan kendali penuh atas arsitektur aplikasi..

Jadi, itulah sedikit sharing mengenai dasar-dasar React dan beberapa perbandingannya. Jika ada yang salah mohon untuk koreksi dengan komen di bawah ini untuk diskusinya.

Terimakasih 😁