JSX Di Reactjs Dan ES6

   Apa itu JSX adalah 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>
	);
	}
	}

view raw first.jsx hosted with ❤ by GitHub

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

   Penulisan IF ELSE harus dengan mode inline. 

	import React from 'react';
	export default class App extends React.Component {
	render() {
	return (
	<div>
	<h1>{in HERE !!!}</h1>
	{//End of the line Comment...}
	{/*Multi line comment...*/}
	</div>
	);
	}
	}

view raw commentOnReact.jsx hosted with ❤ by GitHub

   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() {
	let customStyle = {
	fontSize: 100,
	color: '#FF0000'
	}
	return (
	<div>
	<h1 style={customStyle}>Header</h1>
	</div>
	);
	}
	}

view raw CSSstyling.jsx hosted with ❤ by GitHub

   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>
	);
	}
	}

view raw componentReact.jsx hosted with ❤ by GitHub

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

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

view raw componentReactjs.jsx hosted with ❤ by GitHub