What is react zest?

React zest is a multi-purpose premium admin dashboard which can be constructed on the basis of powerful React Framework, Bootstrap4, Reactstrap, and create-react-app. So it gives a unique and elegant look to admin panels. React zest is developer-friendly and easily coded and customized. It has a variety of different themes with tons of pages. 

It is highly responsive and can adapt to any size of the viewport. So we can find a number of reusable UI components and the latest trending plugins. We can create different types of project applications with this theme. So it is the best source for various niche used applications like Music, CRM, Freelancing, Blogging, ECommerce, etc. 

 

A basic example of React zest:

 

import React from ‘react’;

import Zest from ‘react-zest’;

 

const SomeComponent = props => {

  return (

    <Zest

      animationName=”wiggle”

      animationTrigger=”hover”

      animationDuration={700}

    >

      <button>Click here!</button>

    </Zest>

  );

};

 

export default SomeComponent;

 

Example of animating an input on error:

 

import React from ‘react’;

import Zest from ‘react-zest’;

 

const SomeComponent = props => {

  constructor(props) {

    super(props);

 

    this.state = {

      input: ”,

      valid: true

    };

  }

 

  checkValidity() {

    if (this.state.input.length < 3) { return this.setState({ valid: false }); }

    return this.setState({ valid: true });

  }

 

  return (

    <Zest

      animationName=”pulse”

      animationTrigger={!this.state.valid}

    >

      <input

        type=”text”

        value={this.state.input}

        onChange={e => this.setState({ input: e.target.value })}

        onBlur={this.checkValidity} />

    </Zest>

  );

};

 

export default SomeComponent;

 

Themes in react zest:

React zest is best suited for fresh reactjs developers or designers too. It is possible to get multiple admin themes features in one. Zest provides a total of 9 different admin themes. So they are:

General Admin

Hospital Admin

Music Admin

University Admin

CRM Admin

Freelancing admin

Social Media Admin

ECommerce admin and 

Blog Admin

Features of Zest Admins:

Zest admins also have multi-layout options. There are two menu styles in zest admins viz. Open Width and Menu width. Even these menus consist of 12 different styles. Not only has this, like the zest menus, App Header too had 12 different style options. It enables us to create our own unique layout using these varieties of menu and header styles. It is possible to create over 250+ unique layouts using this. We can also find a chat bar on zest admins. It has 3 different styles. 

SASS automatically compiles your CSS file from the project when you want to make changes to it. It is possible to edit all CSS settings like fonts, colors, sizes, etc. in a simple variables file. It is extremely easy to make any changes in your admin styling which is suitable for your brand within a couple of minutes. 

We can also see different icon fonts like Font Awesome and simple line icon set. Along with these, it is possible to make use of google fonts too which can be configured at times needed. 

It follows a proper documentation process with complete privacy starting from the first installment till the final production deployment. 

The most recent version developed till now is Version 1.1.0. It is available from 25th January 2020.

 

Zest admin-plugins:

Zest admins have a wide range of integrated plugins and components. Few of the examples listed are,

Graphical Chart, Mail Box,  Calendar, Widgets, Blogs, Gallery, Pricing tables, Databases, Access and Error Pages, UI elements, Reactstrap components, Date pickers, time pickers, color pickers, etc. 

 

3rd Part Plugins in Zest:

We can also find third-party plugins in the admin theme. 3rd party admin-plugins listed are,

Bootstrap 4, Chart.js, Fonts Awesome Icons, jQuery, jVectormap, Moment, Node SASS, Perfect Scrollbar, React Color Picker, React Slider, React Auto-suggest, React Big Calendar, React Bootstrap Data table, React CKEditor, React Count to, React Data grid, React Date picker, React Date Range picker, React Date time picker, React Wysiwyg editor, React Dropzone,  React Google maps, React input mask, React Masonry gallery, React notification alert, React Numeric Input, React scripts, React Tagsinput, React Time Picker, Reactstrap.

 

Creating a Dashboard with React:

The dashboard is a compact monitor that handles all metrics of a company. So it is better to use react as it has a lot of features that can make a dashboard look interactive. It is better to use JSX while writing codes for applications with react. To create a dashboard we need to perform the following steps:

 

Step 1 Creating an HTML page for the Dashboard including a CSS file:

HTML code:

 

<div class=”chart-row”>

    <div id=”country-revenue”></div>

</div>

 

<div class=”chart-row”>

<div id=”monthly-revenue” class=”inline-chart”>

</div>

<div id=”product-revenue” class=”inline-chart”>

</div>

</div>

 

CSS code:

 

.chart-row {

  margin-bottom: 15px;

}

.inline-chart {

  display: inline-block;

  width: 48%;

  margin-left: 1%;

}

 

Step 2 Creating a React Component:

 

var DashboardApp = React.createClass({

  render: function() {

return (

   <div>

     <h1 className=”main-title”>Acme Inc. Revenue Analysis for 2015</h1>

     <div id=”interactive-dashbaord”></div>

     <div className=”chart-row”>

       <div id=”country-revenue”>

         // country revenue chart here

       </div>

     </div>

     <div className=”chart-row”>

          <div id=”monthly-revenue” className=”inline-chart”>

         // chart 2 here – spline

       </div>

       <div id=”product-revenue” className=”inline-chart”>

         // chart 3 here – donut

       </div>

     </div>

   </div>

);

  }

});

 

Step 3 To render the react component into HTML:

 

React.render(

<DashboardApp />,

document.getElementById(“dashboard”)

);

 

Step 4 Creating multiple chart components:

Step 4.1 Preparing Chart data:

 

[{

“label”: “Orange”,

“value”: “90”

},{

“label”: “Yellow”,

“value”: “60”

}…]

Step 4.2 Creating a chart configuration:

 

{

  type: “doughnut2d”,

  renderAt: “product-revenue”,

  width: ‘100%’,

  height: 400,

  dataFormat: “json”,

  dataSource: {

chart: {

   caption: “Top 5 stores in last month by revenue”,

   theme: “carbon”

},

data: [{

        “label”: “Jan”,

        “value”: “657000”

   }, {

        “label”: “Feb”,

        “value”: “138000”

   },

   … {

        “label”: “Dec”,

        “value”: “730000”

   }

]

  }

}

 

Step 5 Creating chart using react plugin:

 

<react_fc.FusionCharts {…countryChartConfigs} />

 

Step 6 Placing the components in JSX dashboard:

 

<div>

  <h1 className=”main-title”>Acme Inc. Revenue Analysis for 2015</h1>

  <div id=”interactive-dashbaord”></div>

  <div className=”chart-row”>

<div id=”country-revenue”>

      <react_fc.FusionCharts {…countryChartConfigs} />

</div>

  </div>

  <div className=”chart-row”>

<div id=”monthly-revenue” className=”inline-chart”>

      <react_fc.FusionCharts {…monthlyChartConfigs} />

</div>

<div id=”product-revenue” className=”inline-chart”>

      <react_fc.FusionCharts {…productChartConfigs} />

</div>

  </div>

</div>

 

Leave a comment