Hands-On Web Development with React and GatsbyJS

Getting Started with GatsbyJSs 6 lectures 52:39 The Course Overview This video will give you an overview about the course. What is GatsbyJS? We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter Installing Gatsby and Cloning Our Gatsby Project It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app An Overview of Typography and Styling You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS Using React Helmet to Add Metadata We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog Creating a New Page and Linking Between Pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages Getting Started with GatsbyJSs - Quiz Getting Started with GatsbyJSs 6 lectures 52:39 The Course Overview This video will give you an overview about the course. What is GatsbyJS? We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter Installing Gatsby and Cloning Our Gatsby Project It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app An Overview of Typography and Styling You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS Using React Helmet to Add Metadata We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog Creating a New Page and Linking Between Pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages Getting Started with GatsbyJSs - Quiz The Course Overview This video will give you an overview about the course. The Course Overview This video will give you an overview about the course. The Course Overview This video will give you an overview about the course. The Course Overview This video will give you an overview about the course. This video will give you an overview about the course. This video will give you an overview about the course. What is GatsbyJS? We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter What is GatsbyJS? We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter What is GatsbyJS? We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter What is GatsbyJS? We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter We will discover what GatsbyJS is, talk about what it does, and how it could potentially benefit you in your React projects. • Explore GatsbyJS • See how it works and why it could be a useful tool for you • Learn about the Gatsby community and noteworthy people to follow on Twitter Installing Gatsby and Cloning Our Gatsby Project It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app Installing Gatsby and Cloning Our Gatsby Project It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app Installing Gatsby and Cloning Our Gatsby Project It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app Installing Gatsby and Cloning Our Gatsby Project It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app It is time to get you set up to work with Gatsby for this course. • Installing Gatsby globally and cloning your Gatsby repository • A walkthrough of the structure of our application • Run our app An Overview of Typography and Styling You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS An Overview of Typography and Styling You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS An Overview of Typography and Styling You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS An Overview of Typography and Styling You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS You’ll get a brief overview of typography in Gatsby and the different styling options that are available to you. • Why we are using typography, how it’s set up, and how you can make changes • How we’ll style our application • Other styling alternatives available in GatsbyJS Using React Helmet to Add Metadata We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog Using React Helmet to Add Metadata We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog Using React Helmet to Add Metadata We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog Using React Helmet to Add Metadata We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog We’ll install our first plugin and begin working on strategies that can help improve page rankings for you blog. • Installing gatsby-plugin-react-helmet and discussing why we need it • Creating our seo.js file and adding some basic content • Adding our new SEO component to our blog Creating a New Page and Linking Between Pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages Creating a New Page and Linking Between Pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages Creating a New Page and Linking Between Pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages Creating a New Page and Linking Between Pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages In this video we’ll create a new page together and learn how simple it is to link internally in Gatsby. • Duplicating our index page so we have a dummy page to link to • Adding a temporary element on each page that we’ll use to link pages • Importing Gatsby’s link component and linking our pages Getting Started with GatsbyJSs - Quiz Getting Started with GatsbyJSs - Quiz Getting Started with GatsbyJSs - Quiz Getting Started with GatsbyJSs - Quiz Querying Data with GraphQL. 4 lectures 23:38 Introduction to GraphQL Here, we shall learn about the GraphQL language and experiment with our first queries. • See what GraphQL is and how we can use it in our app • Introduce the GraphQL playground • Write out first GraphQL queries Querying Data in Pages with GraphQL We will start learning how we can use GraphQL within our Gatsby app /p Source Plugins We have taken a brief look at Gatsby plugins, but now it is time to dive deeper, and begin by focusing on the plugins that retrieve our data. • Learn what a source plugin is and what it does • Write a query to retrieve filesystem data • Update our config to retrieve more filesystem...