Introducción a ReactJS Evergreen

Evergreen es el marco de React UI que se utiliza para crear páginas web increíbles. Evergreen se compone de múltiples componentes, que podemos importar fácilmente uno por uno según los requisitos de los usuarios. Evergreen es una herramienta de código abierto que podemos instalar fácilmente. Sirve un marco flexible y mucho de su diseño visual.

Creación de la aplicación React e instalación del módulo:

Paso 1: principalmente, debe crear una aplicación de reacción:

npx create-react-app appname

Paso 2: cambia el directorio a appname usando el siguiente comando.

cd appname

Paso 3: Evergreen se compone de múltiples componentes y herramientas, que puede importar uno por uno. Se puede instalar con NPM o Yarn usando el siguiente comando.

npm i evergreen-ui
// or
yarn add evergreen-ui

Una vez que Evergreen está instalado como una dependencia en su proyecto, puede importarlo como

import { Button } from 'evergreen-ui';

Estructura del proyecto: ahora, la estructura de la aplicación se verá así:

 

Ejemplo 1: este ejemplo describe cómo crear un componente de botón de opción.

import React, { useState } from 'react'
import { RadioGroup } from 'evergreen-ui'
  
export default function App() {
    const [ageGroup, setAgeGroup] = useState('0-10 years')
    const [options] = useState([
        { label: 'radio1', value: 'radio1' },
        { label: 'radio2', value: 'radio2' },
        { label: 'radio3', value: 'radio3' },
        { label: 'radio4', value: 'radio4' },
        { label: 'radio5', value: ' radio5' },
    ])
    return (
        <div style={{ paddingLeft: 30 }}>
            <h2>Radio Component</h2>
            <RadioGroup
                value={ageGroup}
                options={options}
                onChange={e => setAgeGroup(e.target.value)}
            />
        </div>
    );
}

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción:

 

Ejemplo 2: Este ejemplo describe cómo crear un componente de área de texto.

import React, { useState } from 'react'
import { Textarea } from 'evergreen-ui'
  
export default function App() {
  
    return (
        <div style={{ padding: "50px" }}>
            <h2>Enter Your text here</h2>
            <Textarea name="textarea-1" 
                placeholder="Textarea placeholder..." />
        </div>
    );
}

Producción: