前端学习笔记——Bootstrap于react

一、bootstrap简介与安装

简介

官网：https://getbootstrap.com/

bootstrap 的 github 地址：https://github.com/twbs/bootstrap

bootstrap 是一个用于制作页面界面的框架

框架: 提供一个标准和规范，再由开发人员自行填充内容

安装

点击页面中的 download 按钮：https://getbootstrap.com/docs/5.0/getting-started/download/

或者在 github 中下载 bootstrap 源代码，源代码中的 dist 文件夹就是我们要用的文件

npm 安装

npm i bootstrap

二、布局

响应式布局

响应式布局就是根据屏幕宽度，切换不同页面布局的一种布局方式，这里可以查看 bootstrap 官网在不同屏幕宽度下的表现

bootstrap 是使用断点来完成响应式布局的

断点

断点是 bootstrap 面向不同屏幕宽度，预制好的媒体查询

通常的讲，断点，代表的就是不同的屏幕宽度

bootstrap 中如何体现断点，在class中，添加不同断点的名称，可以采用不同断点的样式

布局容器

通常是页面的根节点，使用 class="container" 来设置布局容器

布局容器受断点影响，可以设置不同断点上的容器，具体可查表：

https://getbootstrap.com/docs/5.0/layout/containers/

网格布局

将内容进行行列分布的布局方式就叫网格布局

bootstrap中网格布局的灵魂样式就是 行：row，列：col

三、其他组件和工具类

除了布局和表单元素等基础功能外，bootstrap 还提供了一系列的开箱即用的功能

例如组件（Component）和工具类（Utilities 和 Helper），这些东西需要开发者在需要时，按需引入

https://getbootstrap.com/docs/5.1/components/accordion/

其中，部分组件包含动画，若要使用带动画的组件，请引入 bootstrap.js 文件，并参考文档中的 via JavaScript 部分进行函数调用

四、react 简介

中文官网：https://zh-hans.reactjs.org/

react 是一个 js核心库，如同 jquery 一样，具有大量 react 生态(围绕 react 核心开发的库)

特点：

• 声明式
  • 也就是js中的数据决定页面最终渲染的结果
  • 声明式不是响应式，但往往都是同时出现共同作用页面
    • 响应式：数据变化页面会立即更新
• 组件化
  • 一个包含所有外观和行为的，独立可运行的模块，称为组件
  • 组件化的思想可以将复杂页面，化繁为简的进行设计
  • 组件可提高代码复用性
• 一次学习，跨平台编写
  • 使用 react 可以开发 桌面web页面，移动端页面，移动app，桌面app等

五、环境搭建

使用cdn在html引入react

react可以在现用的html页面中直接使用，通过cdn引入以下几个库：

<!-- react 需要引入 react 核心库 和 react-dom 库 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- 为了更方便书写 react 通常会使用 jsx 语法，为了支持该语法 需要引入 babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

然后可以在 body 中加入如下代码：

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

    <!-- 采用 jsx 语法 需要在 type 处加上 text/babel -->
    <script type="text/babel">

        ReactDOM.render(
            <h1>Hello World</h1>,
            document.getElementById('root')
        );

    </script>
</body>

这里需要介绍几个概念：

• react.js 这是框架核心库，用于解析 react 语法
• react-dom.js 这个库是用于 react 元素(也就是react的文档对象模型)的创建
• babel.js 这个库用来将 jsx 语法翻译为普通的 js

注意：此处为了学习 react 的语法引入了 jsx，在真实项目中不会在页面上直接使用 babel

使用create-react-app创建react应用

这种方法需要安装 node.js

首先安装 create-react-app 命令行工具

官网：https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#create-react-app

github: https://github.com/facebook/create-react-app

create-react-app文档：https://create-react-app.dev/

执行以下命令安装 create-react-app 工具

npm install -g create-react-app

然后在任一目录下执行以下命令创建react应用：

npm init react-app <project-name>
# 或
create-react-app <project-name>
# 其中 <project-name> 是应用的名称

进入到项目目录下并运行 npm run start 启动项目

创建一个使用typescript书写的react项目

https://create-react-app.dev/docs/adding-typescript

六、jsx 语法

jsx 语法保留了js的所有特性，在此基础上扩展了 react 的元素声明语法，例如：

// 声明一个 react-dom
const element = <h1>Hello World</h1>

若 react-dom 标签有多行，可以用圆括号包裹

const element = (
    <h1>
        Hello World
    </h1>
)

每一给 react-dom 只能有一个根节点

const element = (
    <h1>
        Hello World
    </h1>
    // h1 和 h2 都是根节点 这个写法是错误的
    <h2>
        222
    </h2>
)

插值

将变量插入到元素中，使用大括号 {}

const msg = 'hello world !!!'

const element = <h1>{msg}</h1>

花括号内的插值部分可以写入任何有效的 js 表达式

插入html属性

直接使用引号或花括号插入表达式，如：

const styleObj = {backgroundColor: "green"}

// 需要注意的是 style 属性必须用花括号来插入值
// 不是所有的html属性名都是原始名称，例如 class 应该写为 className 并采用驼峰式命名方法 而不是html的短横线 因为本质上这里的标签是js代码
const element = (
    <h1
        style={styleObj}
        className="content"> 
        Hello World
    </h1>
)

使用函数创建对象

// 可以使用函数创建 react-dom 对象
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 等价于
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

注意：jsx 中的 react-dom 内容，本质上会被 babel 翻译成 React.createElement 函数