Our robo friends are looking really really nice.
I really like this app. There is one issue though.
If I minimize this. OK, it's responsive, it looks good. But if I scroll down, well, I lose my search bar at
the top.
Wouldn't it be nice if this was at the top and I have a scroll that I can do and still search through my friends?
Well, you might be thinking - "There's probably a CSS style that I can add here." But I want to illustrate
to you the fact that React and why React so good is because you can create Components that are
reusable, not just card components but functionality.
Would it be cool if there was maybe something where we can add around "CardList"?
Maybe I can create a "Scroll" Component? And this "Scroll" Component just wraps the "CardList".
And now "CardList" will be completely scrollable.
But now I can use "Scroll" this component anywhere in my app, any time I need scrolling, I can just wrap
it around.
Can we do this?
Let's give it a try.
I'm going to "import" a Component that we don't have yet
that's called "Scroll" from a file that we'll create in just the second. Let's create a new file.
We'll call that "Scroll.js"
And here we'll, again, go through the motion of "React from react".
Let's make this a little bit bigger.
And again I want to change this to Babel and we'll say "const Scroll" equals
it's going to return- Hmm- what should it have returned?
Before we talk about that just so we don't forget- we have to "export default Scroll".
Now here's a problem. We want to return something, but it doesn't make sense, does it?
If I go to "App.js"
"Scroll", but it's not a self closing component,
it wraps component.
So how can we tell "Scroll" to "Hey, just render whatever's inside of you."
Up to this point,
We've learned about "props" and we've learned about "state".
There's one other thing in React that I want to teach you and that is "children". And "children" is this.
"Scroll" can use "children" as a way to render its children.
What do I mean by that?
Well, in here, every "props" object has children.
So if I go "props.children", well, let's see what happens.
I save and go back, everything's rendered. But if I remove this and I just do a "h1",
I just get this. You see, "props.children" is exactly that.
If I "console.log(props)"
Let's open up the console.
I see that I get an object.
And even though item pass any "props" to "Scroll", automatically every single component in React has this
property, "children". And this children -a kinda looks confusing here- but has "CardList" type "CardList"
So using this "props.children", we can create Components that wrap other Components. Up to this point,
we were only able to wrap these 'lower case components' which are kind of like the HTML tags.
But every time we had a custom component with a capital letter that we built, well- we couldn't really
wrap it.
Now we can using "this.children".
But here's the cool part.
Using "props.children"
Well, I can create a scrollable component. Let me show you how. Simply do "div" close that "/div",
and in here, again curly brackets "props.children". And all we need now is to add styles to this div.
I could create a "Scroll.css" file and add a style so that scrollable, but I want to show you another way
which is using "style".
Just like an HTML,
Using this style attribute and JSX, I can add styles but using double curly brackets, that is
this is a JavaScript expression and within this I'm returning an object and this object can have
CSS styles, such as a property "overflowY".
which is a CSS property and this you can say "scroll" again,
a CSS way to make the element scrollable. We'll say "border" is 1 pixel, solid, black and finally
we'll give it a "height" of 500 pixels. I'm going to make this smaller so you can see, I'm going to save,
compiling is fine.
If I go back, it looks like we have a box here.
Let's make it a little bit bigger just so you can see. I'm going to say 5 pixels even though it's ugly.
And I forgot 't' in here, right?
All right, let's see. Look at that, we have a scrollable component.
Let's make this a little bit bigger, just so we can see a better. Look at that.
If I make this smaller, I now have a scrollable component inside of this.
Very cool.
Now this is a simple app.
It allows you to search.
It allows you to scroll but it does show the power of React, doesn't it?
We've created these simple functions and the only thing that we tell it to do is,
well, we tell it what state it has. The entire app is described through these two things.
The "robots" and "searchfield" and React takes care of the rest. As soon as "searchfield" or "robots" changes,
React trickles down
All this information as "props" to all these components and magically creates our view for us.
That's why React is so powerful it's a view layer.
It takes care of manipulating the DOM and all we tell it is "Hey, what's the state?"
"What are the functions that you wanted to work with the state?" and the rest?
Well it optimizes to make sure that everything is super fast and you can see how amazingly fast everything
is here.
It's a super snappy app and these components are now reusable.
I can bring "SearchBox" now into a another part of the web site. I can add "Scroll" into another part of
the web site.
This is what made React so powerful and this is why so many web sites are powered by React.
Once you learn the syntax and you get used to everything that's when React truly becomes powerful.
Although we took a bit of time to create this app, once you get used to it and app like this
you can create it in, well, less than an hour, probably 30 minutes.
All right I think we've done a great job here.
Can't wait to see you in the next video. Bye-bye