JSX Basics

Table of contents:

• Start Here
• What is JSX?
• Rule 1: JSX Elements Must be Wrapped in an Enclosed Tag
• JSX JavaScript Expressions
• Using Functions
• Conditional (ternary) operator
• && Operator

==============

Start Here

You can clone the Github project to follow along.

git clone --single-branch --branch JSX-Basics https://github.com/ranyelhousieny/new-react-app.git

cd new-react-app

yarn install


yarn run start        

Browse to https://localhost:8080/ and keep it to see changes

We will be working on src/index.js

===============

What is JSX?

JSX stands for JavaScript XML. JSX is a syntax extension of JavaScript. It allows us to write HTML in React (within JavaScript code) directly.

Syntax:

const template = <h1>Welcome to JSX.</h1>;        

Let's update our index.js, accordingly

===============

Rule 1: JSX Elements Must be Wrapped in an Enclosed Tag

If you want to add multiple tags. For example:

<h1> Welcome to JSX. <h1>
<p> 1. JSX has to be in one parent tag </p>

        

The code above will fail with the following error:

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (8:4)


? ?6 |? ?
? ?7 |? ? ?<h1>Welcome to JSX.</h1>
>? 8 |? ? ?<p>
? ? ?|? ? ?^
? ?9 |? ? ? ?{' '}
? 10 |? ? ? ?1. JSX has to be in one
? 11 |? ? ? ?parent tag{' '}        

This is because you need to have one parent tag as follows:

const template = (
  <div>
    <h1>Welcome to JSX.</h1>
    <p>
      {' '}
      1. JSX has to be in one
      parent tag{' '}
    </p>
  </div>
);        

Let's add an ordered list.

var template = (
  <div>
    <h1>Welcome to JSX.</h1>
    <h3>JSX Rules: </h3>
    <ol>
      <li>
        {' '}
        Rule 1: JSX Elements
        Must be Wrapped in an
        Enclosed Tag{' '}
      </li>
      <li>RUle 2: ? </li>
    </ol>
  </div>
);        

====================

JSX JavaScript Expressions

You can include JavaScript Expressions inside jsx tags between {}. Let's change the template to have a name and a profile website link, as follows:

const userName =
  'Rany ElHousieny';
const website =
  'https://rany.tk';
var template = (
  <div>
    <h1>Welcome to JSX.</h1>
    <h1>---------------</h1>
    <h2>
      {' '}
      My Name is {userName}
    </h2>
    <p>
      Please, visit my profile
      at {website}
    </p>
  </div>
);

        

Here we added variables inside the tags using {}

You can add any JavaScript expression inside those {} as we will see. This is one of the powerful features of JSX.

Example: We can convert the name to upper case using .toUpperCase

Similarly you can use Objects, as follows:

===================

Using Functions

You can run functions inside JavaScript {}, as follows:

Note: I changed the font color to blue in styles.css because the red was driving me crasy :)

==============

Of course, this function is JavaScript and you can add any JavaScript code. Let's add a condition

Conditional (ternary) operator

We can have all of that in one line using Ternary Expression as follows:

{user.profile ? user.profile : "Not Available"}        

Syntax

condition ? expressionIfTrue : expressionIfFalse        

=====================

&& Operator

Of course, it does not look good to show "not available". Let's see how can we print to the screen only when there is a profile using the && operator as follows:

{ Condition && jsx to Render on Screen }
        

{user.profile && 
      <h1>
        Please, visit my
        profile {user.profile}
      </h1>
    )}(        

In this case, if there is a profile it will print it:

If there is not profile, it will just stay silent :)

=================

=====================