Exploring React components and other features

Each page is built up using React components—for example, the Product Listing page of Amazon can broadly be divided into Header, Footer, Content, Product List, Filter and Sorting options, and Product Card components. You can create components in React in two ways: by using JavaScript classes or by using functions.

Let's create a sample header component in React with both a function and a class.

You can either write a plain old JavaScript function or ECMAScript 6 (ES6) arrow functions. We'll mostly use arrow functions. In the following code snippet, check out the Header component using a JavaScript arrow function:

export const Header = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
    <div>
  )
}

Let's create the same Header component using a JavaScript class, as follows:

...