react项目踩坑

react项目创建

• 安装高版本node
  • 版本过低无法启动项目
• npm install create-react-app
• create-react-app 项目名称
• cd 项目名称
• npm start ——运行

react-bootstrap踩坑

1、介绍
react-bootstrap是react的ui框架

2、下载

• npm install react-bootstrap bootstrap@5.1.3

3、引入组件

• 单个组件引入
  • import Carousel from ‘react-bootstrap/Carousel’;
  • import ‘bootstrap/dist/css/bootstrap.min.css’;
• 引入多个组件
  • import { Navbar, Jumbotron, Button } from ‘react-bootstrap’;

4、使用

• 组件导入后其他代码直接复制即可

react踩坑

• useState

  “useState” is undefined 问题

  import {useState} from ‘react’;

• img路径

  • 图片存放路径

    • 图片放在src中
    • 放在public中则在img中无法引入

  • 引入方法

    • 方法一