This content originally appeared on DEV Community and was authored by TD!
Day #18 of #100daysofMiva, I've been working on various React and Vite projects, both public and private. Today, I just want to write about jsx, it's technicalities and what I've learnt so far.
JSX (JavaScript XML) is a syntax extension used in React that allows developers to write HTML-like code within JavaScript. It's a core part of the React framework, enabling the creation of user interfaces in a declarative manner. While JSX may look like HTML, it's transformed into JavaScript under the hood.
In this guide, I will explore JSX syntax, concepts, and best practices for writing JSX in React projects, specifically those built with tools like Vite. This guide does not focus on setting up React or Vite but rather on mastering JSX itself. If you'll like to know how to set up React and Vite applications, you can check previous posts where I've covered the topic:
Setting up simple React components (also helpful for interviews)
Table of Contents
- What is JSX?
- JSX Syntax and Basic Concepts
- Embedding Expressions in JSX
- JSX as Expressions
- Attributes in JSX
- JSX Children
- Conditional Rendering in JSX
- Using Ternary Operators
- Logical AND (&&) Rendering
- Inline If-Else Conditions
- Styling in JSX
- Inline Styles
- CSS Modules
- JSX Lists and Keys
- Handling Events in JSX
- JSX Best Practices
- Fragment Usage
- Component Naming
- Clean and Readable Code
- JSX with Vite
1. What is JSX?
JSX is a syntax extension for JavaScript that looks similar to HTML and is used to describe the UI in React components. JSX is not a string or HTML but syntax that gets compiled to React createElement calls, which generate the UI.
JSX allows you to mix HTML-like code with JavaScript, enabling the creation of dynamic components that react to user inputs and data changes.
Example:
function WelcomeMessage() {
return <h1>Hello, World!</h1>;
}
Under the hood, this JSX gets compiled into:
function WelcomeMessage() {
return React.createElement('h1', null, 'Hello, World!');
}
JSX Syntax and Basic Concepts
Embedding Expressions in JSX
In JSX, you can embed any JavaScript expression by wrapping it in curly braces {}. Expressions can include variables, functions, or any valid JavaScript.
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
If you pass "Jane" as the name prop, the output will be:
<h1>Hello, Jane!</h1>
JSX as Expressions
JSX can be assigned to variables, passed as function arguments, and returned from functions because JSX itself is an expression.
const element = <h1>Welcome to the blog!</h1>;
function render() {
return element;
}
Attributes in JSX
In JSX, you can add attributes to elements similar to HTML, but camelCase is used for most attribute names, such as className, onClick, tabIndex, etc.
HTML:
<button class="btn">Click Me</button>
JSX:
<button className="btn">Click Me</button>
Self-closing tags: Elements like <img>, <br>, and <input> must be written as self-closing tags in JSX:
<img src="logo.png" alt="Logo" />
JSX Children
In JSX, children can be nested inside elements, such as text, elements, or even other components.
<div>
<h1>Title</h1>
<p>This is a description.</p>
</div>
JSX can also return arrays of elements:
return [<h1 key="1">First</h1>, <h1 key="2">Second</h1>];
Conditional Rendering in JSX
React allows you to render elements conditionally using JavaScript conditions within JSX.
Using Ternary Operators
The ternary operator is a common method to conditionally render different elements.
function Greeting({ isLoggedIn }) {
return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}
Logical AND (&&) Rendering
If the first condition is true, React will render the second part. Otherwise, it won’t render anything.
function Notification({ unreadMessages }) {
return (
<div>
{unreadMessages.length > 0 && (
<h2>You have {unreadMessages.length} unread messages.</h2>
)}
</div>
);
}
Inline If-Else Conditions
You can also use if-else statements, though they require separating logic from JSX:
function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please sign in.</h1>;
}
}
Styling in JSX
Inline Styles
In JSX, inline styles are written as objects. Properties are camelCased rather than hyphenated.
const divStyle = {
backgroundColor: 'lightblue',
padding: '10px',
};
function MyComponent() {
return <div style={divStyle}>Styled with inline styles</div>;
}
CSS Modules
CSS Modules allow for scoped CSS, preventing naming collisions. With CSS Modules, the class names are unique to their components.
import styles from './MyComponent.module.css';
function MyComponent() {
return <div className={styles.container}>Styled with CSS modules</div>;
}
JSX Lists and Keys
When rendering a list of elements in JSX, each element should have a unique key prop to help React optimize rendering.
const items = ['Apple', 'Banana', 'Cherry'];
function FruitList() {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
Handling Events in JSX
Events in JSX are similar to HTML but use camelCase syntax and take a function as a handler.
function ClickButton() {
function handleClick() {
alert('Button clicked!');
}
return <button onClick={handleClick}>Click Me</button>;
}
React event handlers work across all browsers and use a synthetic event system for performance and compatibility.
JSX Best Practices
Fragment Usage
Sometimes, JSX requires wrapping multiple elements in a single parent. Instead of using an extra div, you can use React Fragments (<></>).
function MultiElement() {
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
}
Component Naming
Components should be named with an uppercase letter. React treats lowercase tags as DOM elements, while uppercase ones are treated as custom components.
function MyButton() {
return <button>Click Me</button>;
}
Clean and Readable Code
Write clean and readable JSX by breaking complex UI into smaller components. Avoid deeply nested structures by creating reusable components.
function Card({ title, content }) {
return (
<div className="card">
<h2>{title}</h2>
<p>{content}</p>
</div>
);
}
JSX with Vite
With Vite, JSX functions the same way as in Create React App or other tools, but the build process is optimized for speed and performance.
Hot Module Replacement (HMR)
Vite enables fast hot module replacement, meaning any JSX changes will reflect instantly without a full reload.
This content originally appeared on DEV Community and was authored by TD!
TD! | Sciencx (2024-09-14T23:39:17+00:00) A Comprehensive Guide to Writing JSX in React (with Vite). Retrieved from https://www.scien.cx/2024/09/14/a-comprehensive-guide-to-writing-jsx-in-react-with-vite/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.