 Resources from Tyler Mcginnis in 2022

If you're a web developer who has been itching to get into native development, now is your chance. In this series we'll be talking all about React Native. React Native allows you to build native iOS and Android applications in JavaScript and React.js. 

Regardless of your experience with React, or even with iOS development, my hope is that this series will be beneficial to everyone who is starting out with React Native. We'll jump straight into developing with React Native by looking first at the ecosystem of building React Native apps - including  Xcode, the iPhone simulator, live reload, debugging, and more. 

Once we get our ecosystem set up and our hello world example running using ES5, we'll jump straight into building a fully functioning iPhone app which utilizes many of the best parts of developing with React Native all while covering React.js and refactor to ES6 along the way.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

React Native Fundamentals

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.

Set up Basic iOS Routing with React Native

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.

Use State and Touch Events in React Native

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.

Use Fetch to Load External Data in React Native

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.

Use Images in a React Native Application

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.

Build a Github Repositories Component in React Native

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

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

Hoisting in JavaScript

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.

Pass Data when Changing Routes in React Native

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.

Build a View with React Native's ListView Component

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.

Start Building a React Native Application

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.

Persist data in React Native with Firebase REST API

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.

Understand the fetch API

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

Complete the Notes view in React Native

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.

The "this" keyword: The new and window Binding

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.

Use React Native's Error Handle and ActivityIndicatiorIOS

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.

Use propTypes in Reusable React Native Components

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.

Create a Scrollable React Native Component with ScrollView

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

Build a Reusable React Native UI Component

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.

Navigate to a React Native component

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.

Access Web Pages through React Native's WebView Component

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.

Tyler McGinnis