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:
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' }}>w3wiki</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:
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' }}>w3wiki</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:
Contact Us