通过使用内容管理系统（CMS），可以使您和客户的博客内容更容易。 CMS是可让您在有或没有技术知识的情况下轻松创建和管理数字内容的软件。
在本文中，您将学习如何使用React和Hygraph CMS构建功能齐全的博客应用程序。
什么是Hygraph？
Hygraph是一个联合内容平台，它利用GraphQL用于内容API，使其更容易分发您的内容。稍后，您将看到Hygraph如何轻松创建内容模式并通过GraphQl API访问所有这些。
遵循的先决条件：
反应的中间知识;
IDE，最好是VS代码;
浏览器，例如chrome;
入门Hygraph
首先使用Hygraph创建帐户。继续创建一个项目，选择名称，描述和数据存储区域。
这将使您进入此页面。
在左侧菜单上，单击架构以填写内容模型。在模型选项旁边。单击添加选项，然后继续填写博客文章的详细信息。
现在您已经完成了。 Hygraph将您带入字段选项，该选项允许您添加博客本身的所有详细信息。
一旦填写了内容的头部到屏幕左侧的项目设置部分。在这里，您可以访问您将用于将数据获取到您的React应用程序的API。
要查看生成的GraphQl查询，请单击API游乐场部分。
现在是时候创建React应用了了。通过在VS代码终端中运行npx create react app来实现此功能。
完成此操作后，是时候获取此数据了。在您的React应用程序中创建一个组件文件夹，然后创建一个blogcard.js文件。使用此代码：
请注意，我的项目的名称恰好有所不同，因为以下代码是我以前使用Hygraph
的项目
import "./Blogcardstyles.css";
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import image1 from "../assets/claudio-testa--SO3JtE3gZo-unsplash.jpg";
import image2 from "../assets/tomoko-uji-eriuKJwcdjI-unsplash.jpg";
import image3 from "../assets/henry-be-IicyiaPYGGI-unsplash.jpg";
import { request } from 'graphql-request';
const Blogcard = () => {
const [blogs, setBlogs] = useState([]);
useEffect(() => {
const fetchBlogs = async () => {
const { blogappsmwendwa } = await request(
`your api key goes here`
{
blogappsmwendwa {
hereWeGoWithTheBlogapp
loremIpsumLoremIpsum
}
}`
);
setBlogs(blogappsmwendwa);
};
fetchBlogs();
}, []);
return (
<div className="work-container">
<h1 className="project-heading">All Blogs</h1>
<div className="project-container">
<div className="project-card">
<img src={image1} alt="nature" />
<h2 className="project-title">Content fetched from Hygraph CMS</h2>
<div className="pro-details">
{blogs.map((blogapp) => (
<p>{blogapp.hereWeGoWithTheBlogapp}</p>
))}
<div>
<Link to="/Page" className="btn">Read More</Link>
</div>
</div>
</div>
<div className="project-card">
<img src={image2} alt="nature" />
<h2 className="project-title">Content fetched from Hygraph CMS</h2>
<div className="pro-details">
{blogs.map((blogapp) => (
<p>{blogapp.hereWeGoWithTheBlogapp}</p>
))}
<div>
<Link to="/Page" className="btn">Read More</Link>
</div>
</div>
</div>
<div className="project-card">
<img src={image3} alt="nature" />
<h2 className="project-title">Content fetched from Hygraph CMS</h2>
<div className="pro-details">
{blogs.map((blogapp) => (
<p>{blogapp.hereWeGoWithTheBlogapp}</p>
))}
<div>
<Link to="/Page" className="btn">Read More</Link>
</div>
</div>
</div>
</div>
</div>
)
};
export default Blogcard;
在BlogCard.js中，您能够从Hygraph Schema中获取您的博客内容。
然后，您可以使用map()Method来确定数据的每个部分。
现在，您可以刷新您的页面，以查看Hygraph Schema中存储的所有数据，直到您的React应用程序中。
阅读更多按钮重定向到一个新页面，该页面显示了您之前创建的模式的更多数据。要查看完整的博客应用程序，请检查我的Github Repo中的代码。
结论
通过本文，您了解了什么是CMS，其好处以及如何创建一个从Hygraph获取的内容的博客应用程序，这是一个联合内容平台。