Intro to GraphQL. Pulling in dynamic content from GraphQL API. Constructing data variables. Replacing GraphiQL with GraphQL Playground
Sourcing Gatsby blog post content from local Markdown files. Iterating over API data to list posts.
Gatsby installation, pages, links, shared components, layouts, styling, plugins, CSS modules and active nav menu items.
Preventing repetitive API requests by creating a new action called fetchPostsAndUser to store author data before header component loads.
Fetching author data by matching author ID from posts in a React-Redux based blog app.
Covers file structure, action creators, reducers, combining reducers, provider & connect. Sample app with a song list built with Redux data. Updating state with action creators.
How to fetch data from an API inside React using Redux and Redux-Thunk. Using that data to display a list of blog posts.
Explains the Redux cycle in a React app. Redux replaces the standard state cycle in a React app, making it more manageable for large applications. Covers Actions, Action Creators, Dispatch, Reducers, State and Redux Store.
Creating a responsive masonry style image grid in React. Will also work for cards. This method uses componentDidMount so will not work with statis site generators like Gatsby.
Mapped arrays in React require each item to have a unique hey. This post covers why and how to implement them.
Making API requests with Axios, using Async Await for returned data. Looping over returned data. Axios custom client.
Intercepting the default form behaviour. Sending information from child (form) to parent (App) by invoking callback functions.
In uncontrolled elements the value is stored in the DOM, in controlled elements the value is stored in the application inside the component with state.
Handling user input into a form asynchronously with onInputChange method
Moving Components out of the source directory into their own directory.
Moving conditional statements outside of the render function in React components.
How to change the className of a component based on a set of conditions, which results in conditional styling of components.
How to set a default value for a prop in React
How to pass State into a child component as a prop.
Introduction to the React Component lifecycle. componentDidMount and other component lifecycle functions