React, A Functional and Classy JavaScript Library

React is described as "a JavaScipt library for building user interfaces." React is one of the most, if not the most, popular JavaScript library out there so I would highly recommend dipping your toes in pool. React makes use of components that are essentially customizable and reusable chucks of HTML elements that allow a user to quickly create user interfaces for the frontend of your application. By having these separate components we are able to break down code into reusable pieces that aide in readability. React breaks their components into separate categories: class, pure and functional.

Class

All your components of could be written in this fashion and nothing would break. However, be aware that class components go through checks. If you don't need any of these checks to be implemented using a functional component is preferred (we will discuss functional components more in a moment). Class component syntax can be made simply or more complex depending on your needs. They become more complex when you begin to make use of lifecycle methods.

A bare bones class component would look like:

import React from 'react'

class Test extends React.Component {
  render() {
    return(
      <div>
        Hello!
      </div>
    )
  }
}

export default Test;

Pure

A pure component in React does not have access to the lifecycle method shouldComponentUpdate. However, it performs a shallow comparison of old and new props. The syntax of a pure component is almost the exact same as a class component. The only difference? Instead of importing Component, we import PureComponent. Using Pure component is a good idea if your component does not require any fine tuned updating.

Take a look below to see the minor difference in syntax:

import React from 'react'

class Test extends React.PureComponent {
  render() {
    return(
      <div>
        Hello!
      </div>
    )
  }
}

export default Test;

Functional

A functional component is the least complex of the three we are looking at in this blog. A functional component will not "extend" Component nor will it make use of render. Instead, it returns JSX. Since a functional components does not 'extend' Component it will not inherit what is needed to store state, but it can receive props as an argument. Functional components rely less on logic and more so on displaying what you tell it to. Functional components are best used as lightweight components, but can be made complex if the situation calls for it.

import React from 'react'

const Test = props => {
  return(
    <div>
      Hello {props.name}!
    </div>
  )
}

export default Test;

Quick side bar
JSX (JavaScript XML) allows us to easily write and add HTML in React by converting the HTML tags into React elements.

BONUS

You may have heard the words "container" and/or "presentational" components being tossed around. These are good to know about! Presentational and container components are not different types of component; instead they are a way to look at and organize your React app.
Let’s take a deeper dive into how we can implement this thinking when creating our own React app.

Containers

Container components are the big guns. They deal with logic and state. A container component is where you want to perform certain functions such as updating state or handling a submit event.

Presentational

A presentational component is only concerned with displaying content onto the page. They are not weighed down by logic and don't give state the time of day(they don't want to deal with it).

You can think of Containers as a parent that holds all their baby Presentational components in their arms.

Thanks to React making us separate our code into components we end separating our concerns instantly making our code better. Understanding components and how they interact with each is crucial to understanding and enjoying the React library. I hope this information helps you on your React journey!