Build React Apps | Working With Components And Multiple Rendering 02

Video Tutorial

Overview

So after setting up the working environment and created a simple test demo using react in order to make sure that everything is working fine, now we are going to take a closer look upon React’s Components how they work and why they are very important for making functional user interfaces.

Also, we will Discuss the Best way for rendering Multiple Components at once and why this is very important for the layout of our App.

React Components

Components are objects (ES6 Class) where it extends from the base Components class, it needs a constructor that accepts the properties (Attributes) and a render method that returns an Html elements block the returned elements can only have one single root node and children of this node.

Also under the elements, you can use classes, ids names and inline events listeners.

You can also add custom methods on the class in order to use as either event listeners or class members..

class Header extends React.Component {
  //Initialize Component passing in the Properties (Attributes)
  constructor(props) {
    super(props);
  }
  //Gets Called before Just Right Upon Component Rendering 
  componentWillMount() {
    console.log("Will be Drawn!");
  }
  //Render Method 
  render() {
    return (

Our Header

This is a Small Text

); } }

If you have Noticed that we used the ComponentWillMount Method and this gets called upon the rendering Stage of the current component so it would be very efficient for doing some initialization or Adding event Listeners before the actual rendering process of the component into the DOM.

Now if you tried to open the HTML File in the browser you should get Everything gets rendered for us using React, and yeah this is how React components works and the main idea behind it.

Rendering Multiple Components

As you may have noticed when we try to render a component to the DOM using the ReactDOM Render method we can pass in one single component as the rendering target and Root Container but let’s say that we have a multiple Components that we need to render to the DOM, it actually pretty simple all you have to do is call the Secondary component under the component normally as an Html elements and react gonna do the rest of the job for us from here

class SecondComp extends React.Compoent {
   constructor(props) {
      super(props);
   }

   render() {

   }
}
//We can render both of them just by Wrapping one under the Other 
class MainApp extends React.Compoent {
   constructor(props) {
      super(props);
   }

   render() {
     return (

You can use HTML Elements

); } }

You can now Render as many as you like of components and that is why you need to layout your app properly (for ex: having a main App component, and the secondary components gonna be included on )

What’s next

In the next video tutorials, we will see how we can manage component’s state and use that for creating better apps. Also, we will use custom frameworks for getting components

No Comments Yet