Exploring React components and other features

Each page in an app 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 functions.

Let’s create an example header component in React with both a function and a class.

You can either write a plain old JavaScript function or an ECMAScript 6 (ES6) arrow function. Components created using either arrow functions or plain JavaScript functions are called React functional components. We’ll mostly use functional components in our code. In the following code snippet, check out the Header component using a JavaScript arrow function:

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