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")
);

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")
);

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>;
   }
}

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>
);

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} />;

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>

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>
);

const element = React.createElement(
  'h1',
  {className: 'surprise'},
  'This is JavaScript object!'
);

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