React JSX
- In React, every component includes a render function that defines the component's HTML output. JSX (JavaScript Extension) is a React feature that lets you write JavaScript code resembling HTML. Essentially, JSX is an HTML-like syntax used in React that extends ECMAScript, allowing HTML-like code to be combined with JavaScript/React code. This syntax is processed by tools like Babel, which convert the HTML-like syntax into standard JavaScript objects that can be understood by JavaScript engines
- JSX allows you to write HTML/XML-like structures (such as DOM tree structures) within the same file as your JavaScript code. A preprocessor then transforms these JSX expressions into standard JavaScript code. Similar to XML/HTML, JSX tags have a tag name, attributes, and children.
Example
Here, we'll write JSX syntax in a JSX file and observe the corresponding JavaScript code that is generated by the preprocessor (Babel).
JSX File
<div>Hello Gocourse</div>
Corresponding Output
React.createElement("div",null,"Hello Gocourse");
The line above creates a React element by passing three arguments: the first is the element's name, which is `div`; the second is the attributes for the `div` tag; and the third is the content, which is "Hello Gocourse".
Why use JSX?
- It is faster than regular JavaScript because it optimizes the code during the translation process to JavaScript.
- Instead of separating technologies by keeping markup and logic in different files, React uses components that combine both. We will explore components in a later section.
- It is type-safe, allowing most errors to be detected at compilation time.
- It simplifies the process of creating templates.
Nested Elements in JSX
To include multiple elements, you need to wrap them in a single container element. In this case, we use a `div` as the container, which holds three nested elements inside it.
App.JSX
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Gocourse</h1>
<h2>Training Institutes</h2>
<p>This website contains the best ReactJS tutorials.</p>
</div>
);
}
}
export default App;
Output:
Gocourse
Training Institutes
This website contains the best ReactJS tutorials
JSX Attributes
JSX uses attributes similar to HTML elements but follows a camelCase naming convention instead of the standard HTML naming. For example, in JSX, `class` becomes `className` because `class` is a reserved keyword in JavaScript. Additionally, you can use custom attributes in JSX by prefixing them with `data-`. For instance, in the example below, a custom attribute `data-demoAttribute` is used on the `<p>` tag.
Example
import React from 'react';
const App = () => {
return (
<div>
<header>
<h1>TechWorld</h1>
<h2>Learning Platforms</h2>
</header>
<section>
<p data-customAttribute="info">Explore a wide range of technology tutorials and resources.</p>
</section>
</div>
);
};
export default App;
1.As String Literals:Attribute values can be specified using double quotes.
var element = <h2 className = "firstAttribute">Hello Gocourse</h2>;
Example
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1 className="welcome">Gocourse</h1>
<p data-info="course">Discover a variety of programming courses and resources.</p>
</div>
);
}
}
export default App;
Output:
Gocourse
Discover a variety of programming courses and resources.
2.As Expressions:Attribute values can be specified as expressions using curly braces `{}`.
var element = <h2 className = {varName}>Hello Gocourse</h2>;
Example
import React, { Component } from 'react';
class App extends Component {
render() {
const userName = "Alice";
const currentYear = new Date().getFullYear();
return (
<div>
<h1 className="greeting">Welcome, {userName}!</h1>
<p className="year">The current year is {currentYear}.</p>
</div>
);
}
}
export default App;
Output:
Welcome,Gocourse
The current year is 2024.
JSX Comments
JSX allows us to include comments that start with `/*` and end with `*/`, and these comments should be wrapped in curly braces `{}`, similar to JSX expressions. The following example demonstrates how to use comments in JSX.
Example
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<header>
<h1 className="header">Welcome to My Website</h1>
{/* This header introduces the website */}
</header>
<section>
<p>Here you can find various tutorials and resources.</p>
{/* This paragraph provides a brief description */}
</section>
</div>
);
}
}
export default App;
JSX Styling
React recommends using inline styles, which should be specified using camelCase syntax. For certain elements, React automatically appends "px" to numerical values. The following example demonstrates how to apply inline styles to an 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.Gocourse.com</h1>
</div>
);
}
}
export default App;
Output:
www.Gocourse.com
Note: JSX does not support `if-else` statements directly. Instead, you should use conditional (ternary) expressions to handle conditional rendering. This can be demonstrated in the following example.
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!
