Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Components
Loading...
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, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 Let's talk about components in React.
00:00:02 There are two ways in which we can define components.
00:00:05 The traditional one is called classComponents.
00:00:10 While they're not widely used anymore, they're still common in older code bases.
00:00:15 An example of a class-based component would look something like this.
00:00:18 classComponentName extends React.Component and then there's a render method and a return statement.
00:00:25 all of this code just to be able to return a simple H2.
00:00:29 You might encounter these if you work on larger projects in big companies.
00:00:33 However, for new projects, they are no longer recommended.
00:00:36 Instead, there's a better way to create components.
00:00:39 Components just like this one right here, where you define it by just declaring a JavaScript function.
00:00:44 But we have a lot of unnecessary code right here.
00:00:47 So let's actually delete this entire function and create it from scratch.
00:00:51 You could do something like function app, or you could also use newer JavaScript syntax called arrow components.
00:00:57 That would look something like this.
00:00:59 Const app one is equal to, and then you declare it like this.
00:01:04 I actually prefer this way of creating components.
00:01:06 So I'll just call it app and I'll just export it at the bottom.
00:01:10 Then within here, you can say return.
00:01:14 render on H2, and say something like functional arrow component.
00:01:19 Now, if you head over to your browser, you should be able to see the text we are rendering, which means that the component is showing successfully.
00:01:26 And the beauty of creating React components is that you can create as many as you would like.
00:01:31 Something like const card component, or just card, would render a little card that looks something like this card component and then you can use that card
00:01:42 within the original app component by simply wrapping it either in this interesting little component called react fragment or just a regular div and then
00:01:51 below the h2 you can render as many card components as you would like just like so In the browser, that will look something like this.
00:02:00 And you can reuse it across your entire application.
00:02:04 Now just imagine if this card component actually consisted of more code, you would be able to reuse it everywhere, allowing you to write code only once
00:02:13 and use it multiple times, eliminating repetition.
00:02:16 And that's the power of React's component-based architecture.
00:02:20 But of course, it'll start making much more sense as we dive deeper into some more real React apps so I can show you how real developers use it on their
00:02:29 day-to-day projects.
00:02:30 But writing components is not enough.
00:02:33 Sometimes we want to pass data from one component to another to display something specific and not create multiple similar components for every little change.
00:02:42 And we can do that through props.