Composing components

In React, all components can be isolated and complex UIs can be built by composing components which enables their re-usability.

Getting ready

In this recipe, you will work with re-usable components to generate a home page containing three sections: a header, a paragraph with a description, and a footer. These three sections will be written as three separate components that will be composed later to build a home page. Before you start, create a new package.json file with the following content:

{ 
  "scripts": { 
    "start": "parcel serve -p 1337 index.html" 
  }, 
  "devDependencies": { 
    "babel-plugin-transform-class-properties": "6.24.1", 
    "babel-preset-env": "1.6.1", 
    "babel-preset-react": "6.24.1", 
    "babel-core": "6.26.3", 
    "parcel-bundler": "1.8.1", 
    "react": "16.3.2", 
    "react-dom": "16.3.2" 
  } 
} 

Next, create a babel configuration file as .babelrc, adding the following content:

{ 
    "presets": ["env","react"], 
    "plugins": ["transform...