Lesson 02

Creating a custom Box component with React.js

The lesson goes over creating your own React component. In particular, you create a component to make a square box.

Reactjs is a frontend library that helps you build user interfaces with the JavaScript programming language.

You learn how to instantiate a component in JSX, simply using a tag like you do in HTML.

You also learn to pass information down to the component via props (short for properties).

You also learn that you can pass information between the open and close tags of the component, which is a special props called children.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

Summary of Creating a Custom Component in React

In this tutorial, we learn how to create a simple custom component called "Box" using React.

Creating the Box Component

Definition:
- A component is a function that returns a template.
- The Box component is created without parameters and returns a <div> with a class of box.
```
function Box() {
    return <div className="box" />;
}
```
Naming Convention:
- Components should be named with a capitalized first letter.
Using the Component:
- To use the component, it can be called like an HTML tag in JSX:
```
<Box />
```

Styling the Component

The styles are defined in a separate styles.css file. For example:

.box {
    width: 80px;
    height: 80px;
    background-color: green;
}

Passing Props for Customization

Props Introduction:
- In React, attributes passed to components are called props (short for properties).
Changing Color with Props:
- To allow customization of each box's background color, a prop called color is added.
```
function Box(props) {
    return <div className="box" style={{ backgroundColor: props.color }} />;
}
```
Using the Color Prop:
- The prop can be set when calling the component:
```
<Box color="red" />
<Box color="blue" />
```

Understanding Props.children

Children in Components:
- Any content between the opening and closing tags of a component is accessible via props.children.
```
function Box(props) {
    return <div className="box">{props.children}</div>;
}
```
Example of Using Children:
- To display text or other components as children:
```
<Box>Box One</Box>
```
Interacting with Children:
- The props.children can contain elements, text, or even other components.

Conclusion

React components allow for reusable code and can accept properties to customize their behavior. The concept of props.children enables flexibility in how components are structured and rendered, allowing for dynamic content.

Video Transcript

So let's do something more interesting. Let's make our own component. So you saw a component is basically always done this way. You make a function, give it a name, and then return something that's the template. So if I want to go outside that function and actually create, let's create a box component. It's just going to be a box of some color. So I can say box, function space box, like this. No parameters yet. And then I can return something. OK. And I'm going to just return a div with the class name box like so. And I can self-close it in the world of React. So the same thing as this, OK? You can either self-close it or just do it like that. Now if I want to use, this is a component. OK, it's just a function. And you give it any name you want. Typically, we name it using the first letter capitalized as by convention. And I just added a div and then with the class box. If you're on the React world, every time you pass an attribute to an element in HTML notation, you have to give class name and then the value. Now in the React world, we call this a component, right? That's the div components. And then the attribute is called a property, or prop, for short. OK. So you might hear that more in the React world. Now let's say I want to create, I have this box. OK, I'm going to define the CSS in styles.css. Now why is this going to work? Because up here, I have imports, space, and then quotes, dot slash styles, or CSS. Now I'm going to add some style for the class box. I just wanted to have, let's say, 80 pixels width, 80 pixels height, and then some background color green. And then I go back to app. And here, I'm going to add the box. So to use that component, simply say less than, name of the component, and then close it, self-close. Basically the same thing as HTML. OK, so we got this component here. So if you want to add more, just do the same thing. You can write box like so, and it will add another one. OK. You see another box. Like that. Try to close this. It would be easier to see. Let's do the following challenge. So let's change the background color of one of the components. Let's say I want the box on line 13. Let's say I want to control its color. Say I want color red. So that way, it's kind of have some customization. I can have a box that's color red, and this other one, it can be color blue, and so on. How would we accomplish that? Well, the first thing, you understand, how is this key value pair passed on to the component? So this is a component called box. So here's the definition. That's a function called box. Now here are the what we call HTML attributes. But in React mode, we call them properties. Right? There's a property name and then the value. Now, to access them within the box opponent, you have to add a parameter here called props. OK. And then if you want to change that, let's change it with the style attribute. Just to make it simple. I can add style here, and it can change background color to be. Now props is an object. So I can say props dot whatever name I passed here. In this case, color. Let me see if you can wrap the text here. It would be nice for you to see. There you go. That's easier. So what I just did, OK, when I say color equals red like that, I'm passing a prop called color that appears inside this object called props. So I'm passing an argument. It's like you're calling a function passing an argument. The argument is accessible via props. So you can see props dot color here. In this case, it would be red, right? So you can think of this as being red right here. Now that value is used in this object here. This is an object with background color there. That's passed to this attribute called style or prop called style. So the way you do it in React world is you have to pass an object inside here. And you can see the notation for the property and values is actually like this with the curly braces. That's why I didn't use it here because you can omit it. But actually it's like this. So you have the name and then equals and curly braces and whatever value it is. And you can see there's two curly braces here. So you have to be careful here. The one outside is for the syntax and the one inside is for the passing an object, a JavaScript object. So be careful of that. So if you have just the string as the value, you can actually omit the curly braces. That's why I didn't write it there. As you can see, the box is now red and the other is blue because the red is passed in to props dot color here and then background color of the style exchange. So if you right click this, inspect, you can see that the style attribute is actually the same as the value of the string. You can see that the style attribute is indeed set to background color red. This is the CSS, right? So whatever I wrote there is translated here in HTML. Somebody asked why two brackets that style props. I hope I answered your question, Andres, with what I explained before. Now let's talk about children. So if you remember HTML, we have elements with an opening tag and then some contents and then some closing tag. Notice the box itself closing. It doesn't have anything in between, right? But actually we could do that. Let's say the box had a closing tag and we type something inside, like box one. How would I access that from my component here? Like if I do it right now, nothing happens, right? But actually that's called props.children. This is called the children, okay? So when you go into the component itself, let's say I want to add the text between the opening and closing of the div. I can actually do that, okay? But first I have to tell you, okay, if I were to say hello like this, you're going to see hello there inside the box, right? But what if I want to say whatever I typed between the opening and closing here? So that's when I have to use the props.children. It's always called children, okay? It's a special prop name for the thing that you've typed between the opening and closing. Now if I write it like this, that's literally going to say props.children. Well, we actually want to replace that with whatever is passed in, right? So to do that, whenever you have JSX, something like that, you have to add the curly braces to kind of substitute the value of this variable here. So if you do the curly braces around it, now you're going to see box one here, okay? So that means whatever you passed between the opening and closing of the box element here appears in the props.children and then the value is replaced because you've got curly braces here. Now we typically use the curly braces within the JSX template thing here, okay? Not outside. It doesn't really make any sense outside here. That means like a block in JavaScript, but it's just for the situation, the context within the JSX. That means a substitution of the value of a variable. Think about a string interpolation if you want a term, programming term. Okay, let me see the questions. Can you insert a button like children? What do you mean, Andres? You can pass anything as children, okay? There could be an element, could be a string or whatever, whatever you pass will be available here. Okay, so let's say I want to add text to the second one, the same thing, make it an opening, closing, and then in between it can say box two, and then it appears here because it's props.children. Yeah, you can do that, Andres. You can actually make this a component. For example, like this. If you see the button there, you can add anything, okay? Let me read the code. Just simple text.