How to Create List Styling in ReactJS ?
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 Structure
The 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 example
Example 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:
Last Updated :
04 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...