DEV Community

Cover image for Basics of React JSX
Romeo Agbor Peter
Romeo Agbor Peter

Posted on • Updated on • Originally published at romeopeter.com

Basics of React JSX

Some ReactJS' JSX basics you should know as a beginner 👇🏿

...

Writing Expression in JSX.

Curly braces are used to wrap valid JavaScript expressions in JSX. This can either be an expression of number operations or a function call.

// Variable expression
const guest = "John"
const greeting = <h1>Hello, {guest}!</h1>

ReactDOM.render(
    greeting, 
    document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

In the example below, the result of a function call is written into the h1 tag.

// Function call expression
function formatName(guest) {
    return guest.firstName + ' ' + guest.lastName;
}

const guest = {firstName: "John", LastName: "Doe"}

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

ReactDOM.render(
    element, 
    document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

Using JSX in Expressions

JSX can be assigned to variables, used in conditionals and loops; accepted as arguments and returned from function calls. This is because, after compilation, JSX becomes mare JavaScript objects.

function isUser(user) {
   if (user) {
       return <h1>hello, formatName(user)!</h1>;
   } else {
       return <h1>Hi! can I help you?</h1>;
   }
}
Enter fullscreen mode Exit fullscreen mode

Attribute in JSX

To specify attribute in JSX, you should use quotes for string values and curly braces for expressions. Don't use both for attribute values.

const element = (
    <div ClassName="container">"Hello World!" is getting old.</div>
    <img src={imageUrl}></img>
);
Enter fullscreen mode Exit fullscreen mode

Having Children in JSX

JSX can have multiple children elements. Empty tags should be closed with a /> at the end.

const user = {firstName: "John", LastName: "Doe"}

// Multiple element
const elements = (
    <div>
        <h1>Hello {formatName(user.firstName)}</h1>
        <h2>Good to see you here.</h2>
        <h3>Have a greet stay!</h3>
    </div>
)

// Empty element
const element = <input type="email" name="user-email" value={state.userEmail} />;
Enter fullscreen mode Exit fullscreen mode

No Injection Attacks in JSX

Malicious inputs are escaped in JSX. No input attack can be injected into the code, except explicitly set in the application. Cross-site scripting(XSS) attacks are prevented in JSX.

const title = response.inputAttack
// This is safe
const element = <h1>{title}</h1>
Enter fullscreen mode Exit fullscreen mode

JSX is JavaScript Object.

A transpiler compiles JSX down to React.createElement() calls. When you write JSX, the createElement() method is called from the React object class under the hood.

The two examples below are identical:

const element = (
  <h1 className="surprise">
    This is JSX!
  </h1>
);
Enter fullscreen mode Exit fullscreen mode
const element = React.createElement(
  'h1',
  {className: 'surprise'},
  'This is JavaScript object!'
);
Enter fullscreen mode Exit fullscreen mode

Summary

Let's look at some of the basics of ReactJS' JSX that's been covered so far.

  • Writing expression in JSX
  • Using JSX in Expression
  • Attribute Expression in JSX
  • Specify Children in JSX
  • No Injection Attacks in JSX
  • JSX is JavaScript Object

Top comments (0)