bootstrap和react

bootstrap

bootstrap是一个基于sass的一个响应式的搭建网站的一个css组件库

引入

使用CDN或者是npm下载

npm

npm i bootstrap@5.2.1

cdn

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

在安装好了之后在项目中用script标签引入bootstrap

用法

bootstrap用法比较简单，在html项目的标签中使用相应的类名就可以了

详见bootstrap文档Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)​​​​​​​​​​​​​​​​​​​​​

react

React 是一个用于构建用户界面的 JavaScript 库

引入React和引入bootstrap的方式都一样，都是CDN或者是npm方式来引入react

使用

根结点

在创建一个react项目时，一般都是在html中创建一个标签，这个标签就是根结点，在根结点中，不需要添加子节点，子节点的创建和添加是在JS中实现的，在<script>标签中需要添加type="text/babel"，因为React中子结点的创建是基于JSX来创建的，所以需要添加type

具体的代码实现：

    <div id="root"></div>

  <script type="text/babel">
    // 用一个变量来接收创建的根结点root
    const root=ReactDOM.createRoot(document.querySelector('#root'))
    // 调用render渲染函数来将render里面的DOM结点渲染到根结点上
    root.render(<h1>hello im h1</h1>)

ReactDOM提供了一个创建根结点的方法createRoot，其中的参数为DOM对象，将根结点放入argv中，这样就创建好了一个根结点，在创建子结点的时候要调用根结点的render()函数，如果只有单标签时，render()中的JSX不需要添加括号，但是如果有多个标签，那么render则需要添加括号，注意在render中的标签只能有一个根结点。

条件和循环渲染

在render中支持JS代码，那么这样就可以进行条件渲染，条件渲染一般使用三元运算符

ReactDOM.createRoot(document.querySelector("#root")).render(
      <h1>
        条件渲染
        <div>{x === 1 ? "hello" : "not hello"}</div>
      </h1>
    );

循环渲染一般是用数组的map接口进行渲染

ReactDOM.createRoot(document.querySelector("#app")).render((
      <div>
        循环渲染
        <ul>
            {json.map(item => <li>姓名: {item.name},年龄: {item.age}</li>)}
        </ul>
      </div>
    ));

注意在循环渲染中需要添加key，也就是循环渲染的唯一索引。

组件

组件是react中最核心的功能，它可以提高代码的可读性，使代码复用量变大，创建组件一般可以使用函数声明和类声明

  // 类组件声明
  class com extends React.Component {
    constructor(props){
      super(props)
    }

    render(){

    }
  }
</script>

在类组件中使用this,setState={}来创建类组件的成员，在render()方法的return()语句中来渲染要创建的子结点，然后将此类组件放到根结点就可以进行渲染了