Memahami JSX di react.js dan ES6

Artikel ini di tulis saat gw nongkrong di BEC (Bandung Electronic Center), makan sekotak kkuldak (biar kekinian), dan samar-samar terdengar lagu “shaden-dunia belum berakhir”.

Ini merupakan serial dari dasar belajar React.js dan ES6 . Ini part 2 jadi yang belum baca part 1 nya bisa klik di link berikut.

Apa itu JSX. Yang pastinya ga ada hubungannya sama yang gw makan sekarang #garing. JSX atau bisa kita bilang extended javascript adalah suatu pengembangan javascript dimana kode HTML bisa di ikut sertakan dalam javascript.

Terdengar aneh ? Tidak rumit, asalkan sudah mengerti kode HTML. Namun beberapa aturan perlu di terapkan agar ngoding tetap nyaman dan compiler tidak error.

Kode HTML harus Nested. Nested di sini maksudnya kode HTML harus mempunyai awalan dan akhiran. Tidak boleh ada miss agar compiler tidak error. Contoh :

import React from 'react';

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

Penulisan kode javascript di dalam tag HTML di bolehkan dengan menggunakan tag {}. Berlaku juga untuk menulis comments.

import React from 'react';

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

penulisan IF ELSE harus dengan mode inline.

import React from 'react';

export default class App extends React.Component {
   render() {

      var i = 1;

      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}

CSS styling di rekomendasikan mengunakan mode inline styles. Untuk penulisannya sendiri menggunakan aturan camelcase misalnya borderRadius, backgroundImage, dll

import React from 'react';

export default class App extends React.Component {
   render() {

      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }

      return (
         <div>
            <h1 style={myStyle}>Header</h1>
         </div>
      );
   }
}

Penulisan extra tag seperti class menjadi className dan for menjadi htmlFor

import React from 'react';

export default class App extends React.Component {
   render() {
      return (
         <div>
            <label className="label_class" htmlFor="label_name">Header</h1>
         </div>
      );
   }
}

Penulisan component react harus diawali dengan huruf kapital (untuk komponent react) akan di bahas nanti.

import React from 'react';
import Header from './components/header.jsx';
export default class App extends React.Component {
   render() {
      return (
         <Header />
      );
   }
}

Ada yang terlewat ? bisa beri komentar di bawah. See ya :D