ial will be an introduction to react and NextJS it's hands--on interactive and h html and then we're going to do uh body and then we can do the children and this is going to be english okay that looks fine export default function page and and we'll do return we'll do an h1 we'll do yep h1 and we can say hello world yep that looks good okay I can close these okay so now let's run our local deb server and on the right here I can open up local host 3000 and we see Hello world. So this is the most minimal example of getting started here. And another thing I'm going to do inside of our package json is I'm going to add this D-turbo flag to make our dev server faster By the time you watch this video this might already be the default but i'm just going to flip it on here so we can get even faster when we're loading up our application to start as well as making changes. So let me walk through what's happened here. We have a page that actually is being shown on the page or in our browser. This is the most minimal example And if I go inside of here and I add some more exclamation marks I hit save on the right You see that it's instantly updated in our browser. This is what we call fast refresh or hot module reloading. And that makes it really fast for you to iterate locally, make changes, add things to your page and then just you know hit save and see it reflected over here in your browser. So really fast iteration time. Now if you've seen NextJS anywhere else or you've used it before in the past, you might be wondering what that app folder is. So that was something that was introduced in NextJS 13. It was stabilized in NextJS 13.4. we're now on 14. So this is now kind of the standard way but if you still see other examples that are using the old pages directory that's totally fine too. that's still supported and works. So there's actually two different routing systems in NextJS. So I could for example say you know pages slab. js and here I could say export default function about um, and we're going to go here and return about. So if I go to our browser and I go to slab here we see our new page for about. So you can use both of these routers. it's okay if you have them in the same application, totally fine for the rest of this tutorial I'll only be using the app router or app directory. But I just wanted to quickly mention that in case you're coming in with some pre-existing knowledge. Okay, so we have a local dev server running now. We can make changes, see them updated in the browser. We have our sandbox for editing our React components and making changes. And we have our first React component shown on the screen. Let's actually take a little bit of a step backwards here and talk about some of the fundamental concepts of react. Now, the reason I went in this route is because I personally learn best by building, and I think it's the most helpful for you all coding along that. You can actually have your editor open, make these changes, see them update in the browser versus me talking about it in the abstract a little bit here. So if you haven't heard of React, it's a library for making user interfaces, you get a write components, and React takes care of the rest basically. And it's really fun to work with. And I'm going to show you some practical examples. So the first concept I want to talk about here is JSX. And you might be noticing looking at this component, it looks kind of like JavaScript, It looks pretty similar, but then there's also this HTML in here as well too. And JSX is the magic that allows us to, to combine HTML and JavaScript and have the ability to write conditional statements and check if this. I