CODEWITHSUNDEEP
reactjs
techie11
techie11

Reputation: 1387

Connection between Bootstrap componments reactstrap and react.Component

I'm new to Rect. I'd like to ask perhaps a most basic question since I can't find the relavent documentation or a answer on Google. Following is the first 3 lines of typical react code:

import React, { Component } from "react";
import {                                            
  Button,
  Modal,
} from "reactstrap";    
export default class CustomModal extends Component {
...
}

What is the connection between Bootstrap componments imported on the second line from reactstrap and the Component class in react(that is, react.Component)? Why a CustomModal subclass from react.Component instead of reactstrap.Modal? is react.Component a sort of abstract class and reactstrap.Modal concret class extending react.Component?

Upvotes: 0

Views: 48

Answers (1)

squillman
squillman

Reputation: 13641

Basically, yes. You extend React.Component to create your own custom class-based React components. The others that you are importing are from libraries where the library author has already created the components. Note that you can also create custom function-based React components where you don't extend React.Component. I would recommend reading through the React.Component documentation.

To your question about how it relates to CustomModal, you would use Modal as a component within CustomModal. For example:

import React, { Component } from "react";
import {                                            
  Button,
  Modal,
} from "reactstrap";    
export default class CustomModal extends Component {
    ...
    render() {
        return <Modal />;
    }
}

Note that this example is just to give you the idea of how to use an imported component in your own custom component. It is not necessarily how to use reactstrap.Modal itself.

Upvotes: 2

Related Questions