Introduction to JSX syntax - React.js Tutorial

- [Instructor] SX or JavaScript XML is a syntax extension for JavaScript. But don't let the acronym scare you. JSX is what makes writing React components a breeze. It allows you to write HTMLA code within your JavaScript files, making your code more intuitive and concise. So let's look at this simple example. Consider this plain JavaScript code. So we have a greeting that renders a react element and within an H1 says Hello JSX. So let's write the same thing now with JSX. So const greeting equals, and then we can actually write the H1 like it is HTML, hello, JSX. So expressing the same thing becomes much simpler with JSX. Notice the elegance and readability JSX brings to the table. It looks like HTML, but it's seamlessly integrated into the JavaScript. And JSX isn't just about mimicking HTML. It also allows you to embed JavaScript expressions directly within your markup. This dynamic functionality is a game changer when it comes to building dynamic and our interactive user interfaces. Let's see, another example. So I'll write const name equals react enthusiast, that's you, and then we'll make a dynamic greeting. So const dynamic greeting equals we'll make an H2, hello. And then we can dynamically render the name within some curly braces. So name, and we can even add an exclamation point here. So here the value of the name variable would be dynamically injected into the JSX. So this makes it easy to handle dynamic data and create personalized user interfaces. JSX seamlessly integrates with React components, making the process of building user interfaces even more intuitive. So now let's see how JSX makes rendering components a breeze. I'm going to make a simple button component so we can get rid of this and start with const button and our arrow function to create our component, and we've got our curly braces. And within the curly braces, we'll put our return with our brackets. But first up here, we're going to need to import react from react, perfect. And at the end we have to export our component button. So with the return here, I'm going to make a lowercase button. There we go. And we're going to add the label here dynamically, but since we haven't declared label here, I'm going to actually consume the label as a variable. So I can again add label here in curly braces within my function. So this label in the button component is a variable, but specifically it's a destructured prop. In React functional components props, short for properties, are used to pass data from a parent component to a child component. So then we'll create our app and everything between the return brackets will be rendered on our page. So I'm going to head over to our app.js component that I've already made here, and first we have to actually import the button. So there we go. Import the button at the top. And then we have the app component set up, just like all the other components. And let's add our button component here within the app. So we have our return. And then I'm going to add a div and then the component button rendered here. But I'm going to add a label that's going to say, click me. So here the button component is effortly integrated into the app component using JSX. The resulting code is very clean, easy to understand, and follows a natural structure. So let's see what's rendered on our page now. We just have this button that says click me. So this is the combination of the app.js and our button.js components working together quite seamlessly. So why bother with JSX? The advantages of JSX are plenty. JSX enhances the readability and maintainability of your react code. It closely resembles HTML, making it accessible to developers familiar with web development.