React – Bootstrap website: http://react-bootstrap.github.io/
The style of react-bootstrap is basically the same as bootstrap, only the methods of how to load and how to use its modules are described here.
1. Open the command prompt and install react-bootstrap under wrokspace on react:
npm install react-bootstrap --save
Ii. React – Bootstrap method for Page loading:
import ReactBootstrap , {Panel,Button,SplitButton,MenuItem,handleSelect} from 'react-bootstrap';
Description: {the Panel, Button, SplitButton, MenuItem, handleSelect}
the Panel in curly braces, Button, SplitButton, MenuItem, handleSelect is ReactBootstrap group, with which the load which, need not all loading, can reduce the volume.
For example, the Panel component in ReactBootstrap is used for the component Pan
The code of Panel component officially provided is: Title is Panel title; PanelsInstance is Panel Content;
const title = ( <h3>Panel title</h3> ); const panelsInstance = ( <div> <Panel header={title}> Panel content </Panel> </div> );
//Pan components
import React,{Component} from 'react'; import {render} from 'react-dom'; import ReactBootstrap , {Panel} from 'react-bootstrap'; export default class Pan extends Component{ //initialize state constructor(props){ super(props); this.state = { title: this.props.title } } render(){ //import official module const title = ( <h3>Panel title</h3> ); const panelsInstance = ( <div> <Panel header={title}> //set title as variable Panel content </Panel> </div> ); //return return ( <div> {panelsInstance} </div> ) }
Reprint please indicate the source!
Read More:
- How to use dangerously set inner HTML in react
- An error is reported when using react app rewired to start the react project
- webstorm npm install –save –save-exact –loglevel error react react-dom react-scripts has failed.
- react Error: Unable to resolve module mobx-react
- Failed to load plugin react: cannot find module ‘eslint plugin react’ appears when running Vue project‘
- [W xx:xx:xx.xxx NotebookApp] 404 GET/static/components/react/react-dom.production.min.js (::1)
- Click the button to use in the react project window.open Methods open a new page and click the data again
- [Solved] VUE-pdf Plugin use error: To install them, you can run: npm install –save core-js/modules/es
- react Error: Objects are not valid as a React child (found: object with keys {username, password})
- React Error: Minified React error #119
- Uncaught Error: Bootstrap‘s JavaScript requires jQuery
- Tomcat9 Error: Could not find or load main class org.apache.catalina.startup.Bootstrap
- [Solved] This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/@babel
- Uncaught Error: Script error for ” popper.js “, needed by: bootstrap solution
- Higher order components in react
- [Solved] gitbook: node_modules\npm\node_modules\graceful-fs\polyfills.js:287
- Asynchronous loading JS does not allow the use of document write solution
- Error: [1] bootstrap checks failed…
- How to solve the problem of “blocked loading mixed active content” in Firefox