¿Cómo crear un estilo de lista en ReactJS?

React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

En este artículo, aprenderemos sobre el estilo de lista en React.

Una lista es un registro de piezas breves de información relacionada o que se utiliza para mostrar los datos o cualquier información en las páginas web en forma ordenada o desordenada. Por ejemplo, para comprar los artículos, debemos preparar una lista que se pueda ordenar o desordenar, lo que nos ayuda a organizar los datos y facilitar la búsqueda del artículo.

Reaccionar lista desordenada

Los elementos de la lista están marcados con viñetas/disco/círculo, etc.

Sintaxis:

<ul>
    <li> list of items </li>
</ul>

Tipos de estilo de lista

• sin viñetas: se utiliza para establecer una lista sin viñetas que está habilitada de forma predeterminada.
• disco: Se utiliza para establecer un círculo relleno para el marcador de lista.
• círculo: Se utiliza para establecer un círculo para el marcador de lista.
• cuadrado: se utiliza para establecer un cuadrado para el marcador de lista.

Reaccionar lista ordenada

Los elementos de la lista están marcados con números/alfabetos/romanos

Sintaxis:

<ol>
    <li> list of items </li>
</ol>

Tipos de estilo de lista

• sin viñetas: se utiliza para establecer una lista sin viñetas que está habilitada de forma predeterminada.
• decimal: se utiliza para establecer una lista con números decimales, es decir, 1,2,3
• lower-alpha: Se utiliza para establecer una lista con a,b,c,d, etc.
• lower-latin: Se utiliza para establecer una lista con a,b,c,d, etc.
• low-roman: Se utiliza para establecer una lista con i, ii, iii, iv, etc.
• upper-alpha: Se utiliza para establecer una lista con A, B, C, D, etc.
• latín superior: Se utiliza para establecer una lista con A, B, C, D, etc.
• romano superior: Se utiliza para establecer una lista con I, II, III, IV, etc.

Creación de una aplicación React: para obtener más información sobre la lista, construyamos una aplicación React

Paso 1: Cree una aplicación de reacción usando el siguiente comando  

npx create-react-app foldername

Paso 2: una vez que haya terminado, cambie su directorio a la aplicación recién creada usando el siguiente comando  

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

 

Ejemplo 1: en este ejemplo, haremos una lista ordenada de frutas en reaccionar usando algunos estilos. 

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>
  );
}

Producción: