INTRO TO JSX

 

1. INTRO TO JSX

JSX stands for JavaScript XML, and it's a syntax extension for JavaScript. It is primarily used with the React library to describe the structure of user interfaces. JSX resembles HTML in its syntax, but it allows you to write HTML-like structures within JavaScript code.

1.1. Nested JSX

const myDiv = (
<div>
<h1>Hello world</h1>
</div>
);

1.2. JSX Outer Elements

const blog = (
  <div>
  <img src="pics/192940u73.jpg" />
  <h1>
    Welcome to Dan's Blog!
  </h1>
  <article>
    Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out.
  </article>
  </div>
);
   

1.3. Rendering JSX

import React from 'react';
import { createRoot } from 'react-dom/client';

// Copy code here:
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<h1>Hello world</h1>);

1.4. Rendering JSX Explained

import React from 'react';
import { createRoot } from 'react-dom/client';

// Write code here:
const container = document.getElementById('container');
const root = createRoot(container); 
root.render(<h1>Hello world</h1>);

1.5. Passing a Variable to render()

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
// Write code here:
const myList = (
  <ul>
   <li>Learn React</li>
   <li>Become a Developer</li>
  </ul>
);
root.render(myList);

1.6.The Virtual DOM

const hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:
root.render(hello, document.getElementById('app'));

// This won't do anything at all:
root.render(hello, document.getElementById('app'));

1.7. Review

In this lesson, we learned that:

• React is a modular, scalable, flexible, and popular front-end framework.
• JSX is a syntax extension for JavaScript which allows us to treat HTML as expressions.

• They can be stored in variables, objects, arrays, and more!

• JSX elements can have attributes and be nested within each other, just like in HTML.
• JSX must have exactly one outer element, and other elements can be nested inside.
• createRoot() from react-dom/client can be used to create a React root at the specified DOM element.
• A React root’s render() method can be used to render JSX on the screen.
• A React root’s render() method only updates DOM elements that have changed using the virtual DOM.