Add in components into Gatsby's layout.

[mrchow19910319]

How am I supposed to divide my layout into different part and add in all the components 1 by one?

This is how I am planning my page: 

Spoiler

The header + footer I can easily add in using <Header /> and <Footer />.

 

Here is the layout.js file: 

import React from "react"
import PropTypes from "prop-types"
import { StaticQuery, graphql } from "gatsby"

import Header from "./header"
import Footer from "./footer"
import bio from "./bio"
import "./layout.css"

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
        <div
          style={{
            margin: `0 auto`,
            maxWidth: 960,
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: 0,
          }}
        >
          <main>{children}</main>
        </div>
        <Footer />
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Here is my Bio.js file:

 

import React from "react"
import Layout from "./layout"
import SEO from "./seo"
import 'bootstrap/dist/css/bootstrap.css'

const bio = (data) => (
  <Layout>
    <SEO title="slowpacedcoding" keywords={[`slowpacedcoding`, `web development`, `Matt Zhou`]} />

    <h3 style={{
      fontFamily: `'Montserrat', sans-serif`,
      fontWeight: 400,
      marginTop:`1rem`,
      color: `#f47c48`,
    }}>Bio</h3>
    <img src="https://res.cloudinary.com/zzrot/image/upload/v1549713970/Personal%20Portfolio%20Collection/Personal%20Portfolio%20Site%20Images/no_background.png" alt="profile_pic" style={{
      width:`100px`,
    }}></img>
    <p style={{
      fontFamily: `'Montserrat', sans-serif`,
    }}>
    Former student of Singapore Polytechnic, dropped out at the end of year two, had been
    learning Web-Development since 2016. My goal is to become a web developer in an English speaking country.
    </p>

    <h5 style={{
      fontFamily: `'Montserrat', sans-serif`,
    }}>Find me at :</h5>

    <div>
      <a href="https://www.linkedin.com/in/xiang-zhou-03547755/" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>LinkedIn</a>
      <a href="https://github.com/zhouxiang19910319" rel='noopener noreferrer' target="_blank"  style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>github</a>
      <a href="https://medium.freecodecamp.org/the-most-difficult-things-about-learning-to-code-by-yourself-b24ac8c3c23a "
      rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>medium</a>
      <a href="https://twitter.com/zh0ux1ang" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>twitter</a>
      <a href="https://www.freecodecamp.org/zhouxiang19910319" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}} >freeCodeCamp</a>
    </div>

  </Layout>
)

export default bio

 

[infamoustrey]

Kind of hard to understand what you're asking here, if I understand correctly you'd import your Posts.js file which I'm assuming is a react class then simply place it into your main page js's render method. 

 

Something like this(very pseudo as i don't have your exact project):

import React, { Component } from "react";

import Layout from '...path/to/Layout'
import Posts from '...path/to/Posts'
import Bio from '...path/to/Bio'

class Home extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <Layout>
        	<div>
            	<Posts />
                <Bio />
            </div>
        </Layou>;
    }
}

export default Home;

 

However if you are asking how to achieve that specific style of layout then I would suggest checking out css flex box.

[mrchow19910319]

1 hour ago, infamoustrey said:

 

sorry I didn't specify what I wanna achieve, in the layout.js file we can find imported components like footer , as well as header.

I want to make a bio.js file then import it into layout.js.

[mrchow19910319]

Here is the project repo: 

https://github.com/zhouxiang19910319/slowpacedcoding_gatsby

 

 

check out this thread I made: https://www.freecodecamp.org/forum/t/import-react-components-in-gatsby-js/265231

 

I think I am going to make bio.js a full blown react class components then import it into layout.js.