在上一篇文章中，我们学习了如何使用Contentful以及如何为我们的项目创建一个内容模型。如果你还没有阅读那篇文章，请在这里找到它。
正如我们在前一篇文章中所看到的，我们可以使用一个灵活的UI层在任何设备上使用来自Contentful的内容。为了证明这一点，在这篇文章中，让我们使用React JS创建一个博客网站，其内容由Contentful提供。
设置
在我们开始使用React之前，我们应该安装这些基本包。
在终端执行以下代码来添加软件包。
npm install --save contentful react-markdown react-router-dom
contentful**是Contentful的官方Node包，它将允许我们与它的API交互。
react-markdown**允许我们将Markdown内容解析为HTML标签。
react-router-dom 是一个npm包，帮助我们在Web应用中实现动态路由。
与Contentful集成
让我们从与Contentful链接的代码开始，以检索我们的博客文章。为此，我们必须有空间ID和访问令牌（API密钥）。
我们可以在这里找到我们的空间ID和访问令牌 -设置 > API密钥。如果你没有API密钥，请创建一个API密钥，然后我们可以看到空间ID和访问令牌。
一旦我们得到空间ID和访问令牌，那么我们就可以向Contentful发送API请求了。为了向Contentful发送请求，我们必须用*createClient()*函数创建一个客户端，该函数是从contentful包中导入的。
读取内容
contentful库提供了一个*getEntries()*函数，可用于从配置的空间读取内容。
如果我们只想要一个特定的content_type的内容，那么我们可以把content_type和它的content type ID作为这个函数的一个参数。
所有的模型都有一个唯一的内容类型ID。我们可以找到我们的内容类型ID，如下所示。
注：- 如果我们没有为 getEntries*()* 提到任何内容类型 ，它将返回一个JSON响应，这将包含我们空间中所有模型的内容。
让我们创建一个函数来获取所有的帖子和一个单独的帖子。
如果你注意到上述代码中有什么不同，那就是函数getSinglePost()上的slug 参数。slug 参数是用来识别一个特定页面的内容。
注：- 蛞蝓是URL的一部分，它以一种易于阅读的格式识别网站上的特定页面
例如，如果URL是your-site.com/abc-xyz， abc-xyz就是lug。
我们需要创建一个'slug'字段来识别帖子，如下图所示。
默认情况下，slug字段的值将与Entry字段相同。但是，如果我们想，我们可以改变它，或者我们可以改变参考字段，如下所示。
如果你想了解更多关于slug的信息，请阅读这里。
设置路线（V6）
我们需要创建两条路由，一条是帖子（或主页）的路由，另一条是动态单帖页面的路由，如上所示。
我不会太深入研究React路由。这超出了本文的范围。关于路由器的更多信息，请阅读这里。
显示内容
我们有getPosts()和getSinglePost()函数可以返回过滤后的内容。现在我们准备显示这些内容了。
所有帖子页面（主页）
为了显示所有的帖子，让我们创建Home.js并导入getPosts()来获取所有帖子的内容。
为了获得帖子，我们可以使用getPosts()的useEffect()钩，并将该响应存储在状态中。现在我们在状态中拥有所有帖子的内容。
我创建了一个简单的布局来显示帖子，我们的主页看起来就像下面这样。
单个帖子页面
useParams()将允许我们从React路由器读取动态路由参数。
我们可以通过使用useParams()对路由参数进行去结构化。
对于单帖页面，我创建了另一个名为SinglePost.js的文件。我们可以使用getSinglePost**(id)的useEffect()钩子*（id*是获取单个帖子的路由参数）并将其存储在状态中。
最后，我们的帖子页面看起来像下面的截图。
实时内容更新
我们创建了我们的React网络应用，它正在渲染来自Contentful的内容。我们可以通过在Contentful中添加另一个帖子来检查。
创建另一个帖子'Post Two'并发布它。现在，如果我们进入React并刷新我们的网络应用，我们可以看到我们的新帖子被添加到主页。
如果我们点击这个新帖子，它将导航到具有其内容的单个帖子页面。
同样，我们可以通过在Contentful中的改变来创建和修改网站中的任何数量的帖子，而不用担心代码的问题。
弗朗西斯科技术 是一家技术公司，专注于以极快的速度提供高质量的规模软件。数据的数量和规模让我们感到兴奋。如果你在构建大规模应用程序方面有任何要求，或者想对你的系统或架构进行免费的健康检查，请随时向contact@francium.tech，我们将与你联系！
用Contentful和React建立一个现代化的网站》最初发表在Medium的Francium Tech上，人们通过强调和回应这个故事来继续对话。
