mottox2 blog

GatsbyJSハンズオン資料

event

thumbnail

2019/01/08にサポーターズで行われる『Gatsbyで今風ウェブサイトの開発ハンズオン』のハンズオン資料です。

スライド

各種リンク

Reactのおさらい

src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./Hello";

import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Hello name="an" />
      <Hello name="en" />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
src/Hello.js
import React from "react";

const Hello = props => {
  return <p>Hello {props.name}</p>;
};

export default Hello;

Gatsby入門

https://codesandbox.io/s/vvx7w5q2oy

gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    {
      resolve: 'gatsby-source-rss-feed',
      options: {
        name: 'BlogPost',
        url: 'https://mottox2.com/rss.xml',
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.app/offline
    // 'gatsby-plugin-offline',
  ],
}
gatsby-node.js
const path = require('path')

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const post = path.resolve('./src/templates/post.js')
  return graphql(`
    {
      allFeedBlogPost {
        edges {
          node {
            guid
          }
        }
      }
    }
  `).then(result => {
    console.log(result.data.allFeedBlogPost.edges)
    result.data.allFeedBlogPost.edges.forEach(post => {
      createPage({
        path: `/stories/${post.guid}`,
        component: post,
        context: {
          guid: post.guid
        }
      })
    })
  })
}
src/pages/index.js
import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/layout'

export default props => (
  <Layout>
    {props.data.allFeedBlogPost.edges.map(edge => {
      const post = edge.node
      return (
        <p key={post.guid}>
          <Link to={`/posts/${post.guid}`}>
            {post.title}
          </Link>
        </p>
      )
    })}
  </Layout>
)

export const query = graphql`
  {
    allFeedBlogPost {
      edges {
        node {
          guid
          title
        }
      }
    }
  }
`
src/templates/post.js
import React from 'react'
import { graphql } from 'gatsby'

export default props => {
  const post = props.data.feedBlogPost
  return (
    <div>
      <p>{post.title}</p>
      <div
        dangerouslySetInnerHTML={{
          __html: post.content.replace('\n', '<br/>'),
        }}
      />
    </div>
  )
}

export const query = graphql`
  query($guid: String!) {
    feedBlogPost(guid: { eq: $guid }) {
      title
      content
    }
  }
`
B!
dev

ReactとIonicでアプリ開発ができる@ionic/reactを触ってみた

どうも、クロスプラットフォーム開発の夢を捨てきれない@mottox2です。 クロスプラットフォーム開発の選択肢はReactNative, Flutter, Xamarinなどがありますが、つい最近に

reactionic
dev

ブログのReactを16.8にあげてReact Hooksで書き換えてみた

2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。 そこで今回このブログで使われているReactを16.8に上

javascriptreact
blog

Netlifyのデプロイ通知をDiscordで受け取る方法

Netlifyでサイトをホスティングしていると、デプロイ開始から完了までのタイムラグがあることでデプロイの完了を把握するにはWeb UIを確認する必要があります。 しかし、デプロイごとにWeb UI

discordnetlify