Egghead Instructor Tyler McGinnis

Tyler McGinnis

Partner at React Training. Google Developer Expert.



Unlock all of Tyler's PRO Lessons
click for instant access!

Browse Tyler McGinnis's lessons.

showing 38 lessons...

Building a React.js App: Utilizing Stateless Function Components

The "this" keyword: The new and window Binding

The "this" keyword: Explicit Binding with call, apply, and bind

Hoisting in JavaScript

The "this" keyword: Introduction and Implicit Binding

Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

P

Building a React.js App - ES6 Refactor: Routing without Mixins

P

Building a React.js App - ES6 Refactor: propTypes in ES6

P

Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

P

Building a React.js App - ES6 Refactor: Non Components

P

Building a React.js App: componentWillReceiveProps and React Router

P

Building a React.js App: Rendering a UI of Dynamic Data

P

Building a React.js App: Making Server Requests in React with Axios

P

Building a React.js App: Transitions with React Router

P

Building a React.js App: Managing State in Child Components

P

Building a React.js App: Component Validation with PropTypes

P

Building a React.js App: Using ReactFire to Add Data Persistence

P

Building a React.js App: State, Props, and Thinking in React

P

Building a React.js App: Basic Routing with React Router

P

Building a React.js App: Up and Running with React and Webpack

Building a React.js App: Notetaker Introduction

React Native: Complete the Notes view

P

React Native: Build a Notes view with the ListView component

P

React Native: Persisting data with Firebase REST API

P

React Native: Using the WebView component

P

React Native: Navigate to the Repositories component

P

React Native: Build a Github Repositories component

P

React Native: Build a Separator UI component

P

React Native: Create a component using ScrollView

P

React Native: Reusable components with required propType

P

React Native: Using the Image component and reusable styles

P

React Native: Error Handling and ActivityIndicatorIOS

P

React Native: Passing data when changing routes

P

React Native: Using fetch to load external API data

P

React Native: fetch API introduction

P

React Native: State and Touch Events

P

React Native: Basic iOS Routing

React Native: Up and Running

react tutorial about Building a React.js App: Utilizing Stateless Function Components

Building a React.js App: Utilizing Stateless Function Components

5:01 react

As of React 0.14 we can now create components with functions rather than React.Component or createClass. In this video, we'll walk through transferring all our Class Components to Stateless Function Components.

js tutorial about The "this" keyword: The new and window Binding

The "this" keyword: The new and window Binding

3:09 js

In this lesson we talk about the "new binding" as well as the "window binding" for rules three and four of how to understand the "this" keyword in JavaScript.

js tutorial about The "this" keyword: Explicit Binding with call, apply, and bind

The "this" keyword: Explicit Binding with call, apply, and bind

4:32 js

In this lesson we talk about .call, .apply, and .bind in order to understand "explicit binding", or the second rule of discovering what the "this" keyword is referencing in JavaScript.

js tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 js

In this lesson, we'll walk through variable, function declaration, and function expression hoisting.

js tutorial about The "this" keyword: Introduction and Implicit Binding

The "this" keyword: Introduction and Implicit Binding

5:58 js

In this lesson we introduce the "this" keyword in JavaScript as well as talk about "implicit binding" or the first rule in discovering what the "this" keyword is referencing.

react tutorial about Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

7:37 react PRO

In this lesson, we’ll finish refactoring our application to ES6. Along the way, we’ll learn how to get route parameters in React Router without mixins as well as learn about re-base, a library for building React applications with Firebase in ES6

react tutorial about Building a React.js App - ES6 Refactor: Routing without Mixins

Building a React.js App - ES6 Refactor: Routing without Mixins

4:23 react PRO

In this video, we’ll walk through refactoring the routing of our application to get away from mixins and be compatible with JavaScript Classes through context.

react tutorial about Building a React.js App - ES6 Refactor: propTypes in ES6

Building a React.js App - ES6 Refactor: propTypes in ES6

2:50 react PRO

In this video, we’ll refactor our Repos and UserProfile components and along the way we’ll learn how to utilize propTypes in React with JavaScript classes.

react tutorial about Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

Building a React.js App - ES6 Refactor: createClass to JavaScript Classes and propTypes

9:15 react PRO

In this video, we’ll walk through refactoring all of our note components to learn how to go from createClass to utilize JavaScript classes to build our React components as well as how to handle propTypes with ES6.

react tutorial about Building a React.js App - ES6 Refactor: Non Components

Building a React.js App - ES6 Refactor: Non Components

9:49 react PRO

In this video, we’ll walk through refactoring all of our non component files to utilize new ES6 features like the module system, template strings, destructuring, and arrow functions.

react tutorial about Building a React.js App: componentWillReceiveProps and React Router

Building a React.js App: componentWillReceiveProps and React Router

5:18 react PRO

In this lesson, we’ll learn how React Router uses the componentWillReceiveProps life cycle method in order to give you any route changes that occurs in your application. We’ll leverage this to fetch new data about different users when the user requests that data.

react tutorial about Building a React.js App: Rendering a UI of Dynamic Data

Building a React.js App: Rendering a UI of Dynamic Data

4:08 react PRO

In this lesson, we’ll fix up our UserProfile component as well as our Repos component to more elegantly display the data we’re getting from the Github API.

react tutorial about Building a React.js App: Making Server Requests in React with Axios

Building a React.js App: Making Server Requests in React with Axios

9:30 react PRO

In this lesson, we’ll walk through implementing Axios into our application in order to communicate with the Github API.

react tutorial about Building a React.js App: Transitions with React Router

Building a React.js App: Transitions with React Router

5:30 react PRO

In this video, we’ll walk through how to use React Router to transition from one Route to another while passing that new Route data via route parameters.

react tutorial about Building a React.js App: Managing State in Child Components

Building a React.js App: Managing State in Child Components

10:26 react PRO

In this video, we’ll walk through how to better manage your state by learning how to manipulate the state of a parent component from a child component.

react tutorial about Building a React.js App: Component Validation with PropTypes

Building a React.js App: Component Validation with PropTypes

4:04 react PRO

In this video, we’ll add PropTypes to some of our existing components to ensure that each component gets the data it needs to function properly.

react tutorial about Building a React.js App: Using ReactFire to Add Data Persistence

Building a React.js App: Using ReactFire to Add Data Persistence

14:09 react PRO

In this video, we’ll tie in ReactFire from Firebase in order to implement persistence into our application for our Notes component as well as walk through how to properly display a list of data.

Click here for JSON data to seed your database.

react tutorial about Building a React.js App: State, Props, and Thinking in React

Building a React.js App: State, Props, and Thinking in React

12:00 react PRO

In this video, we’ll build out the skeleton of our main React.js components. We’ll talk about how to think in terms of components as well as learn about state and props.

react tutorial about Building a React.js App: Basic Routing with React Router

Building a React.js App: Basic Routing with React Router

10:34 react PRO

React Router is the most popular, and arguably the best solution for adding Routing to your React application. In this video, we’ll talk about the ideology around React Router as well as set up basic routing for our application.

react tutorial about Building a React.js App: Up and Running with React and Webpack

Building a React.js App: Up and Running with React and Webpack

7:57 react

In this video, we’ll talk about JSX and learn the necessity of Webpack and specifically babel-loader for JSX to JavaScript transformation. We’ll also set up our basic architecture and build our very first React component.

react tutorial about Building a React.js App: Notetaker Introduction

Building a React.js App: Notetaker Introduction

1:32 react

In this video, we introduce our sample application and discuss our objectives for this series on React.js.

react tutorial about React Native: Complete the Notes view

React Native: Complete the Notes view

2:38 react PRO

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.

react tutorial about React Native: Build a Notes view with the ListView component

React Native: Build a Notes view with the ListView component

9:37 react PRO

Displaying lists of data efficiently is an important aspect of native applications. React Native provides the ListView component to accomplish this. We will use the ListView component to display our application's notes that we persisted in Firebase.

react tutorial about React Native: Persisting data with Firebase REST API

React Native: Persisting data with Firebase REST API

3:28 react PRO

For our demo React Native application, we want to persist some notes about Github users. To make that quick and easy, we are going to take advantage of FireBase's REST API to have data persistence in minutes.

react tutorial about React Native: Using the WebView component

React Native: Using the WebView component

4:20 react PRO

We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them.

react tutorial about React Native: Navigate to the Repositories component

React Native: Navigate to the Repositories component

2:36 react PRO

Now that we've created the React Native component for our repositories view, we still need to wire it into the routing so that we can visit its view.

react tutorial about React Native: Build a Github Repositories component

React Native: Build a Github Repositories component

5:52 react PRO

We'll walk through building a Repositories component which receives an array of repositories on Github and loops over those creating a list of React Native View components.

react tutorial about React Native: Build a Separator UI component

React Native: Build a Separator UI component

2:02 react PRO

In this lesson we'll create a reusable React Native separator component which manages it's own styles.

react tutorial about React Native: Create a component using ScrollView

React Native: Create a component using ScrollView

7:20 react PRO

To show a list of unchanging data in React Native you can use the scroll view component. In this lesson, we'll map through the data we got back from the Github API, and fill complete ScrollView component for the user profile.

react tutorial about React Native: Reusable components with required propType

React Native: Reusable components with required propType

2:50 react PRO

In this React Native lesson, we will be creating a reusable Badge component. The component will also make use of propTypes to validate that its required data is being passed in when it is used.

react tutorial about React Native: Using the Image component and reusable styles

React Native: Using the Image component and reusable styles

7:03 react PRO

Let's take a look at the basics of using React Native's Image component, as well as adding some reusable styling to our Dashboard component buttons.

react tutorial about React Native: Error Handling and ActivityIndicatorIOS

React Native: Error Handling and ActivityIndicatorIOS

2:51 react PRO

With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ActivityIndicatorIOS with our HTTP requests in order to give the user feedback about data loading.

react tutorial about React Native: Passing data when changing routes

React Native: Passing data when changing routes

2:51 react PRO

As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component.

react tutorial about React Native: Using fetch to load external API data

React Native: Using fetch to load external API data

6:26 react PRO

The way you make HTTP requests in React Native is with fetch. In this video, we'll add integration with the github API into our app using fetch.

react tutorial about React Native: fetch API introduction

React Native: fetch API introduction

4:20 react PRO

The way you make HTTP requests in React Native is with the Fetch API. In this video we'll talk about Fetch and how to work with promises.

react tutorial about React Native: State and Touch Events

React Native: State and Touch Events

7:07 react PRO

In React, components manage their own state. In this lesson, we'll walk through building a component which manages it's own state as well as using TextInput and TouchableHighlight to handle touch events.

react tutorial about React Native: Basic iOS Routing

React Native: Basic iOS Routing

6:00 react

In React Native you utilize the NavigatorIOS component in order to implement routing. In this tutorial, we'll walk through the app we'll be building in this series as well as how to add routing to your app.

react tutorial about React Native: Up and Running

React Native: Up and Running

9:58 react

We'll download the requirements for getting started with React Native, refactor our app to ES6, walk through debugging, and talk about the philosophy behind React and React Native.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?