Tutorials

ReactJS Tutorial - Basics


ReactJS - Components


Components are independent ,reusable pieces of user interface and can be considered as each piece in isolation. Components are like javascript functions which takes input via props and returns react element which represent the part of user interface. We will discuss the props in next section.

We will discuss props in next section.

There are two types of components

  1. Function components or stateless components
  2. Class components or state full components

Function Components or Stateless components

As the name suggest they are functions which take input as properties and return a piece of user interface as react element. They do not manage state due to which these type of components are also called stateless components.

All the components we have shown in our pervious example were function components.

Lets define a function component which simply renders the value of a variable

Go to js repl https://jscomplete.com/repl and write a component called counter. Copy following into the left side

var Counter=(props)=>{
var countervalue=1;
return(
<div>
<input type="button" value="+1"/><br/>
Counter value : {countervalue}
</div>
);
}
ReactDOM.render(<Counter/>,mountNode);

I have just declared a variable called countervalue and initialized to 1 . later we will take it from props and rendered with a button.

Class Components or State full components

Class component is an ES 6 class which extends React.Component class. Class components are called state full because they can have state with them. We will discuss in detail about the state in later section

Lets see how a class component looks like.

class Helloworld extends React.Component
{
  constructor(props)
  {
  super(props);
  }
  render(){
     return(
     <div>
     Hello world!
     </div>
     );
  }
}
ReactDOM.render(<Helloworld/>,mountNode)

So to create a class component

  1. Extend your class from React.Component
  2. Create constructor with props and pass the props to super class to honor the inheritance
  3. Create render method and return whatever you want to create.

What to choose function component or class component

Okay function components are easier to write and faster in performance than that of class components but remember they cannot manage the state. We will discuss the state later but for now you can start with function component and if you think that function component is not appropriate for you then you can convert it to class component.

So lets see what are the steps to convert a function component to class component

Steps to convert function component to class component

Below are six steps to convert a function component to class component

  1. Create an ES 6 class with same name as function component and extends React.Component
  2. Create empty render method
  3. Move the body of function component in render method just created in previous step.
  4. Delete remaining function component
  5. Replace props with this.props in the render method
  6. Although it is completely optional but since you converted a function component to a class component then you might need state so you can create a constructor because we initialize state here.

TODO : convert function component counterĀ  to class component.

So we are now familiar with components lets see what are props in next section



Please Share this page
Views : 39
Like every other website we use cookies. By using our site you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Learn more Got it!