Components in React

React is a popular framework used to build web applications. It is a JavaScript library developed by Facebook and has been used to create many applications such as Instagram, Netflix, Airbnb, and many more!

One of the biggest advantages to using React is the ability to create components. Components are blocks of code in which can be separated and reused. Having separate blocks of code allows us to easily determine and fix bugs in our code. There are two types of components: Class and Functional.

A Class component requires "extends React.Component" and "render" in order for the component to return HTML, thus making it more complex than functional components. Also known as the stateful component because they can hold or manage a local state.

class Header extends React.Component {
 render() {
  return <h1>Header</h1>;
}

Component name should always begin with an uppercase letter

A Functional component is the preferred method as the code is cleaner. They are also known as the stateless component since they do not have their own state. Functional components are JavaScript functions that can receive data as parameters. For example:

Function Header() {
    return <h1>Title</h1>
} 

Components are an essential part of building a React application. They are separate pieces of code which are brought together under a parent component to create your masterpiece!