What is 反应 zest?
反应 zest是一个多功能的高级管理仪表板，可以在功能强大的React Framework，Bootstrap4，Reactstrap和create-react-app的基础上构建。因此，它为管理面板提供了独特而优雅的外观。 反应 zest对开发人员友好，易于编码和定制。它具有大量不同主题，页面数不胜数。
它具有很高的响应速度，可以适应任何大小的视口。因此，我们可以找到许多可重复使用的UI组件和最新的流行插件。我们可以使用此主题创建不同类型的项目应用程序。因此，它是各种利基二手应用程序（例如音乐，CRM，自由职业，博客，电子商务等）的最佳来源。
反应 zest的基本示例：
从导入React‘react’;
从进口Zest‘react-zest’;
const SomeComponent =道具=> {
return (
<Zest
animationName=”wiggle”
animationTrigger=”hover”
animationDuration = {700}
>
<button>Click here!</button>
</Zest>
);
};
导出默认的SomeComponent;
对错误输入进行动画处理的示例：
从导入React‘react’;
从进口Zest‘react-zest’;
const SomeComponent =道具=> {
constructor(props) {
super(props);
this.state = {
input: ”,
valid: true
};
}
checkValidity() {
如果（this.state.input.length<3）{返回this.setState（{valid：false}）; }
返回this.setState（{有效：true}）;
}
return (
<Zest
animationName=”pulse”
animationTrigger = {！this.state.valid}
>
<input
type=”text”
值= {this.state.input}
onChange={e =>this.setState（{输入：e.target.value}）}
onBlur = {this.checkValidity} />
</Zest>
);
};
导出默认的SomeComponent;
Themes in 反应 zest:
反应热情最适合新鲜 反应js developers 还是设计师。可以将多个管理主题功能合而为一。 热情共提供9种不同的管理主题。他们是：
一般管理员
医院管理员
音乐管理员
大学行政
客户关系管理
自由职业管理员
社交媒体管理员
电子商务管理员和
博客管理员
热情管理员的功能：
热情的管理员还具有多重布局选项。在zest管理员中有两种菜单样式。打开宽度和菜单宽度。即使这些菜单也包含12种不同的样式。不仅像zest菜单一样，App Header还具有12种不同的样式选项。它使我们能够使用这些种类的菜单和标题样式来创建自己的独特布局。使用此功能可以创建超过250个以上的唯一布局。我们还可以在zest管理员上找到一个聊天栏。它具有3种不同的样式。
当您要对其进行更改时，SASS会自动从项目中编译CSS文件。可以在一个简单的变量文件中编辑所有CSS设置，例如字体，颜色，大小等。在几分钟之内就可以轻松更改适合您品牌的管理样式。
我们还可以看到不同的图标字体，例如Font Awesome和简单线条图标集。除了这些，还可以使用Google字体，可以在需要的时候进行配置。
从第一批开始到最终生产部署，它遵循适当的文档编制过程，并具有完全的隐私权。
到目前为止，最新开发的版本是1.1.0版。它从2020年1月25日开始可用。
热情管理员插件：
热情管理员拥有广泛的集成插件和组件。列出的示例很少是，
图形图表，邮箱，日历，小部件，博客，图库，定价表，数据库，访问和错误页面，UI元素，Reactstrap组件，日期选择器，时间选择器，颜色选择器等
热情中的第三部分插件：
我们还可以在admin主题中找到第三方插件。列出的第三方管理插件是，
Bootstrap 4，Chart.js，字体超赞图标，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网格，React Date选择器，React Date范围选择器，React Date时间选择器，React Wysiwyg编辑器，React Dropzone，React Google地图，React输入蒙版，React Masonry库，React通知警报，React数字输入，React脚本，React标签输入，React时间选择器，Reactstrap。
使用React创建仪表板：
仪表板是一个紧凑的监视器，可以处理公司的所有指标。因此最好使用react，因为它具有许多可以使仪表板看起来具有交互性的功能。最好在使用react编写应用程序代码时使用JSX。要创建仪表板，我们需要执行以下步骤：
步骤1为仪表板创建HTML页面，包括CSS文件：
HTML代码：
<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代码：
.chart-row {
margin-bottom: 15px;
}
.inline-chart {
显示：inline-block;
width: 48%;
margin-left: 1%;
}
第2步：创建一个React组件：
var DashboardApp = 反应.createClass（{
render: function() {
返回（
<div>
<h1 className=”main-title”>Acme Inc. 2015年收入分析</h1>
<div id=”互动式仪表板”></div>
<div className=”chart-row”>
<div id=”country-revenue”>
//此处的国家/地区收入图表
</div>
</div>
<div className=”chart-row”>
<div id=”monthly-revenue” className=”inline-chart”>
//此处的图表2– spline
</div>
<div id=”product-revenue” className=”inline-chart”>
//此处的图表3– donut
</div>
</div>
</div>
）;
}
}）;
步骤3要将react组件呈现为HTML：
反应.render（
<DashboardApp />,
document.getElementById（“dashboard”)
）;
步骤4创建多个图表组件：
步骤4.1准备图表数据：
[{
“label”: “Orange”,
“value”: “90”
}，{
“label”: “Yellow”,
“value”: “60”
}…]
步骤4.2创建图表配置：
{
type: “doughnut2d”,
renderAt: “product-revenue”,
width: ‘100%’,
height: 400,
dataFormat: “json”,
dataSource: {
图表：{
标题：“上个月收入排名前5位的商店”,
主题：“carbon”
}，
数据：[{
“label”: “Jan”,
“value”: “657000”
}，{
“label”: “Feb”,
“value”: “138000”
}，
… {
“label”: “Dec”,
“value”: “730000”
}
]
}
}
步骤5使用react插件创建图表
<react_fc.FusionCharts {…countryChartConfigs} />
步骤6将组件放置在JSX仪表板中：
<div>
<h1 className=”main-title”>Acme Inc. 2015年收入分析</h1>
<div id=”互动式仪表板”></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>
