The Project | About Us | Contribute | Donations | License

HOME

Introduction

JSX (JavaScript Syntax Extension) is a syntax extension for JavaScript that looks similar to XML or HTML. It is used with React to describe what the UI should look like. JSX makes it easier to write and add HTML in React.

Key Concepts

Embedding Expressions in JSX

JSX allows you to embed any JavaScript expression by wrapping it in curly braces {}.

const name = 'John Doe';
const element = <h1>Hello, {name}!</h1>;

JSX is an Expression Too

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

const element = <h1>Hello, world!</h1>;
// Compiles to:
const element = React.createElement('h1', null, 'Hello, world!');

Specifying Attributes with JSX

You can use quotes to specify string literals as attributes and curly braces to embed a JavaScript expression.

const element = <img src="logo.png" alt="Logo" />;
const elementWithExpression = <img src={user.avatarUrl} alt={user.name} />;

JSX Represents Objects

Babel compiles JSX down to React.createElement() calls.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// Compiles to:
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

Practical Examples

Example 1: Embedding Expressions

import React from 'react';
import ReactDOM from 'react-dom';

const user = {
  firstName: 'John',
  lastName: 'Doe'
};

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Example 2: Specifying Attributes

import React from 'react';
import ReactDOM from 'react-dom';

const element = <img src="https://via.placeholder.com/150" alt="Placeholder Image" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Example 3: JSX Represents Objects

import React from 'react';
import ReactDOM from 'react-dom';

const element = (
  <div>
    <h1>Hello, world!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Exercises

Exercise 1: Embedding Expressions

Create a React component that displays a greeting message using a user's first and last name.

Solution:

import React from 'react';
import ReactDOM from 'react-dom';

const user = {
  firstName: 'Jane',
  lastName: 'Doe'
};

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Exercise 2: Specifying Attributes

Create a React component that displays an image with a specified src and alt attribute.

Solution:

import React from 'react';
import ReactDOM from 'react-dom';

const element = <img src="https://via.placeholder.com/150" alt="Placeholder Image" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Common Mistakes and Tips

Mistake: Forgetting to close JSX tags.
- Tip: Always close JSX tags, even self-closing ones like <img />.
Mistake: Using class instead of className.
- Tip: Use className for specifying CSS classes in JSX.
Mistake: Embedding expressions without curly braces.
- Tip: Always wrap JavaScript expressions in curly braces {}.

Conclusion

JSX is a powerful syntax extension that allows you to write HTML-like code within JavaScript. It simplifies the process of creating React elements and makes your code more readable. Understanding JSX is fundamental to working with React, as it is the primary way to define the structure of your components.

JSX: JavaScript Syntax Extension

Introduction

Key Concepts

Embedding Expressions in JSX

JSX is an Expression Too

Specifying Attributes with JSX

JSX Represents Objects

Practical Examples

Example 1: Embedding Expressions

Example 2: Specifying Attributes

Example 3: JSX Represents Objects

Exercises

Exercise 1: Embedding Expressions

Exercise 2: Specifying Attributes

Common Mistakes and Tips

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application