Components

[00:00:00]
>> React Native the same as React is a component based framework. This means that your app is basically built out of these tiny little Lego books, and they are nested within each other. And we want to reuse them as much as possible. Generally you have one root component.

[00:00:17]
In our case, this is the app j s, and this is the entry point for your whole application. And inside it will have lots, and lots, and lots of little components that are inside each other next to each other and we want to reuse them as much as possible.

[00:00:34]
Yeah, it's generally good practice to break your app into many small components and it has a couple of benefits. It promotes component reuse, like you've already built a button you made sure that it interacts correctly. It has the right colors why would you want to build it twice, and it's easier to follow.

[00:00:55]
No one wants to debug a 1000 line react component if they can help it, and finally, it's easier to test. It's significantly easier to unit test a small component than it is a huge one. Now, let's look at the app that we've built so far. Can you see something that can be extracted into a component?

[00:01:16]
Well, I think the colored boxes is a pretty good candidate for being refactored. So let's see that in general. Yeah, in general in react, we have a components directory where we add our components. So let's go to the root directory of your project, and let's create a new folder.

[00:01:39]
How do I create folders here, yeah called components. And now inside this component let's create a new file called color box.js. This is going to be our reusable colored box component. I always start all new components with my default hello world, display something in the screen to make sure it's working code.

[00:02:09]
So let's do this here as well. So let's import React. Okay, [SOUND] let's import the view and text from react-native. Now let's create a constant component called ColorBox. Let's have it return, same as what we did before, we just have a view with some text inside. And finally don't forget to return that ColorBox component as the default export.

[00:03:02]
You can have multiple components per file, but generally, a good practice is just to stick with one component per file [be]cause then you don't lose them, you'll just see what the components are based on file names. Now that we have this component, let's import it to our app and display it on the screen.

[00:03:30]
So let's import ColorBox from './components/ColorBox' And let's add it after the last box that we already have. You should be seeing the text that you added on the screen underneath all your other boxes. Now if you've not done React before, one thing to note here is I've used a what's called a self closing, JSX element.

[00:04:08]
So normally, JSX elements have a starting tag and an ending tag. So the ending tag has what they call, the little dash to say that it ends it. And then for the one I called children inside. Whereas this color box, we don't want to pass any children into it, so we just want the component itself.

[00:04:28]
So rather than having us do this, which we wish we could, and it's just empty children, but it's redundant. We just close it immediately, so there's just a handy little feature. Cool, so what we should do now is let's just copy the code that we had for our first color box, the cyan one, and add it here and replace the content here.

[00:05:01]
You'll also have to copy the styles. So I'm gonna create import StyleSheet. And we need const styles, use style sheet creates, stylesheet create, and we have a box, Style, and cyan style, And a box text I'm just gonna copy these styles over. So box style, Cyan, And text.

[00:06:04]
Cool, well this is working. But now what we're doing is we're just taking our cyan box and created a color box for it which is not very handy. What we'd like is for this box to display the color, and the name of the color dynamically. Now what we can use for this, props, or properties.

[00:06:23]
You've already actually used properties, specifically the style property, but, what you might not know is that you can add your own properties as many as you want. So for the color box we have two properties we would like to add. We have the color name which in this case is cyan and colorHex.

[00:06:55]
Now in order to get access to these two properties in the color box, they get passed into here. So if you assign this to props, you can replace cyan with props, dots, color name and you can replaces this hex code with props dot, I think I should call it hex code.

[00:07:27]
I think I called it hex code in my solutions, I'm gonna rename it to hex code. Notice that if we want to use any kind of variables in as text, we have to wrap them into curly braces cause that tells react-native that this is text, because if I didn't do this, it would just render props.colorName as a text which is not what we want.

[00:08:00]
And finally, this is a convention in React. And I think I'm going to follow throughout this course that these structure, the properties, so rather than having a props here and doing props dot color name, we can actually replace this with curly braces and these structure the properties directly, so we can do a color name, and hex code and then just get rid of this.

[00:08:31]
So this is just a convenience, but you'll see it all the time, so it's good to get used to it. And now finally, you notice that still we use cyan here and styles. Now if you remember, we can pass in inline styles and we can pass in multiple styles, and we can do it all at once.

[00:08:50]
So we can add a constant here called box color and the background color hex code, and just pass this in as a second argument. Now we can get rid of the actual color stat as well. That's it, this is our reusable color box component. So now all we want to do is replace all of the rest of the colors with it.

[00:09:26]
So let's create four of these, and then just copy this we got blue, magenta, orange, I'm gonna copy the hex codes as well. And finally we can get rid of all this. And we can also get rid of the styles here so the box, textbox, style, and all the text style.

[00:09:56]
So you should only have the container and textiles left. Now we've basically converted our component into, we've refactored our code so that our color box component is separate, making our code much cleaner and easier to read.