创建react-bootstrap的demo工程

最新推荐文章于 2020-10-25 15:56:15 发布

你胖起来真好看

最新推荐文章于 2020-10-25 15:56:15 发布

阅读量389

点赞数

分类专栏：移动开发

本文链接：https://blog.youkuaiyun.com/megglove/article/details/105165604

版权

移动开发专栏收录该内容

8 篇文章

订阅专栏

本教程介绍了如何创建一个基于react的demo工程，并集成bootstrap和react-bootstrap库。首先，通过create-react-app命令安装脚手架并创建工程，然后确保正确安装bootstrap@4.4.1和react-bootstrap@1.0.0。接着，在index.js引入bootstrap样式，并在App.js的MainPage组件中使用react-bootstrap组件。完成这些步骤后，可以在http://localhost:3000预览运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装react脚手架命令

npm install create-react-app -g

本例中的版本为create-react-app@3.4.1

2.通过react脚手架创建demo工程

create-react-app bootstrap-app-demo

3.测试demo工程可以运行成功

npm install
npm start

可以通过http://localhost:3000访问页面成功

4.安装bootstrap和react-bootstrap

安装

npm install bootstrap --save
npm install react-bootstrap --save

确认版本

npm ls bootstrap
npm ls react-bootstrap

本例对应的版本为：

bootstrap@4.4.1

react-bootstrap@1.0.0

5.在index.js中引用bootstrap样式文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import MainPage from './MainPage'
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.render(
  <React.StrictMode>
    {/* <App /> */}
    {<MainPage></MainPage>}
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

6.在App.js的子组件MainPage中使用react-bootstrap组件

import React from 'react'
import {Container,Row, Col,Button} from 'react-bootstrap'

class MainPage extends React.Component{
    render(){
        return(
            <div>
                hello MainPage
                <hr/>
                <Button variant="success">I'm btn001</Button>
                <Container>
                    <Row>
                        <Col md={{span:3, offset:3}}>offset3</Col>
                    </Row>
                    <Row>
                        <Col md={{span:3, offset:6}}>offset6</Col>
                    </Row>
                </Container>
            </div>
        )
    }
}

export default MainPage

7.查看demo项目的运行效果，happy hacking

bootstrap-demo