JSX

Introduction

      function Greeting() {
  return (
    <div>
      <h1>Hello, Developer!</h1>
      <p>
        Welcome to the wacky 
        world of React!
      </p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Greeting />);

      body { padding: 16px; }

JSX

Fragments

      function Greeting() {
  return (
    <div>
      <h1>Hello, Developer!</h1>
      <p>
        Welcome to the wacky 
        world of React!
      </p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Greeting />);

      body { padding: 16px; }

Let's explore the mental model behind JSX. The most important thing to realise is that JSX is not HTML. It is Javascript.
Consider this javascript statement: logging an object to the javascript console.
When you execute this code, you will see the object structure in the console with field message and its value "hello".
Now, guess what will happen if we log the JSX code into the console? Will it be rendered HTML with the text hello?
No! The result is, again, just an object.
This object defines the HTML element we are creating, specifying the tag name in the "type" field and the rendered text in the children field.
Under the hood, your transpiler converted the JSX statement to a React function call, creating a div element with a child of the div element specified as string value "hello" of property children. Both statements on line 2 and lines 4 to 6 do the same thing.
Now consider that JSX is just a javascript object. This means that you can store it in a variable and pass as an argument to functions or reuse its value.
For example, this Greeting component renders the value stored in the jsx variable. Pretty cool huh?
When we render this component, it should not be surprising that it renders the text "hola!".

JSX

Elements and Components

      const ui = (
  <button><i class="trash" /> Bye</button>
)

const DeleteButton = () => (
  <button>
    <i class="ph ph-trash" /> Delete
  </button>
)

const Post = () => (
  <div>
    <h1>Post: Your post</h1>
    <p>Post text</p>
    <DeleteButton />
  </div>
)

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Post />);

Let's take a look at different JSX elements.
First, we have the standard HTML elements, such as buttons, divs, and spans. We always write these elements in lowercase.
But, the true power of React lies in the capability to define custom elements, which we call components. React components are functions whose names start with capital letters. In this case, we used an arrow function notation instead of standard function notation. You can choose your preference.
When using the custom DeleteButton react component, we use standard html notation. Since we use capital letters, react components stand out from the standard html element.
When we run this example, we see the custom button at the bottom of the post. Pretty cool, huh? But let's take a look at the implications of React being just javascript and how we can use it to our benefit.

JSX

Expressions

      function MathGreeting() {
  const name = "Developer";
  const a = 6;
  const b = 10;
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Sum of {a} and {b} is {a+b}</p>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MathGreeting />);

JSX

Expressions

      function Expressions() {
  const a = "Developer";
  const b = Math.round(6 / 3);
  const c = <b>Hello</b>;
  const d = { a: 1 } // NO!
  const e = JSON.stringify(d)
  return (
    <ul>
      <li>{a}</li>
      <li>{b}</li>
      <li>{c}</li>
      <li>{e}</li>
    </ul>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Expressions />);

      body {
  padding: 16px;
}

JSX

👾 Expressions: Interactive Example

JSX

Interactive Components

    function Button(props: { 
    title: string, 
    message: string 
  }) {
  function clickHandler() {
    alert(props.message);
  }
  const background = props.message === 'No!' 
        ? 'red' : 'green';
  return( 
    <button 
      onClick={clickHandler}
      style={{ background }}>
      {props.title}
    </button>)
}

// React code to modify elements
const App = () => {
  return (
    <div>
      <Button title="Say Hi!" message="Hi!" />
      <br />
      <Button title="Say Ola!" message="No!" />
    </div>
  );
};

With JSX you can also seamlessly create and manipulate complex, reusable React components.
For example, let's create a Button component. On the next page, you will be able to play with this component.
This component accept two props, title and message. We will talk about props later in this course, for now, please note that the Button component must specify title and message.
The component renders a styled button with action handled on button click. Let's take a closer look.
The title prop is rendered in the content of the button.
The message prop is used in the clickHandler function to alert the message when user clicks on the button.
We pass the clickHandler to the onClick prop of the button. The onClick handles the click activity, similarly we have other button handlers such as mouseDown, mouseUp, blur or others.
We will also conditionally style the button. If the value of the message is "No!" we will render a button with red background, otherwise with green background.
Last, let's check out how to use this Button component. Remember that we defined the component with the title and message prop, naming it Button with capital B. Thus we we have create a custom JSX element Button and use it same as any other HTML element.
If we want to render a different button, we simply change the input props. It is React standard to name components in Pascal case and keep html components in lower case. Let's play!

JSX

👾 Expressions: Interactive Example

Transpiling JSX

    type Props = { message: string }

function Message(props) {
  return <div>{props.message}</div>
}

function App() {
  return <Message message="Hello" />
}

    import React from 'react';

function Message(props) {
  return React.createElement('div', { message: props.message})
}

function App() {
  return React.createElement(Message, { message: "Hello" })
}

JSX

Fragments

      function Greeting() {
  return (
    <h1>Hello, Developer!</h1>
    <p>
      Welcome to the wacky 
      world of React!
    </p>
  );
}

render(<Greeting />)

      body { padding: 16px; }

JSX

Fragments

      

function Greeting() {
  return (
    <div>
      <h1>Hello, Developer!</h1>
      <p>
        Welcome to the wacky 
        world of React!
      </p>
    </div>
  );
}

render(<Greeting />)

      body { padding: 16px; }

Full Stack Development

JSX and Components

JSX

Introduction

JSX

Fragments

JSX

Elements and Components

JSX

Expressions

JSX

Expressions

JSX

👾 Expressions: Interactive Example

JSX

Interactive Components

JSX

👾 Expressions: Interactive Example

Transpiling JSX

JSX

Fragments

JSX

Fragments