
Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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
, symbol
Objects
, 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.