Composing Components

  1. Composable and Regular Components
  2. Defining a Component using ES6/ES2015
  3. Sidenote: createClass()
  4. Refactoring Hello World
  5. HTML for Hello World
  6. Inspecting with React DevTools

Okay, congratulations. You made it to module four [module two (2)]. We're almost halfway through. I promise you, this will be fun. We will see how to build composable components. By the way, composable components is a core, core concept. They allow you to build large, complex applications.

Think about Facebook. It has a lot of graphical user interface components. So, so far, we've used just the regular HTML elements. We used h1. You saw how to create div, how to create a paragraph, et cetera. But there is a whole new category. They're called custom or composable components. So basically, it's like creating your own custom h1 type or p type. So, this way, by building those custom components, you brick by brick will create your complex user interface. The key difference for React is that you user lowercase for the standard HTML and then you would user uppercase for your custom component.

So let's take a look at this example. We use class and extends. These are ES6 features. It's not exclusive to React. So, what we're doing, first of all, we're importing a library, React = require, assuming you're gonna use Webpack, which we installed and configured in module one. Go ahead and watch it again if you need some help. So now, class HelloWorld. HelloWorld will be out component, our custom component. Extends React.Component. So we need to pull that React at the base. It's gonna be a parent class, a parent component, and then we, by extending it, we can create our custom component, HelloWorld. And the custom, the custom thing will be the render.

So the render, that's what this custom is about, those components. So the render is mandatory. It's an absolute last-resort necessary method. We must define it. So, class and extends, it will work in any modern browser, as far as 2017, the year of this recording. So just don't use old browser. But if you have to use an old browser, use one of those presets for Babel, and it will convert it to some other code. If you don't want to use the new syntax, you can also use the ES5 native syntax.

There is a method, it's called createClass, and the way it works, you just invoke it, and you pass an object. So that object will have the render method, and everything inside of the render's similar. So the difference is that you would use a function factory, createClass, instead of creating a class with ES6 syntax. So that's the difference. The difference is in the syntax, and also there are other differences. We're not going to cover this old approach. We're just going to focus on the new style, because that's how most of the code is written now, for React especially.

Okay. So, let's go ahead and refactor our HelloWorld to use a component. Okay, so the code will be in HelloWorld component, and in the .jsx folder of that folder of that project, you will find HelloWorld. So basically, you would abstract the component code and create it in a separate file. This is the best practice. That's why I'm showing it to you on this small HelloWorld example. So you would have many, many, many small components. Some of them would have some logic. Others would not have logic at all. They would not have much of the smartness in them, so to say, so they would be just about the style, about the classes, about the hierarchy, about the presentation. I'll talk about it later.

For now, HelloWorld is coming from a different file. And the way you require files, in Node.js, you would use require('./hello-world.jsx'). So this is a front-end code, but we're using Node.js syntax because we set it up with Webpack, and Webpack, by default, right out of the box, it allows you to use require, which I think is beautiful, because it's Node.js syntax, and you can switch seamlessly between Node and the browser code. So this is browser code, but we use require, which is common.js syntax, and Babel and Webpack will take care of JSX and importing those modules.

So, in the last two statements, we just render and mount that HelloWorld. So let's look at the index.html. So, it's pretty much the same. All we're doing, we're importing the same bundle.js, and assuming you have the component itself, and assuming you build it, again, I recommend you use Node Static or a similar server. You can also get the React DevTools. So you can just Google React DevTools and follow the instructions. It's a Chrome extension. You would see this tab. I'm showing it to you. It's under a line with a blue line, and it will show you that it's actually a component. HelloWorld is a separate component.