React JSX

JSX(JavaScript Extension), is a React extension which allows writing JavaScript code that looks like HTML.

All of the React components(class component) have a render function. The render function specifies the HTML output of a React component. 

Look at the code from App.jsx where we are returning div.

	import React, { Component } from 'react';
	class App extends Component {
	render() {
	return (
	<div>
	Hello World!!!
	</div>
	);
	}
	}
	export default App;

view raw App.jsx hosted with ❤ by GitHub

Nested Elements

If we want to return more elements, we need to wrap it with one container element. Notice how we are using div as a wrapper for h1, h2

and p elements.

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

view raw App.jsx hosted with ❤ by GitHub

Attributes

JSX uses attributes with the HTML elements same as regular HTML. JSX uses camelcase naming convention for attributes rather than

standard naming convention of HTML such as a class in HTML becomes className in JSX because the class is the reserved keyword

in JavaScript.

class → className

for → htmlFor

onclick → onClick

We can also use our own custom attributes in JSX. For custom attributes, we need to use data- prefix. In the below example, we have

used a custom attribute data-demoAttribute as an attribute for the <p> tag.

	import React, { Component } from 'react';
	class App extends Component {
	render() {
	return (
	<div>
	<h1>Header</h1>
	<h2 className = "hello">Content</h2>
	<p data-myattribute = "somevalue">This is the content!!!</p>
	</div>
	);
	}
	}
	export default App;

view raw App.jsx hosted with ❤ by GitHub

JavaScript Expressions

JavaScript expressions can be used inside of JSX. We just need to wrap it with curly brackets {}.

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

view raw App.jsx hosted with ❤ by GitHub

As per the below example, we cannot use if else statements inside JSX, instead we can use conditional (ternary) expressions. In the

following example, variable i equals to 1 so the browser will render true. If we change it to some other value, it will render false.

	import React from 'react';
	class App extends React.Component {
	render() {
	var i = 1;
	return (
	<div>
	<h1>{i == 1 ? 'True!' : 'False'}</h1>
	</div>
	);
	}
	}
	export default App;

view raw App.jsx hosted with ❤ by GitHub

JSX Comments

JSX allows us to use comments that begin with /* and ends with */ and wrapping them in curly braces {} just like in the case of JSX

expressions.

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

view raw App.jsx hosted with ❤ by GitHub

Styling

React recommends using inline styles. When we want to set inline styles, we need to use camelCase syntax. React will also automatically

append px after the number value on specific elements. The following example shows how to add myStyle inline to h1 elements.

	import React, {Component} from 'react';
	class App extends Component {
	render() {
	var myStyle = {
	fontSize: 100,
	color: '#FF0000'
	}
	return (
	<div>
	<h1 style = {myStyle}>Header</h1>
	</div>
	);
	}
	}
	export default App;

view raw App.jsx hosted with ❤ by GitHub