Cara menggunakan SONTAX di JavaScript

ReactJS atau React adalah pustaka JavaScript populer buatan Facebook yang digunakan dalam proses pengembangan aplikasi seluler dan web. React berisi kumpulan cuplikan kode JavaScript (disebut 'komponen') yang dapat digunakan berulang kali untuk mendesain antarmuka pengguna

Perlu dicatat bahwa ReactJS bukanlah framework JavaScript, karena hanya bertanggung jawab merender komponen area tampilan aplikasi. React adalah sebuah alternatif untuk framework seperti Angular dan Vue, yang keduanya dapat digunakan untuk membuat fungsi yang kompleks

Nah, selain menjelaskan apa itu React, kami akan membahas fitur, kelebihan, dan cara kerjanya. Kami juga akan membandingkan perbedaan antara ReactJS dan React Native terkait perannya dalam industri aplikasi web dan seluler

Selanjutnya, kami akan memberikan contoh cara men-deploy (meluncurkan) aplikasi React di hPanel Hostinger. Tanpa basa-basi lagi, mari kita mulai mempelajari apa itu React

Berbagai Fitur Bereaksi

React memiliki beberapa fitur utama yang membuatnya lebih unggul dibandingkan dengan library JavaScript lainnya. Bagian di bawah ini akan menjelaskan fitur-fitur ini dan penggunaannya dalam proses pengembangan aplikasi seluler dan web

BEJ

JSX adalah ekstensi sintaksis JavaScript yang digunakan dalam pembuatan elemen React. Pengembang menggunakannya untuk menyematkan (embed) kode HTML di objek JavaScript. Karena dapat memproses penyematan ekspresi dan fungsi JavaScript yang valid, JSX juga membantu mempersingkat struktur kode yang rumit

Mari kita lihat blok kode berikut, yang mendemonstrasikan cara menyematkan ekspresi di JSX

const name = 'John Smith;
const element = h1>Hello, {name}/h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Di baris kedua, kita memanggil variabel nama di dalam elemen React dengan menempatkannya di dalam kurung kurawal

Sementara itu, fungsi ReactDOM. render() akan merender elemen React pada struktur data DOM (Document Object Model), yang menjelaskan antarmuka penggunanya (UI)

JSX juga membantu mencegah serangan XSS (Cross-Site Scripting). Secara default, DOM React mengonversi nilai yang disematkan di JSX menjadi string sebelum merendernya. Akibatnya, pihak ketiga tidak dapat menyuntikkan kode tambahan melalui input pengguna, kecuali tertulis dengan jelas di aplikasi

Tenang, nanti kita akan mempelajari peran JSX dalam pembuatan komponen React secara lebih detail

DOM maya

Document Object Model (DOM) berfungsi untuk menyajikan halaman web dalam tampilan struktur data (tree). ReactJS menyimpan struktur data Virtual DOM ini di memorinya, jadi jika ada perubahan pada bagian tertentu dari struktur data, Anda tidak perlu merender ulang semuanya

Setiap ada perubahan data, ReactJS akan membuat struktur data Virtual DOM baru dan membandingkannya dengan yang sebelumnya, lalu mencari cara tercepat untuk menerapkan perubahan tersebut ke DOM asli. Proses ini disebut diffing

Jadi, perubahan UI hanya akan mempengaruhi bagian tertentu dari struktur data DOM asli, sehingga proses rendering perubahan bisa lebih cepat dan hemat sumber daya. Tentunya hal ini akan sangat membantu untuk proyek berskala besar yang membutuhkan banyak interaksi pengguna

Bereaksi Komponen dan Properti

ReactJS memisahkan antarmuka pengguna menjadi potongan-potongan kode terpisah yang nantinya dapat digunakan kembali, yang disebut komponen. Cara kerja komponen React mirip dengan fungsi JavaScript, yaitu keduanya menerima input arbitrer yang disebut properti atau props

Elemen React yang dihasilkan (return) akan menentukan bagaimana antarmuka pengguna dilihat oleh pengguna (sisi klien). Berikut adalah contoh komponen fungsional yang menghasilkan elemen React

function Welcome(props) {
  return h1>Hello, {props.name}/h1>;
}

Anda dapat menambahkan komponen sebanyak mungkin, dan semuanya akan tetap terlihat rapi

Manajemen Negara

State adalah objek JavaScript yang mewakili bagian dari komponen. Setiap kali pengguna berinteraksi dengan aplikasi, status juga akan berubah, dengan merender UI baru untuk menampilkan perubahan dari interaksi tersebut

Fitur manajemen status ini mengacu pada prosedur yang dilakukan untuk mengelola status aplikasi React. Misalnya, seperti menyimpan data di pustaka manajemen negara pihak ketiga, dan memicu proses rendering ulang setiap kali data diubah

Pustaka manajemen status berfungsi untuk menyederhanakan proses komunikasi dan berbagi data antar komponen React. Ada beberapa pustaka manajemen negara pihak ketiga yang tersedia saat ini, yang paling populer adalah Redux dan Recoil

Redux

Redux memiliki penyimpanan terpusat yang berfungsi untuk menjaga keadaan aplikasi agar tetap berjalan sesuai dengan yang diperkirakan. Pustaka ini juga meminimalkan ketidakkonsistenan data, dengan tidak mengizinkan dua komponen memperbarui status aplikasi secara bersamaan

Arsitektur Redux memiliki error log untuk menyederhanakan proses debugging, dan memiliki prosedur tata letak kode yang ketat sehingga pemeliharaan menjadi lebih mudah. Selain itu, Redux memiliki banyak add-on dan kompatibel dengan semua lapisan antarmuka pengguna

Kesimpulannya, Redux agak rumit dan kurang optimal untuk aplikasi kecil dengan sumber data tunggal

Mundur

Recoil adalah pustaka manajemen status JavaScript yang dirilis oleh Facebook. Library ini memiliki fungsi murni yang disebut dengan Selector, bertugas menghitung data dari (satuan yang dapat diubah dari suatu state)

Beberapa komponen dapat menggunakan atom yang sama, dan oleh karena itu, dapat menggunakan keadaan yang sama

Penggunaan atom dan pemilih mengurangi keadaan yang tidak perlu, menyederhanakan kode, dan menghilangkan proses rendering ulang yang terlalu sering untuk React dan komponen turunannya.

Recoil lebih cocok untuk pemula daripada Redux, karena konsep intinya jauh lebih mudah dipahami

Navigasi Terprogram

Navigasi terprogram adalah peristiwa di mana rantai kode menghasilkan tindakan yang mengarahkan pengguna ke area tertentu. Contohnya adalah proses login dan pendaftaran akun, yang secara terprogram akan mengarahkan pengguna ke halaman baru

React Router, pustaka standar React untuk perutean, menyediakan berbagai metode navigasi terprogram yang aman antar komponen tanpa mengharuskan pengguna mengeklik tautan apa pun

Metode utama yang digunakan dalam navigasi terprogram biasanya adalah komponen Redirect, atau riwayat. push() sebagai opsi lain

Singkatnya, paket React Router menyinkronkan antarmuka pengguna dengan URL sehingga Anda dapat mengontrol tampilan aplikasi React tanpa bergantung pada tautan

Apa Keuntungan Bereaksi?

Sejumlah perusahaan besar di seluruh dunia, seperti Netflix, Airbnb, dan American Express, menggunakan React untuk mengembangkan aplikasi web mereka. Beberapa keunggulan React yang menjadikannya favorit para developer dibandingkan kompetitornya adalah

1. Mudah digunakan

Pengembang yang sudah memahami JavaScript dapat mempelajari cara menggunakan React dengan cepat karena pustaka ini bergantung sepenuhnya pada JavaScript dan metode berbasis komponen. Mereka bisa langsung mengembangkan aplikasi berbasis web dengan React, baru belajar beberapa hari

Bahkan jika Anda tidak terbiasa dengan JavaScript, ada banyak situs belajar coding yang menyediakan materi secara gratis. Setelah memahami konsep dasar JavaScript, lanjutkan belajar ReactJS untuk membantu proses pengembangan front-end Anda

2. Mendukung Komponen Java yang Dapat Digunakan Kembali

Dengan React, Anda dapat menggunakan kembali komponen yang telah dikembangkan menjadi aplikasi. Karena ReactJS adalah pustaka sumber terbuka, Anda dapat membangun komponen siap pakai, yang akan mempercepat proses pengembangan aplikasi web yang kompleks

Lebih keren lagi, React memungkinkan komponen bersarang satu sama lain untuk menulis fungsi kompleks tanpa membuat kode terlalu padat. Karena setiap komponen memiliki kontrolnya masing-masing, maka proses pengelolaan menjadi lebih mudah

3. Mudah Menulis Komponen

Berkat integrasi JSX, Anda dapat menulis komponen React dengan lebih mudah; . JSX juga menyederhanakan rendering beberapa fungsi, sehingga kode akan tetap sederhana tanpa mengurangi kemampuan aplikasi

Meskipun bukan ekstensi sintaks yang paling populer, JSX telah terbukti efisien dalam pengembangan komponen khusus dan aplikasi dinamis

Alat CLI (antarmuka baris perintah) resmi React, Create React App, juga dapat mempersingkat proses pengembangan aplikasi satu halaman (satu halaman). Alat ini memiliki proses penyiapan build modern dengan alat siap pakai dan sangat membantu untuk mempelajari ReactJS

4. Performa Tinggi

Seperti yang sudah dibahas, Virtual DOM memungkinkan ReactJS memperbarui struktur data DOM seefisien mungkin. Dengan menyimpan Virtual DOM dalam memori, React menghilangkan proses rendering ulang yang berlebihan yang dapat mengacaukan kinerja

Selain itu, React memungkinkan pengikatan data satu arah antar elemen, sehingga proses debug bisa lebih sederhana. Setiap modifikasi yang dilakukan pada komponen turunan tidak akan mempengaruhi struktur induknya, yang tentunya akan mengurangi resiko kesalahan

5. Ramah SEO

ReactJS dapat memaksimalkan pengoptimalan mesin pencari (SEO) aplikasi web dengan meningkatkan kinerjanya. Sebab, implementasi Virtual DOM merupakan salah satu faktor yang mempengaruhi kecepatan halaman

Kemudian, React juga membantu mesin pencari menavigasi aplikasi web dengan melakukan rendering sisi server

Langkah ini adalah solusi untuk salah satu masalah paling signifikan yang dihadapi oleh situs web dengan banyak kode JavaScript, karena mesin pencari biasanya menganggap situs web seperti ini cukup rumit dan sulit untuk dijelajahi.

Bagaimana Bereaksi Bekerja

Salah satu manfaat utama menggunakan React adalah Anda dapat menyertakan kode HTML dengan JavaScript

Pengguna dapat membuat representasi node DOM dengan mendeklarasikan fungsi Elemen di React. Mari kita lihat kode di bawah ini yang berisi kombinasi HTML dan JavaScript

React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 + 5 });

Anda mungkin telah memperhatikan bahwa sintaks kode HTML di atas mirip dengan XML. Nah, tapi, alih-alih menggunakan kelas DOM tradisional, React menggunakan className

Tag JSX memiliki nama, turunan, dan atribut. Ekspresi dan nilai numerik harus ditulis dalam tanda kurung kurawal. Tanda kutip di atribut JSX mewakili string, mirip dengan JavaScript

Biasanya, React ditulis menggunakan JSX dan bukan JavaScript standar untuk menyederhanakan komponen dan menjaga agar kode tetap terlihat bersih

Berikut adalah contoh kode React yang ditulis menggunakan JSX

MyCounter count={3 + 5} />;
var GameScores = {player1: 2,player2: 5};
DashboardUnit data-index="2">
h1>Scores/h1>Scoreboard className="results" scores={GameScores} />
/DashboardUnit>;

Penjelasan dari tag HTML diatas adalah sebagai berikut

• MyCounter> mewakili variabel yang disebut count yang nilainya adalah ekspresi numerik
• GameScores adalah literal objek yang memiliki dua pasangan nilai prop
• DashboardUnit> adalah blok XML yang dirender di halaman
• score={GameScores} adalah atribut skor, yang mendapatkan nilainya dari objek literal GameScores tadi

Aplikasi React biasanya memiliki satu node root DOM. Merender elemen ke dalam DOM akan mengubah UI halaman

Misalnya, kode berikut menampilkan "Hello World" pada laman dengan merender elemen menjadi simpul DOM yang disebut root

div id="root">/div>
const element = h1>Hello, world/h1>;
ReactDOM.render(element, document.getElementById('root'));

Setiap kali komponen React me-render sebuah elemen, DOM Virtual akan memperbarui DOM asli sesuai dengan itu

Apa itu Bereaksi Asli?

React Native adalah framework JavaScript open-source yang dikembangkan berdasarkan pustaka React. Pengembang menggunakannya untuk membuat aplikasi React lintas platform untuk iOS dan Android

React Native menggunakan API asli (Application Programming Interface) untuk merender komponen UI seluler di Objective-C (iOS) atau Java (Android). Oleh karena itu, pengembang dapat membuat komponen khusus platform dan membagikan kode sumber di berbagai platform

Meski memiliki kesamaan, React Native berbeda dengan ReactJS. Berikut adalah perbedaan antara React Native dan ReactJS

Cara Meluncurkan Aplikasi React di Hostinger

Untuk mengubah aplikasi React menjadi publik, Anda memerlukan server hosting untuk proses penyebaran (launch). Seperti meluncurkan website, Anda bisa melakukannya dengan membeli paket hosting

Miliki server virtual dan sumber daya online Anda sendiri. Coba Hosting VPS

Tutorial di bawah ini akan menunjukkan cara men-deploy aplikasi React di Hostinger. Pastikan Anda sudah memiliki nama domain

1. Buka file paket. json aplikasi React Anda dan masukkan key-value pair di bawah ini ke dalam braket pertama. Dalam contoh ini, nilai kunci beranda adalah jalur ke beranda aplikasi

{
 "name": "hostinger-react",
 "homepage": "http://mydomain.com",
 "version": "1.0.0",
 "description": "my react application",

1. Buka File Manager dari hPanel. Buat file. htaccess di public_html lalu tambahkan kode di bawah ini. File ini akan berfungsi sebagai paket build

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

1. Jika Anda menggunakan hosting VPS, Anda harus menginstal Node. js dan Manajer Paket Node (NPM). Jalankan skrip build npm run untuk membuat paket build, lalu unggah ke folder public_html
2. Hapus file indeks. html dari folder root Anda
3. Ketikkan URL beranda aplikasi React di browser web Anda untuk meluncurkannya

Situs web anti-lambat ekstra cepat. Dapatkan domain gratis dengan langganan hosting web 1 tahun. Pilih Hosting Web

Jadi, Bereaksi Adalah…

ReactJS atau React adalah pustaka JavaScript yang digunakan dalam proses pengembangan aplikasi web dinamis. Beberapa kelebihan dari library ini adalah dapat mempermudah penulisan kode JavaScript, serta meningkatkan performa dan memaksimalkan SEO aplikasi Anda

Kemudian, ReactJS membantu menyederhanakan proses debug dan meminimalkan risiko kesalahan melalui pengikatan data satu arah

Untuk membantu Anda mengingat, berikut ringkasan keuntungan React

• Mudah digunakan dan dipelajari, dan ada banyak materi coding yang tersedia secara online
• Mendukung komponen yang dapat digunakan kembali untuk mempersingkat proses pengembangan
• JSX menyederhanakan pengkodean dan rendering elemen
• Virtual DOM menghilangkan rendering ulang yang berlebihan sehingga performa aplikasi Anda tetap optimal
• Bereaksi membantu mesin pencari merayapi aplikasi web Anda, serta memaksimalkan SEO

Bagaimana?

Penulis

Faradilla A

Faradilla, lebih dikenal dengan Ninda, adalah Content Manager di Hostinger. Dia suka mengikuti tren seputar teknologi, pemasaran digital, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca memecahkan masalah yang dialami

Apa itu sintaks dalam JavaScript?

Bagaimana cara membuat atau menulis sintaks fungsi dalam JavaScript?

Dalam JavaScript, sintaks apa yang kita gunakan untuk menampilkan teks?

Bagaimana cara menulis komentar dalam JavaScript?