Home » Javascript » JSX di ReactJS : Pengenalan dan Contoh Source Code

JSX di ReactJS : Pengenalan dan Contoh Source Code

by syifaul fuadi
by syifaul fuadi

React menggunakan JSX untuk membuat template, bukan JavaScript biasa. Tidak perlu menggunakannya, namun, berikut adalah beberapa kelebihan yang menyertainya.

  1. JSX lebih cepat karena melakukan pengoptimalan saat menyusun kode ke JavaScript.
  2. JSX juga tipe-aman dan sebagian besar kesalahan dapat ditangkap selama kompilasi.
  3. Menulis template jadi lebih mudah dan cepat, jika Anda terbiasa dengan HTML.

MENGGUNAKAN JSX

JSX memungkinkan kita untuk menulis elemen HTML dalam JavaScript dan menempatkannya di DOM tanpa metode createElement () dan / atau appendChild ().

JSX mengubah tag HTML menjadi elemen react. Berikut adalah dua contoh, yang pertama menggunakan JSX dan yang kedua tidak:

CONTOH 1 Menggunakan JSX

index.js

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

const myelement = <h1>I Love JSX!</h1>;

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

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya sebagai berikut :

CONTOH 2 Tanpa JSX

Index.js

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

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

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

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>

  </body>
</html>

Dan hasilnya sebagai berikut :

Seperti yang Anda lihat di contoh pertama, JSX memungkinkan kita untuk menulis HTML langsung di dalam kode JavaScript.

JSX adalah perpanjangan dari bahasa JavaScript berdasarkan ES6, dan diterjemahkan ke dalam JavaScript biasa pada saat runtime.

ELEMEN BERSARANG

Jika kita ingin mengembalikan lebih banyak elemen, kita perlu membungkusnya dengan satu elemen kontainer. Perhatikan bagaimana kita menggunakan div sebagai pembungkus untuk elemen h1, h2 dan p.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Dan hasilnya adalah sebagai berikut :

ATTRIBUTES

Kita dapat menggunakan atribut khusus kita sendiri selain properti dan atribut HTML biasa. Saat kita ingin menambahkan atribut khusus, kita perlu menggunakan awalan data. Dalam contoh berikut, kami menambahkan data-myattribute sebagai atribut elemen p.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Ekspresi JavaScript

Ekspresi JavaScript dapat digunakan di dalam JSX. Kita hanya perlu membungkusnya dengan tanda kurung kurawal {}. Contoh berikut akan menampilkan angka 2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

Dan hasilnya adalah sebagai berikut :

Kita tidak bisa menggunakan pernyataan if else di dalam JSX, sebagai gantinya kita bisa menggunakan ekspresi kondisional (ternary). Dalam contoh berikut, variabel i sama dengan 1 sehingga browser akan menampilkan true, Jika kita mengubahnya ke nilai lain, itu akan membuat false.

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Styling

React merekomendasikan penggunaan gaya inline. Saat kita ingin menyetel gaya sebaris, kita perlu menggunakan sintaks camelCase. React juga akan secara otomatis menambahkan px setelah nilai angka pada elemen tertentu. Contoh berikut menunjukkan cara menambahkan myStyle inline ke elemen h1.

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

Dan hasilnya adalah sebagai berikut :

Comments

Saat menulis komentar, kita perlu memberi tanda kurung kurawal {} saat kita ingin menulis komentar dalam bagian anak-anak dari sebuah tag. Ini praktik yang baik untuk selalu menggunakan {} saat menulis komentar, karena kami ingin konsisten saat menulis aplikasi.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Naming Convention

Tag HTML selalu menggunakan nama tag huruf kecil, sedangkan komponen React dimulai dengan huruf besar.

Catatan – Anda harus menggunakan className dan htmlFor sebagai nama atribut XML, bukan class dan for. Ini dijelaskan di halaman resmi React –

Karena JSX adalah JavaScript, pengidentifikasi seperti class dan for tidak disarankan sebagai nama atribut XML. Sebagai gantinya, komponen React DOM mengharapkan nama properti DOM seperti className dan htmlFor.

You may also like