Episode 2: React Components

  

Components represent the part of the user interface. Components are independent and reusable bits of code. They are as same as javascript functions, but work in isolation and returns HTML. Remember that Components must always start with Uppercase letters.

The above figure shows the components i.e Header, Sidebar, Main Content, and Footer. These components are reusable and can be used in any part of our code.

Components are of two types:

1. Stateless Functional Components 

2. Stateful Class Components

Before going into these components, let's  have a quick overview of stateless and stateful.

The main difference between stateless and stateful is one has state and the other does not i.e stateful has state and stateless doesn't. In other words, Stateful components are keeping the track of changing data while stateless components print out what is given to them via props.

Now let's talk about Stateless Functional Components 

Stateless Functional Components:

Stateless Functional Components are the JavaScript function that returns HTML. They are also called as presentational or dumb components. It can vary depending on what information it receives. Any information that is completely static and you know that it will never change, then it is termed as presentational or dumb components.

Following is a typical example that illustrates the Stateless Functional Components.

The above code represents the Stateless Functional components with the function name Home and returns HTML. Props i.e properties is passed and render via JSX using a pair of curly braces. Curly braces represent JSX(JavaScript XML).

Stateful Class Components:

Stateful Class components are the ES6 class that renders HTML. They are also called as the container or smart components. This component has to include extends  React.Components statement and this gives access to React.Components functions. It requires render () method that returns HTML.

Above is an example of Stateful Class Components with the class name Home,  it extends React Components and renders HTML. Like stateless functional components, it also uses a pair of curly braces to return JSX(JavaScript XML).

Now, we have some knowledge of Stateless Functional Components and Stateful Class Components. Now, let's have a look at the App.js component. App.js components has extension .js which is JavaScript. It is a Stateless Function Component that returns HTML.

We can have many components even hundreds or thousands of components. Facebook has more than 30 thousands of components. More complex the project more number of components. 

So, here we learn about the components and types of components. In the next episode, we will go deep into stateless functional components and stateful class components. Happy coding, See you in Episode 3 😃