Alright, let's get our first HelloWorld output of React in the browser. We are going to bring two packages in, react, the core library and then ReactDOM, which is one of the compiled targets for React. So DOM is for the web and then you have React Native for mobile apps. Like I mentioned, we would typically need a proper build step for this, but I'm going to bring a couple of script tags from a CDN.

step for this, but I'm going to bring a couple of script tags from a CDN or content delivery network called UNPKG. Alright, so in my document head I will paste these two script tags and you can see we have React and ReactDOM. You might notice that the version here is 18. The reason is that for later versions of React, they don't ship UMD packages but only ESM and it's a little bit harder to just set up for a quick demo in the browser.

and it's a little bit harder to just set up for a quick demo in the browser. Uh, if you want to know the setup, let me know in the comments and I will show you the way to do it with Eloquent packages. With any place I'll collapse the document heads so we can see what we're doing and we're going to write some JavaScript in the <script> tag as I'm recording this. It is Monday here in Australia.

tag as I'm recording this. It is Monday here in Australia. So let's have a constant day equals Monday. And then we'd have a greeting, constant greeting that says Happy and interpolate the day variable. So if you think of how you would in vanilla JavaScript inject this greeting into the page, into the DOM, you would have first an element that you can target something with an ID or some specific identifier.

that you can target something with an ID or some specific identifier and then you would set the inner text for that element to the greeting. So let's do that. Let's say we want a div with an ID of app up here. So we're going to target first this element const app equals document.getElementById exactly. And then we want to set exactly like this, the innerHTML to an h2 tag with the greeting text.

And then we want to set exactly like this, the inner HTML to an h2 tag with the greeting past. So if I save this, we have a Happy Monday greeting printed. So the setup with React is quite similar. We need first to have an element that we can inject our application in and this is the root element for the app. And then we can render our React application inside that root. So I'm going to keep that element with the idea of app.

application inside that route. So I'm going to keep that element with the idea of app and the app selector, but instead of doing the inner HTML approach, I will create a React root node with const root = ReactDOM. Remember it's one of the packages that we have installed here and I will go root.createRoot and pass our app element. So we essentially saying the React root node is this D

and pass our app element. So we essentially saying the React root node is this div with the ID of app. And once we have our route we can render our React application inside of it. So I can go root.render and for now let's just pass the greeting variable and see what happens. Okay, so it outputs Happy Monday once again, but it looks like it's not an h2 tag like we had before.

Okay, so it outputs Happy Monday once again, but it looks like it's not an h2 tag like we had before because we are literally just injecting the greeting string inside the div. If I open the dev tools, you can see that we have our string Happy Monday inside the div idea of app. So of course that seems like a lot of work to just output a string in our page that we could have done with vanilla JavaScript.

to just output a string in our page that we could have done with vanilla JavaScript. So let's crank it up a little bit and bring a mini React component this time instead of our greeting string. Okay, I will get rid of the greeting here and instead I will paste a little JavaScript function that sort of looks like it's returning HTML. So you can see we have this function called app with an uppercase A that's important.

So you can see we have this function called app with an uppercase A that's important and it seems like it's returning a div, an h2, a p, and a closing div. And so this time, instead of rendering the greeting, I will render this app. And once again, new syntax app with a closing slash might seem confusing, but go with it for now. So the expectation is that in the elements with the Idea

but go with it for now. So the expectation is that in the elements with the Idea of app, we are going to see this HTML markup. So let's give it a save. And whoops, we see actually nothing and in the console we seem to have a problem on code syntax error. This is not valid JavaScript, what are you talking about with these angle brackets here I do not recognize this says the browser.

with these angle brackets here I do not recognize this says the browser. So remember when I mentioned that React or JSX could not run directly in the browser and it needed a little tool, a build step. That's what I meant. So now we're going to build a little tool called Babel or Babel, however you wanna pronounce it. That is going to do the piling and compiling of the JSX code into JavaScript code.

That is going to do the piling and compiling of the GSX code into JavaScript code that the browser can interpret. Alright, backup in the document head, I will add a third <script> tag. This one brings the standalone version of babble and it's going to take care of understanding what to do with this GSX syntax to make it work, I need to go in the <script> tag here and tell the browser that the type

to go in the script tag here and tell the browser that the type of this script tag is text/babel. And this time when I save the file you can see that Tara, our markup is this time showing up. This App component is rendered in the browser, but we get a warning that we should not be using this in production. So you're telling me we did all this to just render HTML when we could have written HTML?

So you're telling me we did all this to just render HTML when we could have written HTML? No, check this out. So if I take the monday string here and replace it with Cobra's day and I hit save, it still works. We have processed this HTML looking code and injected the day variable inside of it. So the text said Happy Monday. And to be crystal clear that this is not HTML, let's go new Date() to localDateString, which is a function.

And to be crystal clear that this is not HTML, let's go new Date to localDateString, which is a function that takes a locale, I'm gonna go EnglishAU and then pass an option and I want to do weekday in its long format. And once again, this should still say Happy Monday. And so this is pretty clear at this point that this is not just HTML. So what you're looking at here is a React component and it's technically a JavaScript function.

So what you're looking at here is a React component and it's technically a JavaScript function. It happens to be using this JSX syntax that lets you have this XML ish, HTML ish syntax. But really under the hood it's just JavaScript behind the scenes. A tool like Bubble or a proper build step is going to transform that JSX syntax into JavaScript that the browser can understand. And we're going to look at in the next lesson at JSX at all.

that the browser can understand. And we going to look at in the next lesson at YJSX at all is a good idea and how powerful it really is.