Tutorial ReactJS untuk Pemula

Apa itu ReactJS?

ReactJS adalah front-end sumber terbuka JavaPustaka skrip untuk membangun antarmuka pengguna. ReactJS Dikelola oleh Meta (sebelumnya Facebook) dan komunitas pengembang individu serta perusahaan. Platform ini banyak digunakan sebagai dasar dalam membangun aplikasi satu halaman (single-page application) dan aplikasi seluler. Platform ini sangat mudah digunakan, dan memungkinkan pengguna untuk membuat komponen UI yang dapat digunakan kembali.

Sebelum Anda menulis baris kode React pertama Anda, ada baiknya mengetahui apa yang membuat pustaka ini berbeda dari yang lain. JavaSkrip. Bagian selanjutnya akan membahas fitur-fitur intinya.

Fitur ReactJS

JSX: JSX adalah ekstensi dari JavaSkrip. Meskipun penggunaan JSX di React tidak wajib, ini adalah salah satu fitur yang bagus dan mudah digunakan.

KomponenKomponen itu seperti murni JavaFungsi skrip membantu mempermudah kode dengan memisahkan logika menjadi kode independen yang dapat digunakan kembali. Kita dapat menggunakan komponen sebagai fungsi dan komponen sebagai kelas. Komponen juga memiliki state dan props, yang memudahkan pekerjaan. Di dalam komponen kelas, state dan props dikelola.

DOM virtual: React membuat DOM virtual, yaitu, cache struktur data dalam memori. Hanya perubahan terakhir yang kemudian diperbarui di DOM browser, sehingga rendering tetap cepat.

JavaEkspresi Skrip: Ekspresi JS dapat digunakan dalam file JSX menggunakan tanda kurung kurawal, misalnya {}.

Kelebihan ReactJS

Berikut adalah kelebihan/manfaat penting menggunakan ReactJS:

• ReactJS menggunakan DOM virtual yang memanfaatkan cache struktur data dalam memori, dan hanya perubahan terakhir yang diperbarui di DOM browser. Hal ini membuat aplikasi lebih cepat.
• Anda dapat membuat komponen pilihan Anda sendiri dengan menggunakan fitur komponen React. Komponen-komponen tersebut dapat digunakan kembali dan juga bermanfaat dalam pemeliharaan kode.
• ReactJS adalah perangkat lunak sumber terbuka. JavaPustaka skrip, sehingga mudah untuk memulai.
• ReactJS menjadi sangat populer dalam waktu singkat dan mendukung produk-produk seperti Facebook dan InstagramTeknologi ini digunakan oleh banyak perusahaan terkenal seperti Apple, Netflix, Dll
• Meta mengelola pustaka ReactJS, sehingga pustaka tersebut terawat dengan baik dan selalu diperbarui.
• ReactJS dapat digunakan untuk mengembangkan UI yang kaya untuk aplikasi desktop dan seluler.
• Mudah untuk di-debug dan diuji karena sebagian besar pengkodean dilakukan JavaNaskah alih-alih dalam format HTML.

Kekurangan ReactJS

Berikut adalah kekurangan/kelemahan menggunakan ReactJS:

• Sebagian besar kode ditulis dalam JSX, yaitu, HTML dan CSS merupakan bagian darinya. JavaSkrip. Ini bisa sangat membingungkan, karena sebagian besar kerangka kerja lain lebih memilih untuk menyimpan...ping HTML terpisah dari JavaKode skrip.
• Ukuran file ReactJS relatif besar.

Dengan memahami kelebihan dan kekurangannya, Anda siap untuk menginstal React. Cara tercepat untuk mencobanya adalah langsung dari CDN, yang akan kita bahas terlebih dahulu; pengaturan berbasis npm untuk proyek nyata akan menyusul setelahnya.

Menggunakan ReactJS dari CDN

Untuk mulai bekerja dengan React, pertama-tama kita perlu menambahkan ReactJS ke halaman kita. Anda dapat dengan mudah memulai menggunakan ReactJS dengan CDN. JavaFile skrip, seperti yang ditunjukkan di bawah ini.

Kunjungi situs dokumentasi React lama untuk mendapatkan tautan CDN, yaitu, https://legacy.reactjs.org/docs/cdn-links.html, dan Anda akan mendapatkan file-file yang dibutuhkan seperti yang dijelaskan pada gambar berikut.

Untuk dev

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Untuk produksi

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

menggantikan versi dengan versi React yang Anda inginkan untuk react.development.js dan react-dom.development.js. Kami menggunakan versi 16 di halaman ini sehingga contoh-contoh di bawah ini berjalan tanpa perubahan.

Jika Anda berencana menggunakan file CDN, pastikan untuk tetap menggunakan atribut crossorigin untuk menghindari masalah lintas domain. Kode ReactJS tidak dapat dieksekusi langsung di browser dan perlu ditranspilasi menggunakan Babel menjadi kode biasa. JavaSkrip sebelum dieksekusi di browser.

Berikut script BabelJS yang bisa digunakan:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Berikut adalah contoh ReactJS yang berfungsi menggunakan file CDN dan skrip BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Keluaran:

Kita akan membahas detail kode di bab berikutnya; mari kita lihat cara kerjanya di sini dengan file CDN. Menggunakan skrip Babel secara langsung bukanlah praktik yang baik, dan pemula sebaiknya hanya menggunakannya untuk mempelajari ReactJS untuk saat ini. Dalam produksi, Anda harus menginstal React menggunakan paket npm.

Menggunakan Paket NPM

Pastikan Anda telah menginstal Node.js. Jika belum terinstal, ikuti tutorial ini untuk Node.js (https://www.guru99.com/node-js-tutorial.html) instalasi.

Setelah Node.js terinstal, buatlah sebuah folder. proyek reaksi/.

Untuk memulai pengaturan proyek, jalankan perintah npm init.

Beginilah tampilan struktur foldernya:

reactproj\
package.json

Sekarang kita akan menginstal paket-paket yang kita perlukan.

Berikut adalah daftar paket untuk ReactJS. Kami membatasi React ke versi 16 agar ReactDOM.render Contoh-contoh di halaman ini berjalan persis seperti yang ditunjukkan:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Buka command prompt dan jalankan perintah di atas di dalam folder reactproj/.

Buat folder src / Di sinilah semua kode JS akan ditempatkan. Semua kode untuk proyek ReactJS akan tersedia di folder src/. Buat file index.js dan impor react dan react-dom, seperti yang ditunjukkan di bawah ini.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Kami telah menulis kode dasar untuk ReactJS. Kami akan menjelaskan detailnya di bab berikutnya. Kami ingin menampilkan Halo, dari GuruTutorial 99, dan hal yang sama diberikan kepada elemen DOM dengan id “root”. ID ini diambil dari file index.html, yang merupakan file awal, seperti yang ditunjukkan di bawah ini.

Buat folder bernama public/ dan tambahkan index.html di dalamnya seperti yang ditunjukkan di bawah ini.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Paket react-scripts akan menangani kompilasi kode dan memulai server untuk menampilkan file HTML, yaitu index.html. Anda perlu menambahkan perintah di package.json yang akan menangani penggunaan react-scripts untuk mengkompilasi kode dan memulai server, seperti yang ditunjukkan di bawah ini:

 "scripts": {
    "start": "react-scripts start"
  }

Setelah menginstal semua paket dan menambahkan perintah di atas, package.json terakhir adalah sebagai berikut:

Paket.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Untuk memulai pengujian ReactJS, jalankan perintah berikut:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Ini akan membuka browser dengan URL http://localhost:3000/ seperti yang ditunjukkan di bawah ini:

publik/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Kita akan menggunakan proses yang sama untuk mengeksekusi JavaFile skrip juga akan disertakan di bab-bab berikutnya. Tambahkan semua file .js dan .jsx Anda ke dalam folder src/. Struktur file akan seperti berikut:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Cara Membuat Pengaturan Proyek React Pertama Anda

Berikut adalah panduan langkah demi langkah dalam Tutorial ReactJS ini untuk memulai aplikasi React pertama Anda.

Langkah 1) Impor paket reaksi.
1. Untuk memulai ReactJS, kita perlu mengimpor paket react terlebih dahulu sebagai berikut.

import React from 'react';
import ReactDOM from 'react-dom';

2. Simpan file tersebut sebagai index.js di folder src/.

Langkah 2) Tulis Sederhana Code.
Kami akan menulis kode sederhana dalam tutorial React JS ini, di mana kami akan menampilkan pesannya “Halo, dari Guru99 Tutorial!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render akan menambahkan Tambahkan tag ke elemen dengan id root. Berikut adalah file HTML yang kita miliki:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Langkah 3) Susunlah Code.

Selanjutnya dalam Tutorial React.js ini, kita perlu mengkompilasi kode untuk mendapatkan output di browser.

Berikut struktur foldernya:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Kami telah menambahkan perintah untuk mengkompilasi file terakhir di package.json sebagai berikut:

"scripts": {
    "start": "react-scripts start"
  },

Untuk mengkompilasi file akhir, jalankan perintah berikut:

npm run start

Saat Anda menjalankan perintah di atas, file akan dikompilasi dan Anda akan diberi tahu jika ada kesalahan. Jika semuanya berjalan lancar, browser akan terbuka dan halaman akan dijalankan di alamat tersebut. http://localhost:3000/

Perintah: npm jalankan mulai:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Langkah 4) Periksa Keluaran.
The URL http://localhost:3000 akan terbuka di browser setelah kode dikompilasi, seperti yang ditunjukkan di bawah ini:

Cara Mengatur React dengan Vite (Pendekatan Modern)

Pengaturan react-scripts di atas berasal dari Create React App (CRA), yang merupakan starter standar selama bertahun-tahun. Tim React secara resmi menghentikan penggunaan Create React App pada Februari 2025, jadi proyek baru sebaiknya menggunakan alat build modern. Pilihan paling populer saat ini adalah Tinggalyang memulai proses lebih cepat dan menghasilkan ukuran build yang lebih kecil.

Berikut cara membuat proyek React baru dengan Vite:

Langkah 1) Jalankan perintah scaffolding di terminal Anda:

npm create vite@latest my-react-app -- --template react

Langkah 2) Masuk ke dalam folder dan instal dependensi:

cd my-react-app
npm install

Langkah 3) Mulai server pengembangan:

npm run dev

Vite menyediakan aplikasi tersebut di http://localhost:5173/ Secara default, program akan memuat ulang secara instan saat Anda menyimpan file.

Perbedaan utama dari pengaturan lama pada halaman ini:

• Berkas entri adalah src/main.jsx alih-alih src/index.js.
• Ini menginstal React versi terbaru, yang menggunakan buatAkar alih-alih ReactDOM.render.
• File index.html berada di direktori root proyek, bukan di public/.
• Bangunan diproduksi dengan npm run build ke dalam folder dist/.

Untuk kebutuhan full-stack seperti routing dan rendering server, tim React juga merekomendasikan framework seperti... Next.jsSemua yang Anda pelajari di bab-bab di bawah ini — JSX, komponen, state, dan props — berlaku tanpa perubahan dalam proyek Vite atau Next.js.

Apa itu BEJ?

JSX adalah ekstensi dari JavaSkrip. Ini adalah skrip templat di mana Anda akan memiliki kemampuan untuk menggunakan HTML dan JavaTulis naskah bersama.

Berikut adalah contoh sederhana kode JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Mengapa kita membutuhkan JSX di React?

Untuk sebuah UI, kita membutuhkan HTML, dan setiap elemen dalam DOM akan memiliki peristiwa yang perlu ditangani, perubahan status, dan lain sebagainya.

Dalam kasus React, hal ini memungkinkan kita untuk menggunakan HTML dan JavaBuat skrip dalam file yang sama dan tangani perubahan status di DOM secara efisien.

Ekspresi di BEJ

Berikut adalah contoh sederhana bagaimana menggunakan ekspresi di BEJ.

Pada contoh ReactJS sebelumnya, kita telah menulis sesuatu seperti:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Sekarang kita akan mengubah kode di atas untuk menambahkan ekspresi. Ekspresi digunakan di dalam kurung kurawal {}, dan akan diekspansi selama waktu eksekusi. Ekspresi di React sama dengan JavaEkspresi skrip.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Sekarang mari kita uji hal yang sama di browser.

Anda dapat melihat pada tangkapan layar di atas bahwa ekspresi {display} tidak diganti. React tidak tahu apa yang harus dilakukan ketika sebuah ekspresi digunakan di dalam file .js.

Sekarang mari kita tambahkan perubahan dan buat file .jsx, seperti yang ditunjukkan di bawah ini:

tes.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Kami telah menambahkan kode yang diperlukan dan akan menggunakan file test.jsx di index.js. Kami menginginkan tag h1 Variabel ini akan digunakan di dalam index.js, jadi variabel yang sama diekspor seperti yang ditunjukkan di atas dalam test.jsx.

Berikut kode yang telah dimodifikasi di index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Untuk menggunakan test.jsx di index.js, kita harus mengimpornya terlebih dahulu seperti yang ditunjukkan di bawah ini:

import h1tag from './test.jsx';

Kita dapat menggunakan h1tag sekarang di ReactDOM.render seperti yang ditunjukkan di bawah ini:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Berikut adalah output ketika kita memeriksa hal yang sama di browser:

Apa itu Komponen di ReactJS?

Komponen itu seperti murni JavaFungsi skrip yang membantu mempermudah penulisan kode dengan memisahkan logika menjadi kode independen yang dapat digunakan kembali.

Komponen sebagai fungsi

tes.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Kami telah membuat fungsi bernama Halo yang mengembalikan tag h1, seperti yang ditunjukkan di atas. Nama fungsi bertindak sebagai elemen, seperti yang ditunjukkan di bawah ini:

const Hello_comp = <Hello />;
export default Hello_comp;

Komponen Halo digunakan sebagai tag HTML, yaitu, , ditugaskan ke Halo_komp variabel, dan hal yang sama diekspor menggunakan ekspor.

Sekarang mari kita gunakan komponen ini di file index.js seperti yang ditunjukkan di bawah ini:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Berikut ini output di browser:

Kelas sebagai Komponen

Berikut adalah contoh ReactJS yang menggunakan kelas sebagai komponennya.

tes.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Kita dapat menggunakan komponen Hello di file index.js sebagai berikut:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Komponen Hello digunakan sebagai tag HTML, yaitu, .

Ini adalah output yang sama.

Komponen Kelas vs Komponen Fungsi dan Hook

Anda sekarang telah melihat kedua cara untuk menulis komponen, jadi mana yang sebaiknya Anda gunakan? Halaman ini mengajarkan komponen kelas karena komponen ini membuat konsep state dan siklus hidup menjadi eksplisit, yang sangat berharga bagi pemula dan masih muncul dalam basis kode lama. Namun, sejak React 16.8 memperkenalkan Hooks, komponen fungsi juga dapat menyimpan state, dan ini adalah gaya yang direkomendasikan untuk semua kode baru.

Aspek	Komponen Kelas	Komponen Fungsi dengan Hooks
Negara	this.state dan this.setState()	Hook useState()
Lingkaran kehidupan	componentDidMount, componentDidUpdate, componentWillUnmount	Hook useEffect() mencakup ketiganya
Sintaksis	Lebih banyak kode standar (konstruktor, bind, this)	Lebih singkat, tanpa kata kunci ini
Status	Didukung, gaya lama	Direkomendasikan untuk kode baru

Berikut contoh state dari halaman ini yang ditulis ulang dengan hook useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Kedua versi menghasilkan output yang sama. Pelajari sintaks kelas yang digunakan dalam bab-bab di bawah ini, lalu praktikkan konversi setiap contoh ke Hooks.

Apa itu State di ReactJS?

Sebuah negara adalah sebuah JavaObjek skrip, mirip dengan props, yang menyimpan data yang akan digunakan dengan render ReactJS. Data state adalah objek privat dan digunakan di dalam komponen di dalam sebuah kelas.

Contoh Negara

Berikut adalah contoh cara menggunakan state di dalam sebuah kelas.

tes.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Inilah yang kami dapatkan saat kami mengujinya di browser:

Apa itu Props di ReactJS?

Props adalah properti yang digunakan di dalam sebuah komponen. Props bertindak sebagai objek atau variabel global yang dapat digunakan di dalam komponen tersebut.

Alat Peraga untuk Komponen Fungsi

Berikut adalah contoh meneruskan props ke komponen fungsi.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Seperti yang ditunjukkan di atas, kami telah menambahkan msg atribut pada komponen. Hal yang sama dapat diakses sebagai props di dalam fungsi Hello, yang merupakan sebuah objek yang akan memiliki msg rincian atribut, dan hal yang sama digunakan sebagai ekspresi.

Komponen yang digunakan di index.js sebagai berikut:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Berikut ini output di browser:

Alat Peraga untuk Komponen Kelas

Untuk mengakses props dalam sebuah kelas, kita dapat melakukannya sebagai berikut:

tes.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

The msg atribut diteruskan ke komponen di index.js sebagai berikut:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Ini adalah output di browser:

Juga Periksa: - Tutorial AngularJS untuk Pemula: Pelajari AngularJS Langkah demi Langkah

Siklus Hidup suatu Komponen

Setelah membahas komponen, state, dan props, langkah selanjutnya adalah memahami kapan React memanggil metode komponen Anda. Siklus hidup komponen dibagi menjadi tahap Inisialisasi, Mounting, Update, dan UnMounting.

Berikut penjelasan rinci untuk setiap tahapannya.

Sebuah komponen di ReactJS memiliki tahapan-tahapan berikut:

Inisialisasi: Ini adalah tahap pertama dari siklus hidup komponen.

Di sini ia akan memiliki props default dan status pada level awal.

BantalanPada fase ini, komponen dirender di dalam DOM. Kita dapat mengakses metode-metode berikut dalam keadaan pemasangan (mounting):

• render(): Anda memiliki metode ini untuk semua komponen yang dibuat. Metode ini mengembalikan node HTML.
• componentDidMount(): Fungsi ini dipanggil segera setelah komponen ditambahkan ke DOM.

MemperbaruiDalam keadaan ini, pengguna berinteraksi dengan DOM dan DOM tersebut diperbarui. Misalnya, Anda memasukkan sesuatu ke dalam kotak teks, sehingga properti status diperbarui.

Berikut adalah metode yang tersedia dalam status pembaruan:

• shouldComponentUpdate(): dipanggil sebelum rendering ulang; fungsi ini memungkinkan Anda memutuskan apakah komponen harus diperbarui. Mengembalikan nilai true akan melakukan rendering ulang komponen.
• componentDidUpdate(): dipanggil setelah komponen diperbarui.

Melepas: Kondisi ini muncul ketika komponen tersebut tidak dibutuhkan atau telah dihapus.

Berikut adalah metode yang tersedia dalam keadaan tidak terpasang (unmount):

• componentWillUnmount(): dipanggil tepat sebelum komponen dihapus atau dihancurkan.

Contoh Penerapan Metode Siklus Hidup

Berikut adalah contoh yang menunjukkan metode-metode yang dipanggil pada setiap tahap.

Contoh: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Saat Anda memeriksa hasilnya di browser:

Di konsol browser Anda akan mendapatkan:

Ketika pengguna memasukkan dalam kotak teks:

Di konsol, pesan-pesan berikut ditampilkan:

Sekarang setelah Anda mengetahui kapan sebuah komponen di-render dan diperbarui, mari kita terapkan state dan event pada kasus penggunaan praktis: menangani input pengguna melalui formulir.

Bekerja dengan Formulir

Di ReactJS, elemen input HTML seperti , , dan <select /> memiliki statusnya sendiri dan perlu diperbarui ketika pengguna berinteraksi, menggunakan metode setState().

Pada bab ini, kita akan melihat cara bekerja dengan formulir di ReactJS.

Berikut adalah contoh yang berfungsi:

formulir.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Untuk kolom input, kita perlu mempertahankan statusnya, jadi untuk itu React menyediakan metode khusus yang disebut setState, yang membantu mempertahankan status setiap kali terjadi perubahan. Dalam aplikasi nyata, juga disebut event.preventDefault() di dalam formSubmit untuk menghentikan browser memuat ulang halaman saat formulir dikirim.

Kami telah menggunakan event onChange dan onClick pada textbox dan tombol submit. Saat pengguna mengetik di dalam textbox, event onChange dipanggil, dan field nama di dalam objek state diperbarui, seperti yang ditunjukkan di bawah ini:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Output di browser adalah sebagai berikut:

Langkah 1) Masukkan nama Anda di kotak teks:

Langkah 2) Klik tombol kirim:

Bekerja dengan Acara di ReactJS

Formulir hanyalah salah satu sumber interaksi pengguna. Bekerja dengan event di ReactJS sama seperti yang biasa Anda lakukan di JavaSkrip. Anda dapat menggunakan semua penanganan kejadian yang digunakan di JavaSkrip. Metode setState() digunakan untuk memperbarui status ketika pengguna berinteraksi dengan elemen HTML apa pun.

Berikut adalah contoh cara menggunakan event di ReactJS.

acara.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Untuk kolom input, kita perlu mempertahankan statusnya, jadi untuk itu React menyediakan setState metode yang membantu mempertahankan status setiap kali terjadi perubahan.

Kami telah menggunakan acara-acara tersebut. dalam perubahan ke klik pada kotak teks dan tombol. Saat pengguna mengetik di dalam kotak teks, maka dalam perubahan Saat event dipanggil, field nama di dalam objek state diperbarui, seperti yang ditunjukkan di bawah ini:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Berikut ini output di browser:

Saat pengguna memasukkan nama:

Saat pengguna mengklik tombol Klik Di Sini:

Bekerja dengan CSS sebaris di ReactJS

Setelah komponen Anda menangani data dan peristiwa, langkah terakhir adalah menatanya. Kita akan melihat contoh yang berfungsi untuk memahami CSS inline di ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Saya telah menambahkan gaya warna 'merah' ke tag h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Output di browser adalah sebagai berikut:

Anda dapat membuat objek dengan gaya yang Anda inginkan pada elemen tersebut dan menggunakan ekspresi untuk menambahkan gaya, seperti yang ditunjukkan pada contoh di atas.

Bekerja dengan CSS Eksternal di ReactJS

Mari kita buat file CSS eksternal. Untuk itu, buat folder css/ dan tambahkan style.css di dalamnya.

style.css

.h1tag {
color:red;
}

Tambahkan style.css ke file index.html Anda

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Sekarang mari kita tambahkan kelas ke tag h1 di file .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Atribut className diberikan detail kelas. Perhatikan bahwa JSX menggunakan nama kelas alih-alih atribut class HTML, karena class adalah kata kunci yang dipesan di JavaSkrip. Sekarang mari kita uji di browser.

Inilah yang Anda lihat saat memeriksa tag h1 di browser:

Anda dapat melihat bahwa class=”h1tag” berhasil ditambahkan ke tag h1.

Mengapa ReactDOM.render Digantikan oleh createRoot

Setiap contoh di halaman ini memasang aplikasi dengan ReactDOM.render, yang benar untuk React 16 dan 17, versi yang ditargetkan oleh kursus ini. React 18, yang dirilis pada Maret 2022, menggantikan titik masuk tersebut dengan API createRoot, dan React 19 menghapus ReactDOM.render sepenuhnya. Alasannya adalah konkurensi: createRoot memungkinkan React untuk menyiapkan beberapa versi UI secara bersamaan, menghentikan rendering prioritas rendah, dan menjaga agar proses tetap berjalan.ping dan animasi yang halus. Fitur-fitur seperti pengelompokan otomatis, useTransition, dan streaming berbasis Suspense semuanya bergantung padanya.

Versi modern dari file index.js yang digunakan di seluruh halaman ini terlihat seperti ini:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Semua hal lain yang Anda pelajari di sini — komponen, JSX, state, props, dan event — bekerja dengan cara yang sama setelah perubahan satu baris ini di titik masuk. Perbedaan versi seperti ini sering muncul. Pertanyaan wawancara React JSOleh karena itu, ada baiknya memahami kedua API tersebut.

Pertanyaan Umum Demo Slot

Juga Periksa: - 70 Pertanyaan dan Jawaban Wawancara React Teratas (Diperbarui)