Tag Archives: React bootstrap

React bootstrap loading and how to use modules

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!