React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
In this article, we will learn about List Styling in React.
A list is a record of short pieces of related information or used to display the data or any information in web pages in the ordered or unordered form. For instance, to purchase the items, we need to prepare a list that can either be ordered or unordered list which helps us to organize the data & easy to find the item.
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.
Creating React Application: To learn more about the list, let’s build a react application
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: It will look like the following.
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' }}>neveropen</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:
