What is React JSX? | React JSX
React JSX
Every React component has a render function. These render functions specify the HTML output of a React component. JSX(JavaScript Extension), is a React extension. It allows writing JavaScript code that looks like HTML. we can also say JSX is an HTML-like syntax that is used by React that extends ECMAScript so that HTML-like syntax can co-exist with JS/React code. The syntax is used by preprocessors to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine will parse.
Example
Now, we will write JSX syntax in JSX file. And we will see the corresponding JavaScript code which transforms by preprocessor(babel).
JSX file
<div>Hello React</div>
corresponding output:
React.createElement("div", null, "Hello React");
The above code creates a react element and passing three arguments inside where the first is the name of the element which is div, the second is the attributes passed in the div tag, and the last one is the content you pass which is the "Hello React".
Why use JSX?
- It is faster than regular JavaScript.
- React uses components that contain both, Instead of separating technologies by putting markup and logic in separate files.
- It is type-safe, most of the errors can be found at compilation time.
- Using JSX easier to create templates.
Nested Elements in JSX
You need to wrap it with one container element, to use more than one element. Here, we use div as a container element. It has three nested elements inside it.
App.JSX
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello React</h1>
<h2>Training Institutes</h2>
<p>This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
Output:
Hello React
Training Institutes
This website contains the best CS tutorials.
JSX Attributes
JSX use attributes with the regular HTML elements. It uses camelcase naming convention for attributes rather than the standard naming convention of HTML. For example, a class in HTML becomes className in JSX because the class is the reserved keyword in JavaScript and We can also use our own custom attributes in JSX. we need to use data- prefix, for custom attributes. we have used a custom attribute data-demoAttribute as an attribute for the <p> tag in the below example.
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello React</h1>
<h2>Training Institutes</h2>
<p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
In JSX, generally, we can specify attribute values in two ways:
1. String Literals: We can specify the values of attributes in double-quotes.
var element = <h2 className = "firstAttribute">Hello JavaTpoint</h2>;
Example:
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >Hello React</h1>
<p data-demoAttribute = "demo">This website contains the best CS tutorials.</p>
</div>
);
}
}
export default App;
Output:
Hello React
This website contains the best CS tutorials.
2. Expressions: We can specify the values of attributes as expressions using curly braces {}.
var element = <h2 className = {varName}>Hello React</h2>;
Example:
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >{25+20}</h1>
</div>
);
}
}
export default App;
45
JSX Comments
In JSX comments begin with /* and ends with */ and wrapping them in curly braces {} just like in the case of JSX expressions. The example is shown below, how to use comments in JSX.
Example
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1 className = "hello" >Hello React</h1>
{/* This is a comment in JSX */}
</div>
);
}
}
export default App;
JSX Styling
React mostly use inline styles. you need to use camelCase syntax, to set inline styles. It automatically allows appending px after the number value on specific elements. The below example shows how to use styling in the element.
Example
import React, { Component } from 'react';
class App extends Component{
render(){
var myStyle = {
fontSize: 80,
fontFamily: 'Courier',
color: '#003300'
}
return (
<div>
<h1 style = {myStyle}>www.tutorialslink.com</h1>
</div>
);
}
}
export default App;
Output:
www.tutorialslink.com
Remember, JSX cannot allow using if-else statements. But, you can use conditional (ternary) expressions. Have a look at the below example.
import React, { Component } from 'react';
class App extends Component{
render(){
var i = 5;
return (
<div>
<h1>{i == 1 ? 'True!' : 'False!'}</h1>
</div>
);
}
}
export default App;
Output:
False!