00:00:02 Now we can finally start with the app.

00:00:05 Let's start from the top down from the header by turning this entire div into an HTML5 semantic main tag.

00:00:13 And then below the main, we can create a new div, which is going to be self-closing and it'll have a class name equal to pattern.

00:00:22 You'll see what it does very soon, but for the time being, let's remove this h1 and create another div with a class name of wrapper.

00:00:33 which will wrap our header.

00:00:34 So within it, let's create a header tag.

00:00:37 And within it, we can say, find movies you'll enjoy without the hassle.

00:00:46 There we go.

00:00:47 That's looking nice.

00:00:48 And we can turn movies into a span.

00:00:51 And to this span, we can apply a special class name of text dash gradient.

00:00:59 There we go.

00:01:00 So now the way this is working, and if you want to take a look at the full styles for the text gradient, you copy it and you search across all files for it.

00:01:09 And you'll find it right here in the index.css where you can see that we're applying a linear background from N2 and then making it clip with the text

00:01:19 and setting it to transparent.

00:01:20 This is more so a CSS trick rather than React, but it's very cool to know.

00:01:25 And once again, if you'd like me to do more of these CSS tricks and show you how I came up with them, I can do a video on that too.

00:01:31 Below this header, we'll also display a p tag of search.

00:01:35 Later on, we'll convert this piece of text into its own component, but for now, it can remain just a p tag.

00:01:41 And of course, let's not forget the icon.

00:01:43 To get all of the images we'll use in this course, you can head over into the description and find a link to the Figma design.

00:01:50 There, you'll be able to see this full design, and you'll be able to download the images.

00:01:55 The way in which that works is you select an image, in this case, let's go with this one, and then you export it.

00:02:02 And we can also do that for a couple of other images that we have here, such as this background.

00:02:06 So select it and simply export it.

00:02:09 Next, we can get the logo of our application.

00:02:11 Then we need to show this poster not available.

00:02:14 So let's export that too.

00:02:15 Let's not forget about some of the icons, such as this search icon right here, which we'll want to export as an SVG as well as a star SVG.

00:02:24 So you'll have to click multiple times and then select it to get to it.

00:02:29 And then you can just export as SVG.

00:02:31 There we go.

00:02:32 You got our quick course on Figma as well.

00:02:35 It's very important to know how to work with designer tools as a developer to be able to put these designs into practice.

00:02:41 So now that we've downloaded all of these assets, let's remove this Vite.svg from public, open up your downloads folder,

00:02:49 and then drag and drop all of the assets you downloaded.

00:02:51 It should look something like this, but make sure to name them appropriately.

00:02:55 This right here is a star, so let's just rename to star.svg.

00:03:01 After that, we have this image right here, which is going to be hero-bg, because it's a background for the hero section.

00:03:10 After that, we have the hero image itself, so we can say hero.png.

00:03:15 We also have the logo.png.

00:03:18 as well as a no movie.

00:03:20 So you can rename all of those accordingly.

00:03:23 And let's not forget about the search.

00:03:26 So let's rename it to search.svg.

00:03:30 There we go.

00:03:31 Now we have all of the assets needed to create this project.

00:03:34 So let's use one of these assets right within our header.

00:03:38 Here, we can render an image that'll have a source equal to dot slash hero dot png.

00:03:46 And we can give it an alt tag of hero banner.

00:03:50 If you save it, you'll immediately see it right here.

00:03:52 And if you expand your screen, you'll also see this hero background with different spotlights, as well as these vertical lines that kind of resemble a

00:04:00 movie screen opening up.

00:04:02 Looking great!

00:04:03 Now, let me teach you how to create your first React component.

00:04:07 You can do it by opening our file explorer, heading into your app, source, and then within the source, create a new folder and call it components.

00:04:16 Within components, create a new file and name it search.jsx.

00:04:24 Within it, run RAFCE, which will quickly spin up this component.

00:04:29 And then you can head back over to App and import it here by simply calling a self-closing search component.

00:04:37 And if you press Enter while you're trying to render it, it'll actually auto-import it from the top.

00:04:43 But if that didn't work, you can manually do it by saying import search from .slash components search.jsx.

00:04:50 Now, why can't we see that search yet?

00:04:53 Well, technically it's here, but it's just a dark piece of text.

00:04:56 So it's not really showing on the dark background.

00:04:58 Let's actually make it show by giving this div a class name equal to text-white and text-3xl.

00:05:07 Now, how will this search work?

00:05:09 Keep in mind, this component is only keeping track of the search term itself, not of the movies that are going to show below the search.

00:05:16 So, it's not a good idea to just create a new state here, because then, what would we do with it?

00:05:21 It is tied to this scope of the search.

00:05:24 So what we have to do instead is create a new state within the main application, and then we'll pass it as a prop to search.

00:05:34 Let me show you how to do that.

00:05:36 We can use the use state snippet, and let's call it search term, set search term, and by default, we can set it to an empty string.

00:05:48 What we can do then is pass both the state itself as well as the setter state to the search as props.

00:05:56 You already learned how to use props, right?

00:05:58 You simply give it a name, such as searchTerm, which can be equal to, in this case, the value of a searchTerm coming from state,

00:06:07 and setSearchTerm equal to setSearchTerm equal to the setter function.

00:06:13 Oh, don't call it like this because then it'll get called immediately as this component gets rendered.

00:06:18 Instead, what you want to do is just pass over the function declaration.

00:06:22 So later on, you can then recall it within the search, but it'll not get called as soon as this component gets rendered.

00:06:29 And there's one more thing you'll learn right now, and that is that state fields can also be passed as props.

00:06:35 It's not illegal.

00:06:36 As a matter of fact, it happens super often.

00:06:39 So just to recap, here we have two different props.

00:06:42 And you can think of props as inputs that you pass into a component, like arguments for a function, or settings you pass to a component so it works properly.

00:06:51 In this case, as the user searches for something, like we can say, I am Batman, right here, we can then pass that search term over into search.

00:07:01 And then here, how do we use it?

00:07:03 Well, you get access to all the props right here in the props object, and then here we can maybe render it by saying props dot search term.

00:07:13 And there we go.

00:07:14 Now it's being rendered on the screen.

00:07:16 What you'll often see is just so you don't have to repeat props dot search term, props dot set search term, props dot something,

00:07:24 You can destructure those props because it's an object.

00:07:28 And this is not a React-specific thing.

00:07:31 It's just JavaScript.

00:07:32 Whenever you have an object, for example, person, that has something like a name, Bruce Wayne, age 36, of Location Gotham City,

00:07:42 AI is getting really creative here.

00:07:44 So let's say you have a person and you want to use their properties.

00:07:48 Well, you could do person.name, person.age, and so on, right?

00:07:52 But what you can also do is destructure name, age, and location from the person.

00:07:59 And then you can use them just like so.

00:08:02 Super simple, right?

00:08:03 So in this case, what we often do with React components is the same thing.

00:08:08 You simply destructure the search term and the set search term, which you're passing in.

00:08:15 That way, you don't have to say props.

00:08:17 every time, and it'll still work.

00:08:20 Now, there's one important thing to keep in mind.

00:08:22 And that is that props should never be changed by the child component.

00:08:27 They are read-only.

00:08:29 So if you want to do something like search term is equal to I am Batman not, even though you can see it works here, you should never actually do that.

00:08:39 because it breaks the main behavior of React and actually mutates the prop in multiple spaces.

00:08:45 So you actually don't know whether it's this value or this value or whatever it is.

00:08:50 And in this case, we're breaking two main rules of React.

00:08:53 The first one being you should not mutate props, and the second one, maybe even more important one, is you should never mutate state.

00:09:02 Yep, this is forbidden.

00:09:04 So if you want to go with something like search term is equal to new search term, this is heavily forbidden in React.

00:09:12 You should never do this.

00:09:14 You only mutate the state using the setter function.

00:09:18 Okay?

00:09:18 This is important behind the scenes for React to always know what the value of these states is.

00:09:24 Perfect.

00:09:26 So now that we have gotten that out of the way, you know that props are read only, and we can now implement the search using those values.

00:09:33 I'll do it by giving this main div a class name equal to search.

00:09:39 Within it, we don't have to render the actual search term, rather we'll render another div, which will contain an image.

00:09:47 of source is search.svg and then I'll tag of search.

00:09:52 It'll also contain an input, which will be a self-closing component that'll have a type is equal to text.

00:10:00 It'll have a placeholder equal to search through, let's say thousands of movies.

00:10:08 Then, you can pass a value to it, of search term, and more importantly, an onChange handler.

00:10:16 That works something like this.

00:10:18 And you'll do this very often in React.

00:10:20 Might seem a bit confusing at first, but trust me, once you get used to it, it'll become second nature.

00:10:26 So the way it works is that you don't manually ever change the search term.

00:10:31 Rather, the input has a handler for a specific type of event.

00:10:35 In this case, it's listening for an unchanged event, which in this case, it's a key press.

00:10:41 So each one of these event gets fired once you press your key.

00:10:45 And in real world, this is often shortened just to E, short for event.

00:10:50 And then you call the setter state and you pass over a.target.value.

00:10:55 So now if you head back over to the app, we can reset the initial state because we don't want this to be the main search input for everybody.

00:11:03 Rather, it should start from an empty string.

00:11:07 You can search through thousands of movies and then you can type something.

00:11:12 And you can see it is working and isn't actually changing the value.

00:11:16 Well, I don't know.

00:11:17 Let's render an H1 that'll render the actual search term.

00:11:21 And maybe we can give it a class name of text-white.

00:11:25 If we do that, you can see that as you type.

00:11:28 React is dynamically changing the value of that state.

00:11:32 And later on, we'll keep track of that value to call an API to give us movie recommendations.

00:11:38 Great.

00:11:38 With that in mind, we have now successfully completed a heading part of our application, a nice hero image, a background,

00:11:46 a title, and a search input.

00:11:48 Already in the next lesson, we'll focus on fetching movies from the best movie API on the internet.

00:11:55 So let's do that next.