ReactJS Evergreen Introduction

Evergreen is the React UI framework that is used to create amazing web pages. Evergreen is made up of multiple components, which we can easily import one by one according to users’ requirements. Evergreen is an open-source tool that we can easily install. It serves a flexible framework and a lot of its visual design.

Creating React Application And Installing Module:

Step 1: Primarily, You have to create react app:

npx create-react-app appname

Step 2: change the directory to appname using the following command.

cd appname

Step 3: Evergreen is made up of multiple components and tools, which you can import one by one. It can be installed with NPM or Yarn using the following command.

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

Once Evergreen is installed as a dependency in your project, you can import it as

import { Button } from 'evergreen-ui';

Project Structure: Now, the app structure will look like this:

Example 1: This example describes how to create radio button component.

App.js

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

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Example 2: This example describes how to create textarea component.

App.js

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

Output: