Props

App.js

<Header text='Hello World' />

Header.js

function Header(props) {
  return (
    <header>
      <div className='container'>
        <h2>{props.text}</h2>
      </div>
    </header>
  );
}

Destructure

function Header({ text }) {
  return (
    <header>
      <div className='container'>
        <h2>{text}</h2>
      </div>
    </header>
  );
}

Props are basically properties that you can pass into a component from outside.

App.js

<Navbar title='GitHub Finder' icon='fab fa-github' />

Navbar.js

<i className={this.props.icon} /> {this.props.title}

Full code

import React, { Component } from 'react';

export class Navbar extends Component {
  render() {
    return (
      <nav className='navbar bg-primary'>
        <h1>
          <i className={this.props.icon} /> {this.props.title}
        </h1>
      </nav>
    );
  }
}

export default Navbar;

You can use defaultProps in Navbar.js

import React, { Component } from 'react';

export class Navbar extends Component {
  static defaultProps = {
    title: 'GitHub Finder',
    icon: 'fab fa-github',
  };
  render() {
    return (
      <nav className='navbar bg-primary'>
        <h1>
          <i className={this.props.icon} /> {this.props.title}
        </h1>
      </nav>
    );
  }
}

export default Navbar;

App.js

<Navbar />