FREELessons: 11Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Defining DOM-Specific Props to our Components

Our components render as HTML, and so naturally we want to use HTML attributes to add ids, CSS classes, etc. In this lesson you'll learn how to do so.

2.2 Defining DOM-Specific Props to our Components

In the previous lesson, we started looking at React and we did so very simply. We're just pulling in two libraries, the React library and then a library for rendering our components. And in our case we're using React DOM, because we are working within the browser. And we use the built-in components given to us by the React library. We created a div component. That div component contains an h1 component, and a p component. And then we rendered that div component. And you also learned that whenever you render a component, you can only render one top level component at a time. Now that component can contain any number of child components which is exactly what we did. Our div component is a container for our other components. Now one thing I briefly touched upon was that the first argument that we pass to these methods are the properties or the attributes that would then be applied to these components and to the HTML elements that are ultimately rendered within the browser. So let's say that we want to add an ID for our div element. Well, we do so very easily by passing in an object as the first argument to the div method. And that object is going to contain properties that represent the property or attribute names for our component and/or element. And then of course the values are going to be the values for those attributes. So if we wanted to set an ID attribute, we would simply say id, and then we would give it a value. We could say that this is my_simple_content, and we can say this. We can hop on over to the browser and refresh. And whenever we look at that div element, we still have that data-reactroot but now we also have an id attribute that is set to my-simple-content. And so now you can begin to see how these things will work. Well, let's add some style here because that is definitely something that we would want to do within a real world application. So we can start by adding in some individual style. So we could say style, and the first thing that we would probably think of is to just use a string. So we could say that the color is going to be red. And then we can say that the background color is going to be blue. Now whenever we run this, we're going to see that that actually doesn't happen. In fact, nothing is rendered within the browser. And if we look at the console, we're going to see that, well, there's an error. And it says that the style prop, that is a term that we're going to be talking about very extensively, not so much in this lesson, but in later lessons. That the style prop expects a mapping from style properties to values, not a string. So when it comes to setting individual style properties, we have to use another object here. So we would say style, and then we would use the CSS property name for our property. So we would say color is going to be red, and then background color is going to be blue. But of course this is JavaScript, and we can't have dashes here, so we have to use the JavaScript version of background color, which is simply camelCased and then a string value for blue. So now we have an object where the properties are the CSS properties that we want to set, and of course they have their corresponding values. So whenever we go back to the browser and refresh the page, we see those changes take place. Now changing style in this way, would be frowned upon in normal HTML, because this is essentially setting the style attributes. We can go ahead and examine this element. We have the style attributes, color is red, background color is blue. But believe it or not, this is actually acceptable. However, in most cases we would want to use CSS classes. So let's do that instead. We're going to create a style element, and we're going to have a style rule. Let's give this a class of content, and we can say that the h1 elements inside of an element with a class of content is going to have a text decoration of underline. And then we can also say that content and then a p element is going to have a font-weight of bold, and we can also set the color to something, let's just say navy. So now we can get rid of this style property. I'm just going to comment that out so that that's there in the code, but we can come in and then say, class. Now if you are familiar with the reserved words in JavaScript, this is probably throwing up a red flag. And very good, because we cannot use class here, so instead we use ClassName. So when it comes to setting the attributes that you want to apply to a component, you essentially use the JavaScript name for those attributes. So in the case of class, we use class name. If this was a label component represented by a label element, there is the for attribute within HTML. Well, we would use HTML for in that case. So let's set the class name here. We have a class of content, so that is of course going to apply the contents class to our div element. We can see that the h1 element has a text declaration of underline and then the content itself is bolded. And it's kind of hard to tell but that color is indeed navy. I guess we should choose something that's a little bit more obvious. Let's go with red. So if we refresh the page, now we have red text. So setting the html attributes for your components is rather straightforward. You simply use the DOM terminology. So id for id, ClassName for class, HTML for for the for attribute. And when it comes to setting the style using the style attribute, you use an object. The properties of that object are the JavaScript versions of the CSS properties, and then of course, the values for them. Well, in the next lesson we are going to create our own custom components. Now we have kind of been doing that using the React library components. But in the next lesson we are going to write our custom components using JSX, which is the preferred way of not only creating components, but using components within your application.

Back to the top