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:

• NodeJS or NPM
• React JS

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: