How to Create List Styling in ReactJS ?
Last Updated :
26 Jul, 2024
React, a declarative, efficient, and flexible JavaScript library for building user interfaces, plays a crucial role as the 'V' in MVC. Specifically, ReactJS, an open-source, component-based front-end library maintained by Facebook, focuses on the view layer of applications. In this article, we will delve into the intricacies of list styling in React.
Prerequisites:
React Unordered-List:
The list items are marked with bullets/disc/circle etc
Syntax:
<ul>
<li> list of items </li>
</ul>
List Style Types:
- no-bullet: It is used to set a no-bullet list which is by default enabled.
- disc: It is used to set a filled circle for the list marker.
- circle: It is used to set a circle for the list marker.
- square: It is used to set a square for the list marker.
React Ordered-List:
The list items are marked with numbers/alphabets/roman
Syntax:
<ol>
<li> list of items </li>
</ol>
List Style Types:
- no-bullet: It is used to set a no-bullet list which is by default enabled.
- decimal: It is used to set a list with decimal numbers i.e 1,2,3
- lower-alpha: It is used to set a list with a,b,c,d, etc.
- lower-latin: It is used to set a list with a,b,c,d, etc.
- lower-roman: It is used to set a list with i, ii, iii, iv, etc.
- upper-alpha: It is used to set a list with A, B, C, D, etc.
- upper-latin: It is used to set a list with A, B, C, D, etc.
- upper-roman: It is used to set a list with I, II, III, IV, etc.
Steps to Create the React Application And Installing Module:
Step 1: Create a react application using the following command Â
npx create-react-app foldername
Step 2: Once it is done change your directory to the newly created application using the following command Â
cd foldername
Project Structure:
Project StructureThe updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}Example 1: In this example, we will make an ordered list of fruits in react using a few styles.Â
JavaScript
import React from 'react';
export default function App() {
return (
<div className="App">
<h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
<h3>Ordered-Lists in React</h3>
<div style={{ display: 'inline', float: 'left' }}>
<h5 style={{ color: 'red' }}>No Bullet</h5>
<ol style={{ listStyle: 'none' }}>
<li>Apple</li>
<li>Orange</li>
<li>Guava</li>
</ol>
<h5 style={{ color: 'red' }}>List-Decimal</h5>
<ol style={{ listStyleType: 'decimal' }}>
<li>Banana</li>
<li>Pineapple</li>
<li>Cherry</li>
</ol>
<h5 style={{ color: 'red' }}>List-Lower-Alpha</h5>
<ol style={{ listStyleType: 'lower-alpha' }}>
<li>Strawberry</li>
<li>Grapes</li>
<li>Melon</li>
</ol>
<h5 style={{ color: 'red' }}>List-Lower-Latin</h5>
<ol style={{ listStyleType: 'lower-latin' }}>
<li>Water-melon</li>
<li>Litchi</li>
<li>Kiwi</li>
</ol>
</div>
<div style={{ display: 'inline', marginRight: '50px' }}>
<h5 style={{ color: 'red' }}>List-Lower-Roman</h5>
<ol type="lower-roman" style={{ listStyleType: 'lower-roman' }}>
<li>Dragon-Fruit</li>
<li>Mango</li>
<li>Apricots</li>
</ol>
<h5 style={{ color: 'red' }}>List-Upper-Alpha</h5>
<ol style={{ listStyleType: 'upper-alpha' }}>
<li>Avocadoes</li>
<li>Lemon</li>
<li>Pear</li>
</ol>
<h5 style={{ color: 'red' }}>List-Upper-Latin</h5>
<ol style={{ listStyleType: 'upper-latin' }}>
<li>Mandarins</li>
<li>Dates</li>
<li>Raspberry</li>
</ol>
<h5 style={{ color: 'red' }}>List-Upper-Roman</h5>
<ol style={{ listStyleType: 'upper-roman' }}>
<li>Gooseberry</li>
<li>Bore</li>
<li>Peaches</li>
</ol>
</div>
</div>
);
}
Output:
ordered list exampleExample 2: In this example, we will make an un-ordered list of fruits in react using a few styles.
JavaScript
import React from 'react';
export default function App() {
return (
<div className="App">
<h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
<h3>UnOrdered-Lists in React</h3>
<div style={{ display: 'inline', float: 'left'}}>
<h5 style={{ color: 'red' }}>No Bullet</h5>
<ul style={{ listStyle: 'none' }}>
<li>Apple</li>
<li>Orange</li>
<li>Guava</li>
</ul>
<h5 style={{ color: 'red' }}>List-Disc</h5>
<ul style={{ listStyleType: 'disc' }}>
<li>Banana</li>
<li>Pineapple</li>
<li>Cherry</li>
</ul>
<h5 style={{ color: 'red' }}>List-Circle</h5>
<ul style={{ listStyleType: 'circle' }}>
<li>Strawberry</li>
<li>Grapes</li>
<li>Melon</li>
</ul>
<h5 style={{ color: 'red' }}>List-Square</h5>
<ul style={{ listStyleType: 'square' }}>
<li>Water-melon</li>
<li>Litchi</li>
<li>Kiwi</li>
</ul>
</div>
</div>
);
}
Output:
Similar Reads
How to use map() to Create Lists in ReactJS ?
The map function is generally used to render the list items dynamically in react. This function iterates over the array and each iteration returns the JSX for respective item. It helps to render and display the list efficiently. Prerequisites:React JSJavaScript Array.mapApproachTo create and render
2 min read
How to create Tabs in ReactJS ?
Tabs make it easy to explore and switch between different views. Material UI for React has this component available for us and it is very easy to integrate. We can use Tabs Component in ReactJS using the following approach.Prerequisites:NPM & Node.jsReact JSMaterial UIwe have these approaches to
4 min read
How to create a table in ReactJS ?
In ReactJS, tables are commonly used to display data in rows and columns. Tables can be static, where data is hardcoded, or dynamic, where data is passed from an array or fetched from an API. React makes it simple to create interactive and dynamic tables, with additional features such as sorting, pa
6 min read
How to create Image Slider in ReactJS ?
Image Slider is a dynamic web element that displays a collection of images and has a slider to switch between the Images. It is the most common feature to show image collection in web applications or mobile apps.Websites like Amazon.com, Flipkart.com, and many e-commerce sites use image sliders to s
4 min read
How to use List Component in ReactJS?
Lists are continuous, vertical indexes of text or images. Material UI for React has this component available for us, and it is very easy to integrate. We can use the List Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSteps to Create the React Application And In
2 min read
How to create Shopping Cart Button in ReactJS?
A shopping cart button is one of the most used component in e-commerce websites or applications which allows users to add items to their cart . In this tutorial, we will learn how to create a shopping cart button in ReactJS using Material-UI. PrerequisitesJavaScript and JSXReact JSSteps to create Re
3 min read
How To Create a Website in ReactJS?
ReactJS is one of the most popular JavaScript libraries for building user interfaces. It allows you to create dynamic, reusable UI components and efficiently manage state and events. In this article, we'll walk through the steps to create a basic website using ReactJS.PrerequisitesNPM & Node.jsR
5 min read
How to create Header in React JS ?
The Header is an important element of a website’s design. It's the first impression of the website. It provides useful links to other areas of the website that the user may want to visit. In this article, we will create a functioning Header using React JS and Material UI.Prerequisites:NPM & Node
2 min read
How to toggle between sibling in ReactJS?
How can We make the sibling box appear green when the button hovers? We can keep a state with a name index to keep the sequence number of a hovered button. When the user leaves the mouse from the button, the state will be null. And based on the value of the state, the box will have classes to make i
2 min read
How To Use Inline Styles in ReactJS?
Inline styles in React allow you to directly apply CSS styles to elements using the style attribute. This is often used for dynamic styling, where styles need to be applied based on the component's state or props. Inline styles in React are written as JavaScript objects. Each CSS property is camelCa
3 min read