react入门博客_如何使用React和GraphQL建立一个简单的博客

最新推荐文章于 2024-10-15 15:06:01 发布

dingshi7798

最新推荐文章于 2024-10-15 15:06:01 发布

阅读量110

点赞数

文章标签： react java vue javascript python ViewUI

原文链接：https://www.sitepoint.com/build-a-simple-blog-using-react-graphql-cosmicjs/

版权

react入门博客

本文由Cosmic JS赞助。 感谢您支持使SitePoint成为可能的合作伙伴。

在本教程中，我将向您展示如何使用React， GraphQL和Cosmic JS创建一个简单的博客。这将是建立在现代技术堆栈之上的最快，最轻量的博客。让我们开始吧。

TL; DR

观看演示
 在Cosmic JS上安装Simple React Blog
在GitHub上查看代码库

宇宙JS

GraphQL

入门

确保在计算机上安装了Node.js和NPM，否则请访问Node.js网站以安装最新版本。

首先，为我们的应用程序创建一个文件夹。在您喜欢的终端中，运行以下命令：

mkdir simple-react-blog
cd simple-react-blog

现在，我们添加一个package.json文件，以导入我们应用程序的所有依赖项：

vim package.json

将以下内容添加到我们的package.json文件中：

{
{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next build; NODE_ENV=production node server.js"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "express": "^4.16.2",
    "lodash": "^4.17.4",
    "next": "^4.0.3",
    "next-routes": "^1.1.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}

这是一个漂亮应用程序的漂亮依赖列表。因此，我们将安装的是：

Axios供我们基于承诺的HTTP客户端从Cosmic JS GraphQL API获取内容。
Next.js作为我们的React Universal框架。
动态路线的下一条路线。
表达我们的服务器端Web应用程序框架。
React以处理我们的用户界面。

在生产和开发中启动我们的应用程序，我们的脚本是必需的。

运行以下命令以安装我们的依赖项：

npm i

建立我们的博客

接下来，让我们开始构建我们的博客页面。创建一个页面文件夹并添加index.js文件：

vim index.js

并将以下内容添加到index.js：

import axios from 'axios'
import _ from 'lodash'
import Footer from './partials/footer'
import Header from './partials/header'
import helpers from '../helpers'
import config from '../config'

export default class extends React.Component {
  static async getInitialProps({ req }) {
    const query = `{
      objects(bucket_slug: "${config.bucket.slug}") {
        _id
        type_slug
        slug
        title
        metadata
        created_at
      }
    }`
    return await axios.post(`https://graphql.cosmicjs.com/v1`, { query })
    .then(function (response) {
      return {
        cosmic: {
          posts: _.filter(response.data.data.objects, { type_slug: 'posts' }),
          global: _.keyBy(_.filter(response.data.data.objects, { type_slug: 'globals' }), 'slug')
        }
      }
    })
    .catch(function (error) {
      console.log(error)
    })
  }
  render() {
    if (!this.props.cosmic)
      return <div>Loading...</div>
    return (
      <div>
        <Header cosmic={ this.props.cosmic }/>
        <main className="container">
          {
            this.props.cosmic.posts &&
            this.props.cosmic.posts.map(post => {
              const friendly_date = helpers.friendlyDate(new Date(post.created_at))
              post.friendly_date = friendly_date.month + ' ' + friendly_date.date
              return (
                 <div className="card" data-href={`/${post.slug}`} key={post._id}>
                  {
                    post.metadata.hero.imgix_url &&
                    <a href={`/${post.slug}`} className="blog-post-hero blog-post-hero--short" style={{ backgroundImage: `url(${post.metadata.hero.imgix_url})`}}></a>
                  }
                  <div className="card-padding">
                    <h2 className="blog__title blog__title--small">
                      <a href={`/${post.slug}`}>{post.title}</a>
                    </h2>
                    <div className="blog__author">
                      <a href={`/author/${post.metadata.author.slug}`}>
                        <div className="blog__author-image" style={{ backgroundImage: `url(${post.metadata.author.metafields[0].imgix_url}?w=100)`}}></div>
                      </a>
                      <div className="blog__author-title">by <a href={`/author/${post.metadata.author.slug}`}>{post.metadata.author.title}</a> on {post.friendly_date}</div>
                      <div className="clearfix"></div>
                    </div>
                    <div className="blog__teaser droid" dangerouslySetInnerHTML={{__html: post.metadata.teaser}}></div>
                    <div className="blog__read-more">
                      <a href={`/${post.slug}`}>Read more...</a>
                    </div>
                  </div>
                </div>  
              )
            })
          }
        </main>
        <Footer />
      </div>
    )
  }
}

这里发生了一些事情：

我们正在导入我们的基本模块：Axios，Lodash和其他帮助程序和组件。
我们引入了一些部分：Header和Footer，您可以从GitHub的代码库中引用这些部分。
我们查询Cosmic JS GraphQL API仅返回所需的内容：_id，type_slug，slug，标题，元数据和created_at。
我们将组件中的主要道具设置为cosmic对象。并使用lodash解析Posts和Global Object类型。
我们将帖子数组数据和图像URL返回到我们的主要博客供稿中。

单发查询

对于我们的单个帖子，我们在道具中添加一个post属性。通过将query.slug与Object slug匹配来找到帖子：

const gql_query = `{
  objects(bucket_slug: "${config.bucket.slug}") {
    type_slug
    slug
    title
    content
    metadata
    created_at
  }
}`
return await axios.post(`https://graphql.cosmicjs.com/v1`, { query: gql_query })
.then(function (response) {
  return {
    cosmic: {
      posts: _.filter(response.data.data.objects, { type_slug: 'posts' }),
      global: _.keyBy(_.filter(response.data.data.objects, { type_slug: 'globals' }), 'slug'),
      post: _.find(response.data.data.objects, { slug: query.slug }),
    }
  }
})
.catch(function (error) {
  console.log(error)
})
}

在GitHub上检出完整文件。

结论

这是Simple React Blog的简化版本，可在Cosmic JS Apps页面中下载。完整的代码库包括一个帖子页面视图以及一个专门针对每个作者帖子的页面。在GitHub上查看完整的代码库，并通过将应用程序安装到Cosmic JS Bucket，从Cosmic JS仪表板中单击几次以部署此应用程序。