[Intro]

[Background Music: Friendly and upbeat tone]

Instructor:

"Hi there, and welcome back! Now that we’ve set up our development environment, it’s time to get hands-on and write your first React component.

In this video, we’ll cover:

• What JSX is and why it’s used in React.
• How to create and render your first functional component.
• The role of the ReactDOM.render() function and how it brings your React app to life.

By the end of this lesson, you’ll have built your first React component and displayed it in the browser. Let’s get started!"

1. Introduction to JSX and Why It’s Used in React

Instructor:

"First, let’s talk about JSX.

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code directly in your JavaScript files. React uses JSX to make it easier to define the structure of your components.

Why Use JSX?

Without JSX, you’d need to write JavaScript code to create HTML elements, like this:

const element = React.createElement('h1', null, 'Hello, world!');

With JSX, you can write the same thing in a more intuitive way:

const element = <h1>Hello, world!</h1>;

Key Features of JSX: