The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Understanding JSX

Next ►
►

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. JSX makes it easier to write and add HTML in React and React Native applications.

Key Concepts of JSX

  1. Embedding Expressions: You can embed any JavaScript expression within JSX by wrapping it in curly braces {}.
  2. JSX is an Expression Too: After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
  3. Specifying Attributes with JSX: You can use quotes to specify string literals as attributes and curly braces to embed JavaScript expressions.
  4. JSX Prevents Injection Attacks: React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that’s not explicitly written in your application.
  5. JSX Represents Objects: Babel compiles JSX down to React.createElement() calls.

Basic Example

Here is a simple example of JSX:

const element = <h1>Hello, world!</h1>;

This JSX code is transformed into the following JavaScript code:

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

Embedding Expressions in JSX

You can embed any JavaScript expression in JSX by wrapping it in curly braces {}. For example:

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

This will render as:

<h1>Hello, John!</h1>

JSX is an Expression Too

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means you can use JSX inside if statements and for loops, assign it to variables, accept it as arguments, and return it from functions.

Example

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {user.name}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Specifying Attributes with JSX

You can use quotes to specify string literals as attributes:

const element = <div tabIndex="0"></div>;

You can also use curly braces to embed a JavaScript expression in an attribute:

const element = <img src={user.avatarUrl}></img>;

JSX Prevents Injection Attacks

By default, React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that’s not explicitly written in your application.

Example

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

JSX Represents Objects

Babel compiles JSX down to React.createElement() calls. These two examples are identical:

JSX

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

JavaScript

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Practical Exercise

Task

Create a simple React Native component that uses JSX to display a greeting message. The message should include a name passed as a prop.

Solution

import React from 'react';
import { Text, View } from 'react-native';

const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

export default function App() {
  return (
    <View style={{padding: 50}}>
      <Greeting name="John" />
      <Greeting name="Jane" />
    </View>
  );
}

Explanation

  1. Greeting Component: This functional component takes props as an argument and returns a View containing a Text element. The Text element displays a greeting message that includes the name prop.
  2. App Component: This is the main component of the application. It renders two Greeting components with different names.

Common Mistakes

  1. Forgetting Curly Braces: When embedding JavaScript expressions in JSX, always remember to use curly braces {}.
  2. Invalid HTML Attributes: Ensure that you use valid HTML attributes. For example, use className instead of class.
  3. Unclosed Tags: Always close your tags. For example, <img /> instead of <img>.

Conclusion

In this section, you learned about JSX, a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. You explored how to embed expressions, specify attributes, and prevent injection attacks using JSX. You also created a simple React Native component to practice using JSX. Understanding JSX is crucial for building React Native applications, as it forms the foundation for writing components and rendering UI elements.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved