如何在 ReactJS 中创建列表样式？
React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。
在本文中，我们将学习 React 中的列表样式。
列表是相关信息的简短记录，或用于以有序或无序的形式显示网页中的数据或任何信息。例如，要购买商品，我们需要准备一个可以有序或无序列表的列表，这有助于我们组织数据并轻松找到商品。
反应无序列表
列表项标有子弹/圆盘/圆圈等
句法：
- list of items
列出样式类型
- no-bullet：用于设置默认启用的无项目符号列表。
- disc：用于为列表标记设置一个实心圆。
- circle：用于设置列表标记的圆。
- square：用于设置列表标记的正方形。
反应有序列表
列表项标有数字/字母/罗马
句法：
- list of items
列出样式类型
- no-bullet：用于设置默认启用的无项目符号列表。
- 十进制：用于设置带有十进制数字的列表，即1,2,3
- lower-alpha：用于设置包含 a、b、c、d 等的列表。
- lower-latin：用于设置 a、b、c、d 等列表。
- lower-roman：用于设置i、ii、iii、iv等列表。
- upper-alpha：用于设置A、B、C、D等列表。
- upper-latin：用于设置A、B、C、D等列表。
- upper-roman：用于设置一个列表，有 I、II、III、IV 等。
创建 React 应用程序：要了解有关列表的更多信息，让我们构建一个 React 应用程序
第 1 步：使用以下命令创建一个反应应用程序
npx create-react-app foldername第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序
cd foldername项目结构：它将如下所示。
示例 1：在此示例中，我们将使用几种样式在 react 中创建一个有序的水果列表。
Javascript
import React from 'react';
export default function App() {
return (
GeeksforGeeks
Ordered-Lists in React
No Bullet
- Apple
- Orange
- Guava
List-Decimal
- Banana
- Pineapple
- Cherry
List-Lower-Alpha
- Strawberry
- Grapes
- Melon
List-Lower-Latin
- Water-melon
- Litchi
- Kiwi
List-Lower-Roman
- Dragon-Fruit
- Mango
- Apricots
List-Upper-Alpha
- Avacadoes
- Lemon
- Pear
List-Upper-Latin
- Mandarins
- Dates
- Rasberry
List-Upper-Roman
- Gooseberry
- Bore
- Peaches
);
}App.js
import React from 'react';
export default function App() {
return (
GeeksforGeeks
UnOrdered-Lists in React
No Bullet
- Apple
- Orange
- Guava
List-Disc
- Banana
- Pineapple
- Cherry
List-Circle
- Strawberry
- Grapes
- Melon
List-Square
- Water-melon
- Litchi
- Kiwi
);
}输出：
示例 2：在此示例中，我们将在 react 中创建一个无序列表的水果。
应用程序.js
import React from 'react';
export default function App() {
return (
GeeksforGeeks
UnOrdered-Lists in React
No Bullet
- Apple
- Orange
- Guava
List-Disc
- Banana
- Pineapple
- Cherry
List-Circle
- Strawberry
- Grapes
- Melon
List-Square
- Water-melon
- Litchi
- Kiwi
);
}
输出：
