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!