Apa Itu React - IDS Digital College

Panduan Terbaik untuk Mengetahui Apa Itu React

Apa itu React?

React adalah perpustakaan pengembangan UI berbasis JavaScript. Facebook dan komunitas pengembang open-source menggunkannya. Meskipun React merupakan library daripada bahasa, React digunakan secara luas dalam pengembangan web. Library ini pertama kali muncul pada Mei 2013 dan sekarang menjadi salah satu library frontend yang paling umum digunakan untuk pengembangan web.

React menawarkan berbagai ekstensi untuk seluruh arsitektur aplikasi, seperti Flux dan React Native, lebih dari sekadar UI.

Mengapa React?

Popularitas React saat ini telah melampaui semua framework pengembangan front-end lainnya. Inilah alasannya:

  • Pembuatan aplikasi dinamis yang mudah: React memudahkan pembuatan aplikasi web dinamis karena memerlukan lebih sedikit pengkodean dan menawarkan lebih banyak fungsionalitas, dibandingkan dengan JavaScript, di mana pengkodean sering kali menjadi rumit.
  • Peningkatan kinerja: React menggunakan DOM Virtual, sehingga membuat aplikasi web lebih cepat. Virtual DOM membandingkan status komponen sebelumnya dan hanya memperbarui item di DOM nyata yang diubah, alih-alih untuk memperbarui semua komponen, seperti yang dilakukan aplikasi web konvensional. 
  • Komponen yang dapat digunakan kembali: Komponen adalah blok pembangun dari aplikasi React, dan satu aplikasi biasanya terdiri dari beberapa komponen. Komponen-komponen ini memiliki logika dan kontrolnya sendiri, dan dapat digunakan kembali di seluruh aplikasi, yang secara dramatis dapat mengurangi waktu pengembangan aplikasi.
  • Aliran data searah: React mengikuti aliran data searah. Ini berarti bahwa saat mendesain aplikasi React, pengembang sering kali membuat sarang komponen anak di dalam komponen induk. Karena data mengalir dalam satu arah, jadi lebih mudah untuk men-debug kesalahan dan mengetahui di mana masalah terjadi dalam aplikasi pada saat yang sama.
  • Kurva pembelajaran kecil: React mudah dipelajari, karena sebagian besar menggabungkan konsep dasar HTML dan JavaScript dengan beberapa tambahan manfaat. Namun, seperti halnya alat dan kerangka kerja lain, kamu harus meluangkan waktu untuk dapat pemahaman yang tepat tentang perpustakaan React.
  • Ini dapat digunakan untuk pengembangan aplikasi web dan seluler: Kita telah mengetahui bahwa React digunakan untuk pengembangan aplikasi web, tetapi tidak hanya itu. Ada framework yang disebut React Native, yang berasal dari React itu sendiri, yang sangat populer dan digunakan untuk membuat aplikasi seluler yang bagus. Jadi, kenyataannya, React dapat digunakan untuk membuat aplikasi web dan mobile.
  • Alat khusus untuk debugging yang mudah: Facebook telah merilis ekstensi Chrome yang dapat digunakan untuk men-debug aplikasi React. Ini membuat proses debugging aplikasi web React lebih cepat dan mudah.

Alasan di atas membenarkan popularitas perpustakaan React dan mengapa itu diadopsi oleh sejumlah besar organisasi dan bisnis. Sekarang mari kita pelajari fitur-fitur React.

Fitur React

menawarkan beberapa fitur luar biasa yang menjadikannya sebagai pustaka yang paling banyak diadopsi untuk pengembangan aplikasi frontend. Berikut adalah daftar fitur yang menonjol tersebut.

  1. JSX

JSX

JSX adalah ekstensi sintaksis JavaScript. Ini adalah istilah yang digunakan dalam React untuk menggambarkan tampilan antarmuka pengguna. Kamu dapat menulis struktur HTML dalam file yang sama dengan kode JavaScript dengan memanfaatkan JSX.

kode jsx

Kode di atas menunjukkan bagaimana JSX diimplementasikan di React. Ini bukan string atau HTML. Sebagai gantinya, ia menyematkan HTML ke dalam kode JavaScript.

  1. Virtual Document Object Model (DOM)

Virtual_DOM

Virtual DOM adalah versi ringan dari Real DOM React. Manipulasi DOM nyata jauh lebih lambat daripada manipulasi DOM virtual. Saat status objek berubah, DOM Virtual hanya memperbarui objek itu di DOM asli, bukan semuanya.

  • Apa itu Model Objek Dokumen (DOM)?

model dom

DOM (Document Object Model) memperlakukan dokumen XML atau HTML sebagai struktur pohon di mana setiap node adalah objek yang mewakili bagian dari dokumen.

  • Bagaimana Virtual DOM dan React DOM berinteraksi satu sama lain?

Ketika status suatu objek berubah dalam aplikasi React, VDOM akan diperbarui. Kemudian membandingkan keadaan sebelumnya, lalu memperbarui hanya objek-objek di DOM asli sebagai pengganti memperbarui semua objek. Ini membuat segalanya bergerak cepat, terutama jika dibandingkan dengan teknologi front-end lainnya yang harus memperbarui setiap objek meskipun hanya satu objek yang berubah dalam aplikasi web.

  1. Arsitektur 

Dalam arsitektur Model View Controller (MVC), React adalah ‘View’ yang bertanggung jawab atas tampilan dan nuansa aplikasi. 

MVC adalah pola arsitektur yang membagi lapisan aplikasi menjadi Model, View, dan Controller. Model berhubungan dengan semua logika yang berhubungan dengan data; tampilan digunakan untuk logika UI aplikasi, dan pengontrol adalah inteface antara Model dan Tampilan.

  1. Ekstensi

React_Extensions

React lebih dari sekadar kerangka kerja UI; berisi banyak ekstensi yang mencakup seluruh arsitektur aplikasi. Ini membantu membangun aplikasi seluler dan menyediakan rendering sisi server. Flux dan Redux, antara lain dapat memperluas React.

  1. Pengikatan Data

Karena React menggunakan pengikatan data satu arah, semua aktivitas tetap modular dan cepat. Selain itu, aliran data searah berarti bahwa komponen turunan disarang dalam komponen induk merupakan hal yang umum ketika mengembangkan proyek React.

data-binding

  1. Debugging

Karena komunitas pengembang yang luas, aplikasi React sangat mudah untuk diuji. Facebook menyediakan ekstensi browser yang menyederhanakan dan mempercepat debugging React. 

react-extension

Misalnya, menambahkan tab React di opsi alat pengembang dalam browser web Chrome. Tab memudahkan untuk memeriksa komponen React secara langsung.

Sekarang setelah mengetahui fitur-fitur utama React, mari beralih ke pemahaman pilar-pilar React.

Komponen Dalam React

Komponen adalah blok bangunan yang terdiri dari aplikasi React yang mewakili bagian dari interface pengguna.

React Components

React memisahkan interface pengguna menjadi beberapa komponen, membuat proses debug lebih mudah diakses, dan setiap komponen memiliki kumpulan properti dan fungsinya sendiri.

Berikut adalah beberapa fitur Components

  • Re-usability – Sebuah komponen yang digunakan di satu area aplikasi namun dapat digunakan kembali di area lain. Ini membantu mempercepat proses pengembangan.
  • Komponen Bersarang – Sebuah komponen dapat berisi beberapa komponen lainnya.
  • Metode render – Dalam bentuk minimalnya, komponen harus mendefinisikan metode render yang menentukan bagaimana komponen dirender ke DOM.
  • Melewati properti – Sebuah komponen juga dapat menerima props. Ini adalah properti yang diteruskan oleh induknya untuk menentukan nilai.

Lihat demo untuk pemahaman yang lebih baik. 

Pertimbangkan dua komponen, komponen Fungsional dan Komponen Kelas dengan kode berikut. 

import React from “react”;

function FunctionalComp() {

return <p>This is a Functional component</p>;

}

export default FunctionalComp;

import React from “react”;

export class ClassComp extends React.Component {

render() {

return <p>This is the Class Component </p>;

}

}

ekspor ClassComp default;

Komponen kelas dilengkapi dengan metode render yang dirender ke layar. Ekspor default digunakan untuk mengekspor hanya satu objek (fungsi, variabel, kelas) dari file. Hanya satu ekspor default per file yang diizinkan. 

Terbukti, komponen ini diimpor ke komponen utama yaitu App.js dalam kasus ini. 

 

import React from “react”;

import FunctionalComp from “./Components/FunctionalComp”;

import ClassComp from “./Components/ClassComp”;

function App() {

return (

<div>

<h1>Hello! Welcome to Simplilearn</h1>

<FunctionalComp />

<ClassComp />

</div>

);

}

export default App;

Setelah dijalankan, tampilan browser akan seperti ini. 

Components-React_Tutorial

Sebuah ekspor bernama atau hanya ekspor juga dapat digunakan untuk mengekspor beberapa objek dari file. 

Sekarang setelah kamu memiliki pemahaman tentang React Components, lanjutkan ke React Props. 

Props in React

Props, kependekan dari Properties in React Props, memungkinkan pengguna untuk meneruskan argumen atau data ke komponen. Alat peraga ini membantu membuat komponen lebih dinamis. Alat peraga dalam komponen bersifat hanya-baca dan tidak dapat diubah. 

Perhatikan class Classprops.js dengan kode berikut.

import React, { Component } from “react”;

class Classprops extends Component {

render() {

return (

<div>

<h1>

Hello {this.props.name} from {this.props.place}! Welcome to

Simplilearn

</h1>

</div>

);

}

}

export default Classprops;

Di sini, kamu menggunakan properti yang disebut “nama” dan “tempat”, yang nilainya dapat diteruskan saat mengimpor komponen ke komponen induk. 

Pada komponen utama, App.js, perhatikan kode berikut. 

import React from “react”;

import Classprops from “./Classprops”;

class App extends React.Component {

render() {

return (

<div>

<Classprops name=”Learner 1″ place=”PlaceX”/>

<Classprops name=”Learner 2″ place=”PlaceY”/>

<Classprops name=”Learner 3″ place=”PlaceZ” />

</div>

);

}

}

export default App;

Di sini, komponen disebut tiga kali, dan melewati tiga nilai berbeda untuk properti yang sama. Berikut adalah output dari kode tersebut. 

Props-React_Tutorial

Sekarang setelah kamu mengetahui cara kerja props, mari kita pahami cara kerja state di React.

State in React 

State adalah sebuah objek yang menyimpan nilai properti untuk properti yang diatributkan ke komponen yang bisa berubah selama beberapa waktu. 

  • Status dapat diubah akibat dari tindakan pengguna atau perubahan dalam jaringan.
  • React merender ulang komponen ke browser setiap kali status objek berubah.
  • Fungsi Object() { [native code] } adalah tempat objek state dibuat.
  • Beberapa properti dapat disimpan di objek negara.
  • This.
  • setState() digunakan untuk mengubah nilai objek status.
  • Fungsi setState() menggabungkan status baru dan sebelumnya secara dangkal.

Perhatikan komponen berikut, State.js.

 

import React, { Component } from ‘react’

class State extends Component {

constructor(props) {

super(props)

this.state = {

message: “Subscribe to Simplilearn”

}

}

render() {

return (

<div className=’App’>

<h3>{this.state.message}</h3>

</div>

)

}

}

export default State

Di sini, tag h3 menampilkan nilai ‘message’, sebuah objek state.

Di komponen utama, App.js, pertimbangkan kode berikut. 

 

import React from “react”;

import “./App.css”;

import State from “./Components/State”;

class App extends React.Component {

styles = {

fontStyle: “bold”,

color: “teal”

};

render() {

return (

<div className=”App”>

<h1 style={this.styles}> Welcome </h1>

<State />

</div>

);

}

}

export default App;

Outputnya akan terlihat seperti ini. 

State-React_Tutorial

setState() Metode 

Status dapat diperbarui ke event handler, respons server, atau perubahan prop. Ini dilakukan dengan menggunakan metode setState.

this.setState({ quantity: value }

)

metode setState() mengantrekan semua pembaruan yang dibuat ke status komponen dan menginstruksikan React untuk merender ulang komponen dan turunannya dengan status yang diperbarui. 

Pertimbangkan skenario di mana tombol berlangganan diklik. Saat mengklik tombol, pesan tampilan harus berubah. Untuk mengimplementasikan ini, kamu menggunakan metode setState(). 

 

import React, { Component } from ‘react’

class State extends Component {

constructor(props) {

super(props)

this.state = {

message: “Subscribe to Simplilearn”,

sub: ‘Subscribe’

}

}

ChangeMessage=()=>{

this.setState({

message: “Thank you for Subscribing”,

sub: “Subscribed”

})

}

render() {

return (

<div className=’App’>

<h3>{this.state.message}</h3>

<button onClick={this.ChangeMessage}>{this.state.sub}</button>

</div>

)

}

}

export default State

Kamu terlebih dulu membuat objek state tambahan yang disebut “sub” untuk tombol. Ketika peristiwa klik tombol terjadi, metode “ChangeMessage” dipanggil. Metode ini pada gilirannya menggunakan metode setState() untuk memperbarui nilai pesan dan sub dan merender ulang output. 

setState-React_tutorial

Setelah mengklik tombol, output akan terlihat seperti ini. 

setStateoutput-React_Tutorial

Meskipun hal di atas dapat dicapai hanya dengan menggunakan props, tapi dengan menggunakan state dapat membuatnya sangat efisien. Bagian berikut membahas perbedaan antara props dan State in React. 

Props vs State in React 

Props

  • Props digunakan untuk mengirim data dan event handler ke turunan komponen.
  • Alat peraga tidak dapat diubah — tidak dapat dimodifikasi setelah disetel.
  • Baik komponen fungsional dan kelas dapat memperoleh manfaat dari penggunaan alat peraga.
  • Komponen induk menetapkan alat peraga untuk komponen anak-anak.

State

  • Data komponen harus disajikan untuk menyimpan tampilan.
  • Data disimpan dalam state, yang mungkin berubah seiring waktu.
  • Hanya komponen kelas yang dapat menggunakan status.
  • Penangan acara biasanya bertanggung jawab untuk memperbarui state.

Prasyarat ReactJS

Berikut adalah beberapa konsep yang harus Anda ketahui, pada tingkat tertentu:

  • Konsep pemrograman seperti fungsi, objek, array, dan pada tingkat lebih rendah, kelas
  • Pengetahuan dasar JavaScript
  • Beberapa keakraban dengan HTML

Sekarang kamu tahu apa konsep yang seharusnya sudah diketahui sebelum mengerjakan React, mari kita lihat tren industri.

Tren Industri

Trend-React_Tutorial

React lebih populer diadopsi oleh pengembang di seluruh dunia dibandingkan dengan kerangka kerja dan pustaka lainnya. 

  • Gaji rata-rata untuk pengembang React tingkat pemula di AS adalah sekitar 87.000 USD per tahun. 
  • Gaji rata-rata untuk pengembang React tingkat pemula di India adalah sekitar 6,50,000INR per tahun.

Sumber: Simplilearn.com

Posted in: News



    WhatsApp chat