Build a Page Layout in Gatsby

Create a React Form in Gatsby

Generate Dynamic Routes in Gatsby with Reach Router

Manage Application State in Gatsby with React Hooks

Generate an Access Token for Users with Twilio Serverless Functions

Consume a Generated Twilio Token in Gatsby with React Hooks

Restrict Access in Gatsby with Protected Routes

Connect Video to a Room with React Hooks in Gatsby

Show Video in Gatsby from Remote Participants with React Hooks

Handle Disconnected Participants with React Hooks and the Twilio API

Build a Video Chat App with Twilio and Gatsby

To start a Gatsby site, we'll need a home page and a layout that the app will live in. 

In this lesson we will build out the Layout component that will wrap the wrest of the components that we build and start with a simple home page.

https://app.egghead.io/api/v1/lessons/gatsby-build-a-page-layout-in-gatsby/subtitles

Instructor: [0:01] To get started, we need a place for our app to live. We're going to build a home page and a layout for that. Start by building a layout, so that we've got something to put on the home page. We're going to call this layout.js. Inside, we will import React from 'react' and then we will import { Link } from "gatsby", which we'll use to do a local link here.

[0:21] We're also going to import the layout.css. We didn't cover writing the styles because [inaudible] not really what this lesson is about. We're just going to import those. We'll use them throughout the app.

[0:31] Then we're going to set up a component called layout. That is going to accept a children props, so that we can put whatever we want inside of it. It's going to return a React.Fragment. Inside of that React.Fragment, we want to have a header element and also a main element.

[0:47] Inside the header, we're going to link to the home page, so just to root. We'll call this a VideoChat app. Inside the main component, all we need to do is return the children prop.

[0:59] Next, we need to export that component. We'll export that as the default. To use it, we're going to create a page. In Gatsby, we create pages by creating a pages folder inside of the src directory. The home page is going to be called index.js.

[1:14] In here, we will also import React from 'react'. We will import Layout that we just created from components/layout. Then, we'll just export the default component. Our default component to begin is going to be the layout we created. Inside of it, we'll just give ourselves a note, "To do, create app."

[1:34] To check our work, let's start the app. Start the app, open your command line and run yarn develop. After the app is finished booting, we'll see success in the CLI and then we can open this URL, localhost:8000.

[1:47] We'll see, here's our layout. It does link to the home page. If we click that, it doesn't do anything because we're already there. It chooses our <h1> of CreateApp.

Build a Page Layout in Gatsby

Share this video with your friends

Course

Build a Video Chat App with Twilio and Gatsby