Custom components

 Create a folder structure as below(not mandatory to follow same).

src\components\layout

And create components in this folder.

Ex: src\components\layout\Navbar.js

Create a class based component using the ES7 React extension rce( for more shortcuts see the extension page.)

It generates export statement twice, before class and at end of line. So, we can remove the first one, it is not necessary.

import React, { Component } from 'react'

export default class Navbar extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

Can set the component as Navigation bar(styling in css) instead of normal div tag.
Add nav to Navbar.js

import React, { Component } from 'react'

export class Navbar extends Component {
    render() {
        return (
            <nav className="navbar bg-primary">
                <h1>Navbar</h1>
            </nav>
        )
    }
}

export default Navbar

We can set icon to the navigation bar by using the fontawesome online service.

grab icons link from below and paste in public\index.html

https://fontawesome.com/start

And add it to navbar

import React, { Component } from 'react'

export class Navbar extends Component {
    render() {
        return (
            <nav className="navbar bg-primary">
                <h1>
                    <i className='fab fa-github'/>
                    Navbar
                </h1>
            </nav>
        )
    }
}

export default Navbar

We can pass some data as attributes to the custom component and it collected them as properties.

index.js

import React,{Component} from 'react';
import Navbar from './components/layout/Navbar';
import './App.css';

class App extends COmponent {



  render(){



    return (
      <div className="App">
        <Navbar title="Github Finder" icon='fab fa-github'/>
      </div>
    );
  }
  
}

export default App;

navbar.js

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

we can set default values to properties, so will take if not passed.

//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

To restrict datatypes for component parameters.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
export class Navbar extends Component {
    static defaultProps = {
        title: 'Github Finder',
        icon: 'fab fa-github'
    };
       
    static propTypes={
        title: PropTypes.string.isRequired,
        icon: PropTypes.string.isRequired
    };
    render() {
        return (
            <nav className="navbar bg-primary">
                <h1>
                    <i className={this.props.icon}/>
        {this.props.title}
                </h1>
            </nav>);
    }
}
export default Navbar