Tutorial ReactJS untuk Pemula: Belajar dengan Contoh Langkah demi Langkah

Apa itu ReactJS?

ReactJS adalah front-end sumber terbuka JavaPustaka skrip untuk membangun antarmuka pengguna. ReactJS dikelola oleh Facebook dan komunitas pengembang perorangan serta perusahaan. Platform ini banyak digunakan sebagai basis dalam membangun situs web satu halaman dan aplikasi seluler. Platform ini sangat mudah digunakan, dan memungkinkan pengguna untuk membuat komponen UI yang dapat digunakan kembali.

Fitur ReactJS

BEJ : JSX adalah perpanjangan dari javascript. Meskipun tidak wajib menggunakan JSX dalam reaksi, ini adalah salah satu fitur yang bagus dan mudah digunakan.

Komponen: Komponen seperti fungsi javascript murni yang membantu mempermudah pembuatan kode dengan membagi logika menjadi kode independen yang dapat digunakan kembali. Kita dapat menggunakan komponen sebagai fungsi dan komponen sebagai kelas. Komponen juga memiliki status, alat peraga yang memudahkan kehidupan. Di dalam kelas, status masing-masing alat peraga dipertahankan.

DOM virtual: React menciptakan dom virtual, yaitu cache struktur data dalam memori. Hanya perubahan akhir DOM yang kemudian diperbarui dalam DOM browser.

Javascript Ekspresi: 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 akhir yang diperbarui di dom browser. Ini membuat aplikasi lebih cepat.
Anda dapat membuat komponen pilihan Anda dengan menggunakan fitur komponen reaksi. Komponen dapat digunakan kembali dan juga membantu dalam pemeliharaan kode.
Reactjs adalah pustaka javascript sumber terbuka, sehingga mudah untuk memulainya.
ReactJS telah menjadi sangat populer dalam waktu singkat dan dikelola oleh Facebook dan Instagram. Ini digunakan oleh banyak perusahaan terkenal seperti Apple, Netflix, Dll
Facebook mengelola ReactJS, perpustakaannya, sehingga terpelihara dengan baik dan terus 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 Javascript daripada di Html.

Kekurangan ReactJS

Berikut kekurangan/kekurangan menggunakan ReactJS:

Sebagian besar kode ditulis dalam JSX, yaitu Html dan css adalah bagian dari javascript, ini bisa sangat membingungkan karena sebagian besar kerangka kerja lain lebih suka memisahkan Html dari kode javascript.
Ukuran file ReactJS besar.

Menggunakan ReactJS dari CDN

Untuk mulai bekerja dengan react, kita perlu menginstal reactjs terlebih dahulu. Anda dapat dengan mudah mulai menggunakan reactjs dengan menggunakan file javascript CDN, seperti yang ditunjukkan di bawah ini.

Kunjungi situs resmi reactjs untuk mendapatkan tautan CDN, yaitu, https://reactjs.org/docs/cdn-links.html dan Anda akan mendapatkan berkas yang diperlukan untuk menjelaskan 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 reaksi terbaru untuk react-development.js dan react-dom.developement.js. Anda dapat menghosting file di pihak Anda untuk mulai bekerja dengan reactjs.

Jika Anda berencana menggunakan file CDN, pastikan untuk tetap menggunakan atribut cross-origin, untuk menghindari masalah lintas domain. Kode Reactjs tidak dapat dieksekusi secara langsung di browser dan perlu dijalankan menggunakan Babel ke javascript 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 kerja ReactJS 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 dengan file CDN. Dikatakan bahwa menggunakan skrip babel secara langsung bukanlah praktik yang baik, dan pendatang baru dapat menggunakannya untuk mempelajari reactjs untuk saat ini. Dalam produksi, Anda harus menginstal react menggunakan paket npm.

Menggunakan Paket NPM

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

Setelah Anda menginstal nodejs, buat folder proyek reaksi/.

Untuk memulai pengaturan proyek, jalankan perintah npm init.

Seperti inilah tampilan struktur foldernya:

reactproj\
package.json

Sekarang kita akan menginstal paket-paket yang kita perlukan.

Berikut adalah daftar paket untuk reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

Buat folder src / dimana semua kode js akan masuk ke folder itu. Semua kode untuk proyek reactjs akan tersedia di folder src/. Buat file index.js dan tambahkan import react dan react-dom, seperti gambar 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 mengembalikan kode dasar untuk reactjs. Kami akan menjelaskan detailnya di bab berikutnya. Kami ingin menampilkan Halo, dari Tutorial Guru99 dan hal yang sama diberikan pada elemen dom dengan id “root”. Diambil dari file index.html yang merupakan file awal, seperti gambar di bawah ini.

Buat folder 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 skrip reaksi 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 skrip reaksi 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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Untuk mulai menguji reactjs, jalankan perintah

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>

Kami juga akan menggunakan proses yang sama untuk mengeksekusi file javascript di bab berikutnya. Tambahkan semua file js dan .jsx Anda di folder src/. Struktur filenya adalah sebagai berikut:

reatproj/
	 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 dengan aplikasi reaksi pertama.

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 sebagai index.js di folder src/

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

ReactDOM.render(

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

ReactDOM.render akan menambahkan tag ke elemen dengan id root. Ini adalah file html yang kami miliki:

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

Langkah 3) Kompilasi Kode.

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

Ketika Anda menjalankan perintah di atas, itu akan mengkompilasi file dan memberi tahu Anda jika ada kesalahan, jika semuanya terlihat baik, itu akan membuka browser dan menjalankan file index.html di http://localhost:3000/index.html

Perintah: npm jalankan mulai:

C:\reactproj>npm run start

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

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

Apa itu BEJ?

JSX adalah ekstensi dari javascript. Ini adalah skrip template di mana Anda akan memiliki kekuatan menggunakan HTML dan Javascript bersama-sama.

Berikut adalah contoh sederhana kode JSX.

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

Mengapa kita membutuhkan JSX di React?

Untuk UI, kita memerlukan Html, dan setiap elemen di dom akan memiliki event yang harus ditangani, perubahan status, dll.

Dalam kasus React, ini memungkinkan kita untuk menggunakan Html dan javascript dalam file yang sama dan menangani perubahan status di dom dengan cara yang efisien.

Ekspresi di BEJ

Berikut adalah contoh sederhana bagaimana menggunakan ekspresi di BEJ.

Dalam contoh ReactJS sebelumnya, kami 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 ekspresi tersebut diperluas selama run time. Ekspresi dalam react sama dengan ekspresi javascript.

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 bahwa ekspresi {display} tidak diganti. React tidak tahu apa yang harus dilakukan ketika 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 text.jsx di index.js. Kami menginginkannya tag h1 variabel yang akan digunakan di dalam script.js, sehingga sama diekspor seperti yang ditunjukkan di atas di test.jsx

Berikut adalah kode yang 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 gambar 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 seperti fungsi javascript murni yang membantu mempermudah pembuatan kode dengan membagi 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, dan ditugaskan ke Halo_komp variabel dan yang sama diekspor menggunakan ekspor.

Sekarang mari kita gunakan komponen ini dalam 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.

Apa itu State di ReactJS?

Status adalah objek javascript yang mirip dengan props yang memiliki data untuk digunakan dengan render reactjs. Data negara adalah objek pribadi dan digunakan dalam komponen di dalam kelas.

Contoh Negara

Berikut adalah contoh kerja tentang cara menggunakan status di dalam 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 akan digunakan di dalam komponen. Mereka bertindak sebagai objek atau variabel global yang dapat digunakan di dalam Komponen.

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 untuk Komponen. Hal yang sama dapat diakses sebagai props di dalam fungsi Hello, yang merupakan 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 di suatu 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;

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

Siklus hidup komponen dibagi menjadi tahap Inisialisasi, Pemasangan, Pembaruan, dan Lepas Pemasangan.

Berikut penjelasan detail masing-masing Komponen.

Komponen dalam 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.

Bantalan: Pada fase ini, Komponen dirender di dalam dom. Kami memiliki paparan terhadap metode berikut dalam status pemasangan.

ComponentDidMount(): Ini juga dipanggil ketika Komponen baru saja ditambahkan ke dom.

render(): Anda memiliki metode ini untuk semua komponen yang dibuat. Ini mengembalikan node Html.

Memperbarui: Dalam status ini, dom berinteraksi dengan pengguna dan diperbarui. Misalnya, Anda memasukkan sesuatu di kotak teks, sehingga properti status diperbarui.

Berikut ini adalah metode yang tersedia dalam status pembaruan:

mustComponentUpdate() : dipanggil ketika komponen diperbarui.

ComponentDidUpdate() : setelah komponen diupdate.

Melepas: keadaan ini muncul ketika Komponen tidak diperlukan atau dihapus.

Berikut ini adalah metode yang tersedia dalam status unmount:

Komponen willUnmount(): dipanggil saat Komponen dihapus atau dihancurkan.

Contoh Kerja

Berikut adalah contoh kerja yang menunjukkan metode yang dipanggil di setiap negara bagian.

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 output di browser

Di konsol browser Anda mendapatkan:

Ketika pengguna memasukkan dalam kotak teks:

Pesan berikut ditampilkan di konsol:

Bekerja dengan Formulir

Dalam elemen input reactjs Html seperti , dan <select /> memiliki statusnya sendiri dan perlu diperbarui saat pengguna berinteraksi menggunakan metode setState().

Dalam 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 menjaga keadaan setiap kali ada perubahan.

Kami telah menggunakan event onChange dan onClick pada kotak teks dan tombol submit. Saat pengguna memasukkan teks di dalam kotak teks, event onChange dipanggil, dan kolom 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:

Klik tombol kirim

Bekerja dengan Acara di ReactJS

Bekerja dengan acara di reactjs sama seperti yang Anda lakukan di javascript. Anda dapat menggunakan semua event handler yang digunakan dalam javascript. Metode setState() digunakan untuk memperbarui status saat 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 metode khusus yang disebut setState, yang membantu menjaga keadaan setiap kali ada perubahan.

Kami telah menggunakan acara dalam perubahan dan klik pada kotak teks dan tombol. Ketika pengguna memasukkan ke dalam kotak teks, dalam perubahan acara dipanggil, dan bidang nama di dalam status objek status 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

Akan melihat contoh kerja untuk memahami cara kerja inline css 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 color: 'red' 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 gaya yang Anda inginkan pada elemen dan menggunakan ekspresi untuk menambahkan gaya, seperti yang ditunjukkan pada contoh di atas.

Bekerja dengan CSS Eksternal di ReactJS

Mari kita membuat 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>
    <script src = "out/script.min.js"></script>
  </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 memberikan rincian kelas. 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.

Ringkasan

ReactJS adalah front-end sumber terbuka JavaPustaka skrip untuk membangun antarmuka pengguna. Pustaka ini dikelola oleh Facebook dan digunakan oleh banyak perusahaan saat ini untuk pengembangan UI.
Fitur inti ReactJS mencakup JSX, komponen (komponen fungsional dan komponen berbasis kelas), siklus hidup suatu komponen, props, dan dukungan status untuk suatu komponen, bekerja dengan ekspresi javascript.
Pengaturan proyek ReactJS dijelaskan menggunakan file CDN dan juga menggunakan paket npm untuk membangun proyek.
JSX adalah perpanjangan dari javascript. Ini adalah skrip templat di mana Anda akan memiliki kemampuan untuk menggunakan Html dan javascript secara bersamaan.
Komponen seperti fungsi javascript murni yang membantu mempermudah pembuatan kode dengan membagi logika menjadi kode independen yang dapat digunakan kembali.
Status adalah objek javascript yang mirip dengan props yang memiliki data untuk digunakan dengan render reactjs. Data negara adalah objek pribadi dan digunakan dalam komponen di dalam kelas.
Props adalah properti yang akan digunakan di dalam komponen.
Siklus hidup komponen dibagi menjadi tahap Inisialisasi, Pemasangan, Pembaruan, dan Lepas Pemasangan.
Dalam elemen input html reactjs seperti , dan <select /> memiliki statusnya sendiri dan perlu diperbarui saat pengguna berinteraksi menggunakan metode setState().
Bekerja dengan acara di reactjs sama seperti yang Anda lakukan di javascript. Anda dapat menggunakan semua event handler yang digunakan dalam javascript. Metode setState() digunakan untuk memperbarui status saat pengguna berinteraksi dengan elemen Html apa pun.
ReactJS memungkinkan Anda bekerja dengan css eksternal serta css inline menggunakan ekspresi javascript.

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

Anda mungkin ingin:

5 Kursus React TERBAIK dengan…

Apa itu ReactJS?

Fitur ReactJS

Kelebihan ReactJS

Kekurangan ReactJS

Menggunakan ReactJS dari CDN

Untuk dev

Untuk produksi

ARTIKEL TERKAIT

Menggunakan Paket NPM

Cara Membuat Pengaturan Proyek React Pertama Anda

Apa itu BEJ?

Mengapa kita membutuhkan JSX di React?

Ekspresi di BEJ

Apa itu Komponen di ReactJS?

Komponen sebagai fungsi

Kelas sebagai Komponen

Apa itu State di ReactJS?

Contoh Negara

Apa itu Props di ReactJS?

Alat Peraga untuk Komponen Fungsi

Alat Peraga untuk Komponen Kelas

Siklus Hidup suatu Komponen

Contoh Kerja

Bekerja dengan Formulir

Bekerja dengan Acara di ReactJS

Bekerja dengan CSS sebaris di ReactJS

Bekerja dengan CSS Eksternal di ReactJS

Ringkasan