Add Components

React provide two types Components :-

- Class Components
- Functional Components (Hooks)

Class Components

Suppose if you want to create a new class component then you just need to create a folder in src >> pages and then create a react file with .jsx extension and then paste code as per your needs.


import React, { Component } from 'react';

class Demo extends Component {
    render() {
        return (
            <div>
                //write Html code or structure
            </div>
        );
    }
}

export default Demo;

Functional Component : (Hooks)

Suppose if you want to create a new class component then you just need to create a folder in src >> pages and then create a react file with .jsx extension and then paste code as per your needs.


import React from 'react';
const Demo = () => {
  return (
      <div>
        //write Html code or structure
      </div>
    );
  };

export default Demo;

Components Customization

To customize any components please follow the below steps: suppose we are customizing the alert components

Step 1

Import alert from src/components/alerts/alerts.js


import Alert from '../../components/alerts/alerts';

Find the proptypes in src/components/alerts/alerts.js


Alert.propTypes = {
  type: PropTypes.oneOf(['success', 'info', 'warning', 'error']),
  message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  showIcon: PropTypes.bool,
  outlined: PropTypes.bool,
  closable: PropTypes.bool,
  closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  icon: PropTypes.node,
};

Step 2

Use the alert markup and pass the props as propTypes


<Alert
    showIcon
    icon={<FeatherIcon icon="layers" size={15} />}
    message=""
    description="Success Tips"
    type="success"
/>

Components Customization (Antd)

To customize any components of Antd please follow their guidlines here https://ant.design/components/overview/