在React项目中导入Bootstrap

一、新建一个React项目

使用命令窗口：win+r打开命令窗口，输入cmd，然后回车。

create-react-app [项目名]                                        //创建React项目

cd [项目名]                                                               //进入项目文件夹

 项目目录如下（自动生成的）：

二、本地启动项目

npm run start                                                            //启动本地server用于开发 

弹出React页面：

三、下载Bootstrap依赖 

npm install bootstrap@3 --save                                                //安装Bootstrap依赖

四、在项目中导入引用文件

在入口文件里（src下的index.js）导入Bootstrap依赖和css样式表

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/js/bootstrap';

 

引入Jquery的在线依赖（public下的index.html）

<script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

 五：报错

出现报错信息：

Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in 'D:\练习\react-login\src

 错误原因：

在react项目中找不到下载的Bootstrap依赖。

解决办法：

在创建的react项目中重新下载Bootstrap依赖即可。