In order to use the <header-image> component inside the MainBody React component, we will be adding a few things to the MainBody component:

import React, { Component } from 'react';
import HeaderImage from '../web-components/header-image/header-image.js';

export default class MainBody extends Component {

  constructor() {
    super();
    this.state = {
      src: 'https://www.freewebheaders.com/wordpress/wp-content/gallery/clouds-sky/clouds-sky-header-2069-1024x300.jpg',
      altText: 'Blue Clouds'
    }
  }

  componentDidMount() {
    customElements.define('header-image', HeaderImage);
  }

  render() {
    return (
      <div>
        <p>This is the main body</p>
        <header-image alttext={this.state.altText}
          src={this.state.src}>
        </header-image>
      </div>
    );
  }
}

Here, we are importing our <header-image> web component from its respective location and then registering the custom element in the life cycle callback componentDidMount() method. Then, we are trying to send in alt and src via state variables to the <header-image> component.

The steps are the same for all the React components that are trying to use any Vanilla Web Component. Now that we have an understanding of how a web component can be used in a React project, let's take a look at how it would look inside an Angular app.