 Resources from Christian Nwamba in 2021

Learn how to use the react-spring library to animate our React applications. Start with the `useSpring` hook and end with the `useTransition` hook with React Router for transitions between your routes! 

You'll get the skills to begin using the react-spring library and add animation to your React components.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Spring Animation in React with React Spring

Bite-size video tutorials for badass web developers.

egghead

How to Extend a GraphQL API

Collection of top tips and tricks based on recommendation, popular demand and personal preferences.

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

VS Code Tips and Tricks

Creating files and folders in VS Code get boring quickly when you are using the file or context menu. With the following steps, you can supercharge how you create folders and files:

1. [Install this extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.create-file-folder&WT.mc_id=egghead-screencast-chnwamba)

2. Hit CTRL + OPTION + N

3. Type the path of the file you want to create and hit ENTER

Recursively Create Folders and Files in VS Code

Whether you are having a hard time with catching up to classes or async await or maybe you have legacy code written with constructor functions and promises -- you can refactor them with just one-click away in your VS Code editor.

This feature is built in and if you are interested in powering up your VS Code refactor game, you can use this extension --> https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor&WT.mc_id=egghead-screencast-chnwamba

Refactor Constructor Functions and Promises to ES6 with One Click in VS Code

Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

docker

Use [Hasura](https://hasura.io/), an open source GraphQL engine to setup a backend.

You need to have Docker installed. You can [install](https://docs.docker.com/install/) from the Docker website.

Set up a GraphQL Backend with Hasura and Docker

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Intercept requests from a GraphQL mutation using a [Serverless Function](https://azure.microsoft.com/en-us/services/functions/?WT.mc_id=egghead-screencast-chnwamba). Use this function to encrypt user's passwords before persisting them to the database.

Encrypt Passwords with a Serverless Function

In this lesson, we'll extend our User table mutation to accept username and password arguments. Then we'll intercept this mutation with the serverless function that we have set up.

Extend a Mutation with a Azure serverless function with GraphQL Actions

Create a [Serverless Function](https://azure.microsoft.com/en-us/services/functions/?WT.mc_id=egghead-screencast-chnwamba) and test it locally.

Configure and Use a Azure Serverless Function

PostgreSQL is a powerful, open source object-relational database system.

postgres

Use a GUI to create a Postgres table for your GraphQL engine and add some test data to it.

Add a Postgres Database Table to a Hasura GraphQL Backend 

In this lesson, you'll learn how to implement smooth image scrolling using React Spring's [useSpring hook](https://www.react-spring.io/docs/hooks/use-spring)

You will use an `onMouseMove` event to get the image and mouse coordinates and `set` `useSpring` with the offset. You can then style the animated element with the `backgroundPositionX` and `backgroundPositionY` CSS properties. 

Animate CSS Background Position With the useSpring Hook

Using the `useTransition` hook from React Spring can make your todo list look and feel a lot more polished. 

In this lesson, you'll learn how to configure `useTransition` and its three animation states.

Create Smooth List Transitions With the useTransition Hook

React Spring's `useTransition` can be used with React Router to create smooth transitions between your routes!

In this lesson, you will configure `useTransition` and create its three animated states. You will then map over the transitions and return React Router's Switch and Routes wrapped in an `animated.div` element.

Create Route Transitions with React Spring and React Router

Pass a `to` property to React Spring's [useSpring]([https://www.react-spring.io/docs/hooks/use-spring](https://www.react-spring.io/docs/hooks/use-spring)) to chain together multiple animations asynchronously.

In addition to `props`, `useSpring` also returns `set` and `stop` methods. In this lesson you will see how the `stop` method doesn't abruptly stop your animation, but instead tries to reset your animation back to where it was before it took off.

Chain Together Multiple Animations With the useSpring Hook

In this lesson React Spring's [useSpring](https://www.react-spring.io/docs/hooks/use-spring) hook is used to animate CSS properties.

You will also learn how to use `animated` to extend native elements to receive animated values.

Animate Elements With the useSpring Hook

Learn how to set up a blog with Gatsby and deploy your blog to [Azure](https://azure.microsoft.com/en-us/free/?WT.mc_id=staticwebapps-video-chnwamba). 

While you are at it, you will learn how to automatically setup GitHub actions so that subsequent changes you make to your blog are deployed automatically.

Deploy a Gatsby Static Site with Azure and GitHub Actions

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

GraphQL Yoga is an open source server utility tool based on Express that simplifies how developers build GraphQL servers. This lesson shows how quick it is to get started with Yoga by writing simple types and resolvers. It also shows you how to test and inspect a GraphQL server/schema using the GraphQL playground.

Build a Simple GraphQL Server with GraphQL Yoga

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Some websites are less interactive and more informative. These websites just need a simple setup and we can manage and update them using Markdown. An example of such are documentation websites, online labs/guides, blogs, and even some commercial websites.

Vuepress reduces the time spent on setting up a website down to as simple as writing a configuration object and creating Markdown files. It then transforms and generates a website for you based on these two ingredients.

This lesson shows how to quickly get started with Vuepress and showcases some of it's important configs.

Build A Markdown-Based Static Website with Vuepress

Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript & Node.js.

prisma

Tools like Firebase give you a powerful API that connects directly with your client apps. Though powerful, Firebase can be difficult when writing complex data to the database or querying for a complex data structure.

GraphQL, on the other hand, has a powerful API too and an easy Graph spec to query and write to your data source. Unlike Firebase, it doesn't come with a data persistence layer.

Prisma is an open source database layer for GraphQL projects. It serves as both an ORM and also hides the complexity of writing complex resolvers.

This lesson shows how, without a server, you can Firebase-like GraphQL database that your client can talk directly with.


Build a Graphql Serverless Database for Your Client Apps Using Prisma

React forms are redundant, non-declarative and repetitive. React Formik gives you a simpler declarative API for building self-contained forms in React.

In this lesson, we'll refactor a Vanilla React form to us Formik to show how simple forms can be. If you are interested in how the Vanilla React form was built, you can watch [Build and Validate a Form in Vanilla React](https://egghead.io/lessons/react-build-and-validate-a-form-in-vanilla-react).

Self-Contained Forms in React using Formik

Learn how to make forms and validate form fields using the onBlur event without any external React helper library/component.

With this knowledge, you will understand what problem the [next lesson](https://egghead.io/lessons/react-self-contained-forms-in-react-using-formik) is trying to solve.

Topics

Instructors

Content Type

Free or Pro

Christian Nwamba