Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Build the Header
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.