React.js - Components

Introduction

React.js is about building a UI. Every object or function in a React.js application contributes to the UI. In this article, I will explain the types of components used in React.js and possible use cases for each type.

Component Scope

As long as React is within scope a JavaScript Function or ES6 JavaScript Class can be made into a React Component.

import React from 'react';

Components Types

Functional

Functional components are functions that accept props as arguments and return valid JSX. Functional components are usually the preferred choice when building components with react because they require less overhead.

import React from 'react';

function Todo(props){

    return (
      <div className="Todo">
        <h1>New Task: {props.task}</h1>
      </div>
    );
}

export default Todo;

Use Case - When you need a generic starting template for building a component.

Component (React Class)

Class components in React.js inherit the Component constructor. They can initialize state, implement the render method and use lifecycle hooks.

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentWillMount() {}

  componentDidMount() {}

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

Use Case - If the component will render to the DOM and requires full capability of react.

Pure (React Class)

The difference between the Pure and Component class is the render method. A Pure component will not update the state if the values have not changed.

   import React, { PureComponent } from 'react';

    class Result extends PureComponent {
      render() {
        return <li>{this.props.result}</li>;
      }
    }

    export default Result;

Use Case - If you need to avoid consistent renders of the component.

Stateful - (Containers, Smart)

Stateful components are components that manage the state of the component. The component may manage state by means of the this.state object or the useState hook. Stateful components are often referred to as Container or Smart components because the state is often connected to a live data source.

import React, { Component } from 'react';
import './Todo.css';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
     text: 'Do Something',
     completed: false
    }
  }

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

Another Example

import React from 'react';
import { useState } from 'react'


function Todo(props){

  const [todo, setTodo] = useState({
    text: 'Do something',
    completed: false
    })
    return (
      <div className="Todo">
        <h1>New Task: {todo.text}</h1>
      </div>
    );
}

export default Todo;

Use Case - When you need to manage or update the state of a component.

Stateless - (Presentational, Dumb)

Stateless components do not manage the state of a component. They are often referred to as Presentational or Dumb components because its only job is to provide a piece of the UI.

import React from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

export default Todo

Another Example

import React from 'react'
import Todo from './Todo'

const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)
export default TodoList

Use Case - If the component will be reused in different parts of the application and act as only as a view.

Higher Order(HOC)

A higher order component is a function or component per se that takes a component as props and returns a new component. Its different from other components because it doesn't render any view to the DOM.

import React from 'react';

const withClass = props => (
  <div className={props.classes}>{props.children}</div>
);

export default withClass;

Use Case - You want to add some additional features or styling to a component.

Conclusion

These are the different types of components within React.js. The two most commonly used components used within development are Class and Functional. As always take care, and I hope this article helps you on the path to learning React.js