Previous Lecture Complete and continue  

  HTML Attributes

  1. Inspecting Hello World HTML
  2. HTML Arguments/Attributes
  3. for and class Attribute

So, let's inspect what has just happened. You saw that hello world, not very impressive but if you open your DevTools or Firebug, in the browser you would see that that h1 has data-reactroot, so I'm using version 15, if you're an older version like version 0.13, then you would see a different attribute but I assume you use version 15 which I used in my include to the CDN, so this will tell you that this element hasn't been there initially, it has been added by React. So, if you go to Instagram, if you go to Facebook, you can find reactroot. So, this is an attribute which you can also use in your stylesheet when you want to style those elements, created basically and mounted. So, every time you mount something with ReactDOM, that root element will have this attribute. So, just remember, write it down somewhere, data-reactroot is automatically given to you.

So, let's talk about that null, so we use the null as the second argument. Well, actually what it's doing it's passing the attributes, so those HTML attributes which are valid, which are standard, like style for example, or a class name or htmlFor, so they would be rendered. If you passing some weird attribute which is not standard, it's not gonna be rendered and the reason why for and class they look different than in the HTML, well, because in JavaScript class means completely different, we cannot use it as a property name and similarly for it's used for a loop. We cannot use it so that's why the names are different. Most of the other properties they're camelCased, so if you see a dash there, just use a camelCase because it's an object, it's a JavaScript object. So, now let's go and see hello world without JSX in action. Let me demo it to you.

0 comments