React Native Fundamentals

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.

Watch User Created Playlist (17)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Start Building a React Native Application

Set up Basic iOS Routing with React Native

Use State and Touch Events in React Native

P

Understand the fetch API

P

Use Fetch to Load External Data in React Native

P

Pass Data when Changing Routes in React Native

P

Use React Native's Error Handle and ActivityIndicatiorIOS

P

Use Images in a React Native Application

P

Use propTypes in Reusable React Native Components

P

Create a Scrollable React Native Component with ScrollView

P

Build a Reusable React Native UI Component

P

Build a Github Repositories Component in React Native

P

Navigate to a React Native component

P

Access Web Pages through React Native's WebView Component

P

Persist data in React Native with Firebase REST API

P

Build a View with React Native's ListView Component

P

Complete the Notes view in React Native

P
react tutorial about Start Building a React Native Application

Start Building a React Native Application

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 Set up Basic iOS Routing with React Native

Set up Basic iOS Routing with React Native

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 Use State and Touch Events in React Native

Use State and Touch Events in React Native

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 Understand the fetch API

Understand the fetch API

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 Use Fetch to Load External Data in React Native

Use Fetch to Load External Data in React Native

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 Pass Data when Changing Routes in React Native

Pass Data when Changing Routes in React Native

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 Use React Native's Error Handle and ActivityIndicatiorIOS

Use React Native's Error Handle and ActivityIndicatiorIOS

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 Use Images in a React Native Application

Use Images in a React Native Application

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 Use propTypes in Reusable React Native Components

Use propTypes in Reusable React Native Components

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 Create a Scrollable React Native Component with ScrollView

Create a Scrollable React Native Component with 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 Build a Reusable React Native UI Component

Build a Reusable React Native 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 Build a Github Repositories Component in React Native

Build a Github Repositories Component in React Native

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 Navigate to a React Native component

Navigate to a React Native 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 Access Web Pages through React Native's WebView Component

Access Web Pages through React Native's 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 Persist data in React Native with Firebase REST API

Persist data in React Native 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 Build a View with React Native's ListView Component

Build a View with React Native's 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 Complete the Notes view in React Native

Complete the Notes view in React Native

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.

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