📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
In this chapter, we will learn about JSX in the React.
1. What is JSX?
- JSX stands for JavaScript XML.
- JSX allows us to write HTML in React.
- JSX makes it easier to write and add HTML in React.
const element = <h1>Hello, world!</h1>;
2. Coding JSX
Example 1
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
Example 2
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));
Babel compiles JSX down to React.createElement() calls.
3. Embedding Expressions in JSX
const name = 'Ramesh';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Ramesh',
lastName: 'Fadatare'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
4. JSX is an Expression Too
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
5. Specifying Children with JSX
const element = <img src={user.avatarUrl} />;
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
6. Inserting a Large Block of HTML
Example:
import React, { Component } from 'react'
export default class TableBody extends Component {
render() {
return (
<table>
<thead>
<th> Employee Name </th>
<th> Employee Role </th>
</thead>
<tbody>
<tr>
<td> Ramesh</td>
<td> Software Developer</td>
</tr>
<tr>
<td> Tony</td>
<td> Software Developer</td>
</tr>
<tr>
<td> Pramod</td>
<td> Software Developer</td>
</tr>
<tr>
<td> Santosh</td>
<td> QA Engineer</td>
</tr>
</tbody>
</table>
)
}
}
7. Styling in JSX
import React from 'react'
import APIService from '../service/APIService'
export default class BookComponent extends React.Component {
render() {
return (
<div className = "container">
<h2 className="text-center">Book Details</h2>
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>Book Id</th>
<th>Book Name</th>
</tr>
</thead>
<tbody>
<tr key=1>
<td>1</td>
<td>Core Java</td>
</tr>
<tr key=2>
<td>2</td>
<td>Effective Java</td>
</tr>
</tbody>
</table>
</div>
)
}
}
- className is used instead of class for adding CSS classes, as class is a reserved keyword in JavaScript.
- Properties and methods in JSX are camelCase - onclick will become onClick.
- Self-closing tags must end in a slash - e.g. <Welcome />, <DemoComponent />
7.1 Inline Styling
import React from 'react';
class App extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header</h1>
</div>
);
}
}
export default App;
Comments
Post a Comment
Leave Comment