Tutorial ReactJS Part #3: Fungsi ReactJSX

React JSX

Apa kabar teman semua, semoga teman semua dalam keadaan sehat…. Amin….

Kali ini kita akan membahas React JSX, Semua komponen React memiliki fungsi render. Fungsi render menentukan output HTML dari komponen React. JSX (JavaScript Extension), adalah ekstensi React yang memungkinkan penulisan kode JavaScript yang terlihat seperti HTML. Dengan kata lain, JSX adalah sintaks seperti HTML yang digunakan oleh React yang memperluas ECMAScript sehingga sintaks seperti HTML dapat berdampingan dengan kode JavaScript/React. Sintaksnya digunakan oleh praprosesor (yaitu, transpiler seperti babel) untuk mengubah sintaksis seperti HTML menjadi objek JavaScript standar yang akan diurai oleh mesin JavaScript.

JSX menyediakan Anda untuk menulis struktur seperti HTML/XML (misalnya, struktur pohon seperti DOM) dalam file yang sama tempat Anda menulis kode JavaScript, kemudian praprosesor akan mengubah ekspresi ini menjadi kode JavaScript yang sebenarnya. Sama seperti XML/HTML, tag JSX memiliki nama tag, atribut, dan child.

Contoh Kasus

Di sini, kita akan menulis sintaks JSX dalam file JSX dan melihat kode JavaScript yang sesuai yang diubah oleh preprocessor.

JSX File

<div>Hello JavaTpoint</div>

Corresponding Output

React.createElement("div", null, "Hello Teman Ngoding");

Jadi kita bisa liat syntaks di atas, yang pertama element dengan <div>dan kedua adalah atribut yang diteruskan dalam tag div.

Kenapa Menggunakan JSX

Ini lebih cepat daripada JavaScript biasa karena melakukan pengoptimalan saat menerjemahkan kode ke JavaScript.
Dapat meletakkan markup dan logika dalam file terpisah, React menggunakan komponen yang berisi keduanya. Kita akan mempelajari komponen di bagian selanjutnya.
Dapat dengan mudah menemukan kesalahan pada waktu kompilasi.
Itu membuat lebih mudah untuk membuat template.

Untuk teman semua yang ingin menggunakan lebih dari satu elemen, teman perlu membungkusnya dengan satu elemen container. Di sini, kami menggunakan div sebagai elemen penampung yang memiliki tiga elemen bersarang di dalamnya.

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1>Teman Ngoding</h1>  
            <h2>Ngoding Together</h2>  
         </div>  
      );  
   }  
}  
export default App;

Output:

Atribut JSX

Jika teman sering menggunakan HTML maka JSX atribute JSX sama seperti HTML biasa.JSX menggunakan konvensi penamaan camelcase untuk atribut daripada konvensi penamaan standar HTML seperti kelas dalam HTML menjadi className di JSX karena kelas adalah kata kunci yang dicadangkan dalam JavaScript. Kami juga dapat menggunakan atribut khusus kami sendiri di JSX. Untuk atribut khusus, kita perlu menggunakan awalan data-. Dalam contoh di bawah ini, kita telah menggunakan atribut khusus data-demoAttribute sebagai atribut untuk tag.

Contoh:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
             <h1>Teman Ngoding</h1>  
             <h2>Ngoding Together</h2>  
         </div>  
      );  
   }  
}  
export default App;

Di JSX, kita dapat menentukan nilai atribut dengan dua cara:

Literal String: Kita dapat menentukan nilai atribut dalam tanda kutip ganda:

var element = <h2 className = "firstAttribute">Hello JavaTpoint</h2>;

Contoh:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 className = "hello" >Teman Ngoding</h1>  
            <p data-demoAttribute = "demo">Belajar bersama teman ngoding sangat menyenangkan.</p>  
         </div>  
      );  
   }  
}  
export default App;

Output:

2. Kita bisa menetapkan nilai atribut sebagai ekspresi menggunakan kurung kurawal {}:

var element = <h2 className = {varName}>Hello JavaTpoint</h2>;

Conoth:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 className = "hello" >{25+20}</h1>  
         </div>  
      );  
   }  
}  
export default App;

Output:

Komen JSX

JSX menggunakan komentar yang dimulai dengan /* dan diakhiri dengan */ dan dalam kurung kurawal {} seperti halnya ekspresi JSX. Contoh di bawah ini menunjukkan cara menggunakan komentar di JSX.

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
      return(  
         <div>  
            <h1 className = "hello" >Hello Teman Ngoding</h1>  
        {/* This is a comment in JSX */}   
         </div>  
      );  
   }  
}  
export default App;

JSX Styling

React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements. The following example shows how to use styling in the element.

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         fontFamily: 'Courier',  
         color: '#003300'  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>www.temanngoding.com</h1>  
         </div>  
      );  
   }  
}  
export default App;

Output: