React Native Fundamentals

87 minutes

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.

pro-course-rss-logo

PRO RSS Feed

React Native: Up and Running

React Native: Basic iOS Routing

React Native: State and Touch Events

P

React Native: fetch API introduction

P

React Native: Using fetch to load external API data

P

React Native: Passing data when changing routes

P

React Native: Error Handling and ActivityIndicatorIOS

P

React Native: Using the Image component and reusable styles

P

React Native: Reusable components with required propType

P

React Native: Create a component using ScrollView

P

React Native: Build a Separator UI component

P

React Native: Build a Github Repositories component

P

React Native: Navigate to the Repositories component

P

React Native: Using the WebView component

P

React Native: Persisting data with Firebase REST API

P

React Native: Build a Notes view with the ListView component

P

React Native: Complete the Notes view

P
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.

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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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.

Presented by:

Tyler McGinnis

Partner at React Training. Google Developer Expert.

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