引导程序在React中行为不正确

我有一个React项目,我使用 create-react-app 。在项目中,我想使用引导。 生成项目后,有一个名为public/index的文件。html。我已经在那里放置了引导CDN。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我有一个组件叫做 ProductListComponent 。在渲染部分,我使用了面板。它正在创建面板,但其行为不符合引导标准。

import React,{ Component } from 'react';

class ProductListComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div className="row">
                <div className="col-lg-10 col-md-10">
                    <div className="panel panel-primary">
                        <div className="panel-header">
                            <h3>Products</h3>
                        </div>
                        <div className="panel-body">

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ProductListComponent;

输出 谁能告诉我,我做错了什么?