React JSX

  • Post
    React JSX

    Seperti yang telah kita lihat, 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 mirip HTML yang digunakan oleh React yang memperluas ECMAScript sehingga sintaks seperti HTML dapat hidup berdampingan dengan kode JavaScript / React. Sintaks ini digunakan oleh preprocessor (misalnya, transpiler seperti babel) untuk mengubah sintaks seperti HTML menjadi objek JavaScript standar yang akan diurai oleh mesin JavaScript.

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

    Contoh

    Di sini, kita akan menulis sintaks JSX dalam file JSX dan melihat kode JavaScript terkait yang diubah oleh preprocessor (babel).

    File JSX

    1. Halo JavaTpoint

    Output yang Sesuai

    1. createElement ( “div” ,  null ,  “Hello JavaTpoint” );

    Baris di atas membuat elemen react dan meneruskan tiga argumen di mana yang pertama adalah nama elemen yang div, kedua adalah atribut yang dilewatkan dalam tag div, dan yang terakhir adalah konten yang Anda berikan yaitu “Hello JavaTpoint.”

    Mengapa menggunakan JSX?

    • Ini lebih cepat daripada JavaScript biasa karena melakukan pengoptimalan saat menerjemahkan kode ke JavaScript.
    • Alih-alih memisahkan teknologi dengan meletakkan markup dan logika di file terpisah, React menggunakan komponen yang berisi keduanya. Kita akan mempelajari komponen di bagian selanjutnya.
    • Ini aman untuk tipe, dan sebagian besar kesalahan dapat ditemukan pada waktu kompilasi.
    • Membuat template jadi lebih mudah.

    Nested Elements di JSX

    Untuk menggunakan lebih dari satu elemen, Anda perlu membungkusnya dengan satu elemen kontainer. Di sini, kami menggunakan div sebagai elemen kontainer yang memiliki tiga elemen bersarang di dalamnya.

    App.JSX

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. render(){
    4. kembali (
    5. <h1> JavaTpoint </h1>
    6. <h2> Lembaga Pelatihan </h2>
    7. <p> Situs web ini berisi tutorial Ilmu Komputer terbaik. </p>
  • );
  • }
  • }
  • export   default App;
  • Keluaran:

    Atribut JSX

    JSX menggunakan atribut dengan elemen HTML yang 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 tersebut adalah kata kunci yang dicadangkan dalam JavaScript. Kami juga dapat menggunakan atribut khusus kami sendiri di BEJ. Untuk atribut khusus, kita perlu menggunakan awalan data . Pada contoh di bawah ini, kami telah menggunakan atribut khusus data-demoAttribute sebagai atribut untuk tag <p> .

    Contoh

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. render(){
    4. return (
    5. <h1> JavaTpoint </h1>
    6. <h2> Lembaga Pelatihan </h2>
    7. <p data-demoAttribute =  “demo” > Situs web ini berisi tutorial CS terbaik. </p>
    8. );
    9. }
    10. }
    11. export   default App;

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

    1. As String Literals:Kita dapat menentukan nilai atribut dalam tanda kutip ganda:
    2. var element = <h2 className =  “firstAttribute” > Halo JavaTpoint </h2>;

    Contoh

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. render(){
    4. return (
    5. <h1 className =  “hello”  > JavaTpoint </h1>
    6. <p data-demoAttribute =  “demo” > Situs web ini berisi tutorial CS terbaik. </p>
    7. );
    8. }
    9. }
    10. export   default  App;

    Keluaran:

    JavaTpoint

    Situs web ini berisi tutorial CS terbaik.

    1. Sebagai Ekspresi:Kita bisa menetapkan nilai atribut sebagai ekspresi menggunakan kurung kurawal {}:
    2. var element = <h2 className = {varName}> Halo JavaTpoint </h2>;

    Contoh

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. render(){
    4. return (
    5. <h1 className =  “hello”  > { 25 + 20 } </h1>
    6. );
    7. }
    8. }
    9. export   default App ;

    Keluaran:

    45

    React JSX

    JSX memungkinkan kita untuk menggunakan komentar yang dimulai dengan / * dan diakhiri dengan * / dan membungkusnya dengan tanda kurung kurawal {} seperti dalam kasus ekspresi JSX. Contoh di bawah ini menunjukkan bagaimana menggunakan komentar di BEJ.

    Contoh

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. render(){
    4. return (
    5. <h1 className =  “hello”  > Halo JavaTpoint </h1>
    6. { / * Ini adalah komentar di JSX * / }
    7. );
    8. }
    9. }
    10. export  default  App;

    JSX Styling

    React selalu merekomendasikan untuk menggunakan gaya sebaris . Untuk menyetel gaya sebaris, Anda perlu menggunakan sintaks camelCase . React secara otomatis mengizinkan penambahan px setelah nilai angka pada elemen tertentu. Contoh berikut menunjukkan cara menggunakan gaya dalam elemen.

    Contoh

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. render(){
    4. var myStyle = {
    5. fontSize:  80 ,
    6. fontFamily:  ‘Courier’ ,
    7. warna:  ‘# 003300’
    8. }
    9. return  (
    10. <h1 style = {myStyle}> http://www.javatpoint.com </h1>
    11. );
    12. }
    13. }
    14. export   default App;

    Keluaran:

    CATATAN: JSX tidak dapat mengizinkan penggunaan pernyataan if-else. Sebagai gantinya, Anda bisa menggunakan ekspresi kondisional (ternary). Itu bisa dilihat pada contoh berikut.

    Contoh

    1. import React, {Component} dari  ‘react’ ;
    2. class App  extends  Component {
    3. render(){
    4. var i =  5 ;
    5. return  (
    6. <h1> {i ==  1  ? ‘True!’  :  ‘False’ } </h1>
    7. );
    8. }
    9. }
    10. export   default App;

    Keluaran:

    False!

     

    credit. javatpoint

     

Tagged: 

  • You must be logged in to reply to this topic.