Modul 2-3. React JSX

Halo teman-teman, selamat datang kembali di course React JS bersama Nusantech Academy 🙂 .

Pada chapter sebelumnya, kita telah membuat aplikasi React sederhana menggunakan create-react-app. Untuk saat ini mungkin teman-teman masih bingung dengan struktur dan elemen React JS.

Pada chapter ini akan dijelaskan terkait elemen React JS, yaitu JSX. Apa itu JSX? Yuks simak terus chapter ini teman-teman 🙂 . 

Apa itu JSX?

JSX merupakan syntax penulisan elemen pada React. React merekomendasikan kita menggunakan JSX dalam penulisan elemen React. JSX memungkinkan kita untuk menulis tag HTML di dalam file Javascript. Bagi teman-teman yang sudah paham HTML akan sangat mudah menulis JSX. Berikut contoh elemen JSX. const element = <h1>Hello, world!</h1>;

Ekspresi di dalam JSX

Di dalam JSX teman-teman dapat menyisipkan ekspresi Javascript di dalam kurung keriting {}. Untuk mencobanya teman-teman buka kembali project firstreactapp kemudian pada App.js ubah kodingan teman-teman menjadi seperti berikut

import React from 'react';
 
function App() {
  const name = 'Nusantech Academy'
  return <h1>Hello {name} {5+5} kali !!</h1>
}
 
export default App;

maka outputnya

Menyisipkan blok HTML

Jika kita hendak menyisipkan HTML dengan baris yang lebih dari satu, maka masukkan HTML ke dalam tanda kurung (). Sebagai contoh,

import React from 'react';
 
function App() {
  return (
    <ul>
      <li>Budi</li>
      <li>Nana</li>
      <li>Bejo</li>
    </ul>
  )
}
 
export default App;

maka outputnya,

One Top Level Element

Di dalam JSX, kode HTML harus di wrap di dalam One Top Level Element atau dengan kata lain kode HTML hanya mempunyai satu parent saja. Misalnya saja, jika teman-teman ingin membuat dua header, maka letakkan header tersebut di dalam sebuah parent misal <div>. Berikut contohnya,

import React from 'react';
 
function App() {
  return (
   <div>
     <h1>Hello Nusantech Academy</h1>
     <h1>Semangat Belajar!!</h1>
   </div>
  )
}
 
export default App;

maka outputnya,

Jika tidak kita wrap di dalam satu parent, maka terjadi error seperti berikut

Empty Tag

JSX mengikuti aturan XML. Jadi setiap tag atau elemen yang kosong harus ditutup dengan tanda />. Sebagai contoh, 

import React from 'react';
import logo from './logo.svg';
 
function App() {
  return (
    <div style={{width: '50%', height: '50%'}}>
      <img src={logo} alt="logo"/>
    </div>
  )
}
 
export default App;

maka outputnya,

Pada kode di atas, tag <img> merupakan tag kosong. Maka dari itu harus ditutup dengan />.

Penutup

Pada chapter ini kita telah belajar tentang JSX. JSX merupakan syntax penulisan elemen pada React yang memungkinkan kita untuk menulis HTML di dalam file Javascript. Terdapat ketentuan penulisan di dalam JSX, di antaranya One Top Level Element, Empty Tag, multiple HTML  dan lain-lain. 

Sekian teman-teman materi tentang JSX. Semoga bermanfaat untuk teman-teman dan jangan lupa untuk terus berlatih ya. Sampai jumpa di chapter selanjutnya 🙂 . See you!

Quiz

Untuk mengasah kemampuan teman-teman terkait materi ini, kami berikan beberapa soal untuk teman-teman jawab. Quiz dapat dikerjakan disini: https://bit.ly/quizreact2-3