在React环境中集成React-Bootstrap框架

在React环境中集成React-Bootstrap框架

标签（空格分隔）： React

---

在进行本文之前，首先确保你已经正确安装了React开发环境，如果没有，建议先参考一下之前写的一篇文章:React环境搭建

在经过React环境搭建之后，会生成一些目录结构，然后，根据React-Bootstrap官方文档给出的步骤集成React-Bootstrap

• 安装React-Bootstrap框架

首先cd进入到创建的那个React项目，执行以下命令安装React-Bootstrap框架

npm install react-bootstrap --save

• 引入bootstrap框架

在public/index.html文件的header部分引入bootstrap框架

• 导入react-bootstrap框架中的组件

在src/App.js文件中导入Button组件

import { Button } from 'react-bootstrap';

• 将Button组件写入项目

Primary

添加完Button后的class部分代码如下

class App extends Component {
  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        

        Primary
      
    );
  }
}

注意

这里一定要将Button组件写在

标签内部，否则将会报错，因为React的导出组件的时候会导出一个完整的组件。

这时cd进入到项目，然后运行npm start命令运行React，如果你能看到以下界面，说明你的React-Botstrap框架已经安装成功

react-bootstrap.png