React001 use components
tags
React.js
type
Post
date
Nov 3, 2023
status
Published
环境搭建
1、安装 node 环境 (略)
2、安装vite
开发工具配置
1、vscode (略)
2、插件安装
- Prttier
格式化代码
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2Fa3b5ed7c-9171-471f-9c29-07df9402f852%2FUntitled.png?table=block&id=cbb817bb-f3fd-42a2-b673-07f786e421ab&cache=v2)
设置保存时候自动格式化
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2F7bf04b2e-c3de-4e66-8153-a544f00afcfe%2FUntitled.png?table=block&id=1565277e-4587-4ec6-b28f-882ddbea39da&cache=v2)
- ES7 插件,可以快速生成react代码片段
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2Ff8c89d26-8e8d-4866-88c4-f435adf118eb%2FUntitled.png?table=block&id=59576736-1036-43b9-8783-397ad7c0f78a&cache=v2)
3、浏览调试工具
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2Fd24a25d6-f529-4128-b98a-b39fee53819d%2FUntitled.png?table=block&id=95cb8575-a9cf-4ab2-a678-f637a3e784d5&cache=v2)
代码示例
1、创建项目
通过 vite 自动创建一个示例项目
选择 react 项目,语音选择typescript
2、使用bootstrap样式组件
在 https://getbootstrap.com/docs/5.3/components/list-group/ 下载bootstrap
在 main.tsx 页面中引用 bootstrap
3、组件调用
主应用
App.tsx
列表组件定义的了 组件数据属性,通过在App.tsx里把数据传过来在li标签上渲染,用了 typescript 属性。
ListGroup.tsx
4、实现效果
点击可以切换样式选中状态,输出当前选中的行里的item
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F2fc301d0-472d-48f0-85e3-f4327a85cd35%2Fdcf3d8bf-4fc9-4ff6-9f86-6f92e0818709%2FUntitled.png?table=block&id=654aa689-07d1-41a5-87e1-51784739d020&cache=v2)