Netlify, Gatsbyのお勉強１➡GatsbyフレームワークHelloWorldで出来合いのCMSではないよ。

これから1時間ほどGatsbyの勉強をしたいと思います。https://www.gatsbyjs.org/tutorial/part-one/

必要なインストール

１．VS Code　（bash設定にしておけばやりよい）

２．Node.js

３．npm

４．Git とGithub

*******************************

1.では、gatsbyをインストール

npm install -g gatsby-cli

２．hello-worldという名のプロジェクトをgithubから持ってくる。

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

３．一つ下の階層に２のhello-worldができているので、そこへ移る

cd hello-world

４．ライブでブラウズできるようにする。（エクステンションのGo Liveを使わなくてもこれでブラウズできます。）

 gatsby develop

【！】GatsbyはReactベースなので、コンパイルが必要！だから、イメージファイルなんか変えたら「見つかりません」のエラーが出ます。きちんとReactにそって変更しましょう。変更を保存すると同時にgatsby developが勝手にコンパイルしてくれます。

ローカルでブラウズしてみましょう。http://localhost:8000

５．エクステンションのPrettier Formatterを入れたほうがいいというので、なにかよくわかんないけどいれた。シンタックスのエラーなんかを防ぐのかな？

【！】だいたいGatsbyを始めるときには、もともとあるGatsbyのスターターGithubからコピペして始めるそうだ。

gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

【！】うぉっと、Gitブランチ作るの忘れてた。ここまでは、しっかり動いてくれてます。

git checkout -b hello01

 

*******************************

 React 知ってる人は飛ばしてねぇーって書いてますが、ねこはVue.jsしか知らないので、急がば回れです。

コンポーネントについて

『JSX』（Reactコンポーネントです）

import React from "react"

export default () => <div>Hello world!</div>

『JS』（Pure Javascript）

import React from "react"

export default () => React.createElement("div", null, "Hello world!")

 

『HTML』

<button class="primary-button">Click me</button>

『JSX』

<PrimaryButton>Click me</PrimaryButton>

 

ページ・コンポーネント

src/pages/about.jsを新しく作ります。

『JSX』

import React from "react"

export default () => (
<div style={{ color: `teal` }}>
<h1>About Gatsby</h1>
<p>Such wow. Very React.</p>
</div>
)

http://localhost:8000/about

 

さぶ・コンポーネントを使います。

src/components/header.jsを新しく作ります。

『JSX』header.js

import React from "react"

export default props => <h1>{props.headerText}</h1>

『JSX』about.js

import React from "react"
import Header from "../components/header"

export default () => (
<div style={{ color: `teal` }}>
<Header headerText="ここにある文字がheader.jsで設定されたレイアウトと一緒に出てくるよ！" />
<p>Such wow. Very React.</p>
</div>
)

propsってなぉーに？？？

使いまわしできるように作った箱ですな。この場合はaboutで出したい文字をheaderのレイアウトに沿って一緒に出すようにしたもの。だから、headerはimport で呼ばれて、propsの箱にいれる内容をもらいます。郵便局の「荷物お伺い配達」と似てますな。呼ぶ側が「お客さん（about.js）」、そして荷物を取りに来てくれるのが「郵便局(header.js)」郵便局は一日に何件もお客さん宅を回って荷物を受け取りに行きます。

 

リンクを使いましょう

src/pages/index.js

 

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

 

export default () => (
<div style={{ color: `purple` }}>
<Link to="/contact/">Contact</Link>
<Header headerText="Hello Gatsby!" />
<p>What a world.</p>
<img src="https://source.unsplash.com/random/400x200" alt="" />
</div>
)

5分早いけど、おなか減ったんで、Gatsbyのお勉強はここまで。