Become a Master
This course and others like it are available as part of our Frontend Masters video subscription.
React Native (feat. Redux)
Scott Moss
Udacity and Ex-Hack Reactor
By coding along with Scott in this course, you’ll be able to take the same skills you use on the web and use them to build cross-platform, native applications in JavaScript. You'll learn how to Android and iOS emulators, use React components to build native layouts, Dev Tools to debug your app, React Native package manager to add native gradients, buttons, tabs, and icons... plus you'll learn to build reusable components to share within your app and re-use in other apps and learn to use Redux to architect data flow and manage state.
Published: October 27, 2016
Table of Contents
React Overview
Introduction
Scott Moss begins his React Native course with a brief introduction and some initial thoughts about the React Native platform. With React Native, the developer can “Learn once, build everywhere”. Just like on the web, user interfaces are built with React components and all application logic is JavaScript.React Components & React Native
Scott introduces both React components and the React Native platform. React components utilize JSX to create encapsulated views and have a well-architected separation of concerns. Since React components are not tied to the DOM, they can be used in the React Native cross-platform development environment.Exercise: Creating a Todo App with React
In this exercise, you will create a web-based Todo application using React. Scott begins the exercise by walking through a few React basic concepts like how to work with JSX, handle events, and store state. - https://github.com/FrontendMasters/react-web-starterCreating a Todo App Solution Part 1
Scott begins walking through the solution to exercise 1. In this first part, he writes the JSX for the Todo application and creates the events for handling user input. The application manages state for the list of todo items as well as the current todo item.Creating a Todo App Solution Part 2
Scott demonstrates a couple alternative ways the Todo application could have been created. Instead of handling the state for the new todo, Scott references the input field directly. He also adds the ability to remove a todo item.
Developing with React Native
Foundational Components of React Native
React Native adds a number of foundational components that are used in place of traditional HTML components. For example, a <View> component will replace an HTML <div> and a <TextInput> component will replace an <input>.Exercise: Convert the Todo App to React Native Part 1
In this exercise, you will set up a new React Native application from the command line. After generating a new application, Scott explains the file structure and the entry files for each platform. He also runs an Android version of the application and views it view through the Genymotion emulator.Exercise: Convert the Todo App to React Native Part 2
Scott continues walking through the exercise which demonstrates how to move from a React web application to a React Native application. He uses the React Native components in place of the traditional web components and codes the handling of application state. Scott also introduces the TouchableHighlight component and talks about how it differs from a Button component.Convert the Todo App to React Native Solution Part 1
Scott demonstrates the full solution to the exercise which converts the Todo web application to React Native. He creates a solution that will work both on iOS and Android and gets the initial application initialized and running.Convert the Todo App to React Native Solution Part 2
Scott concludes the exercise for converting the Todo application to React Native. He uses native components in place of the web components and uses the React Native event APIs for handling user input. Once he finishes, Scott spends a few minutes answering audience questions.React Native Developer Tools
Before moving on to the next exercise, Scott spends some time talking about the developer tools available when creating a React Native application. He explains the difference between live-reloading and hot-reloading. He also demonstrates the features in the JS developer mode in the Android emulator.Exercise: Debugging & Logging
In this exercise, you will connect the application to the Chrome debugger and get more familiar with the React Native debugging workflow. You’ll also begin viewing logging information on both iOS and Android.
Styling & Asynchronous Data
Styling in React Native
Styles in React Native are created by using the StyleSheet.create method. This method is passed an object containing each style and their properties. Every component in React Native defaults to a Flexbox display. Most CSS properties are available and use camel-case instead of hyphenation.Common Styling Properties
Scott spends some time talking through a number common styling properties like width, height, position, padding and margin. While percentage values are not supported, he demonstrates how the Dimensions object can be used to create style values based on the width or height of the screen.Styling a Specific Platform
In some cases styles or application logic need to be customized based on the platform or platform version. One way of doing this is to include “.ios” or “.android” in the file name. Another way is to write conditional statements using the Platform.OS or Platform.VERSION properties.Exercise: Styling the Todo Application
In this exercise, you will use the React Native styling API to style the Todo applicationStyling the Todo Application Solution
Scott walks through the solution to the styling exercise. - https://github.com/FrontendMasters/react-native-todo/tree/styles-solutionHTTP Requests
Just like in a web application, React Native uses the Fetch API for making external HTTP requests. Scott demonstrates how to use the Fetch API to load JSON data from reddit.com . The data is requested in the componentWillMount lifecycle method and stored in a state property.Exercise: Saving Todo Items to the Server
In this exercise, you will use the Fetch API to save todo items to the server. Before starting the exercise, Scott walks through how to install and run a local JSON server that can accept CRUD requests and will save items in a local JSON file.Saving Todo Items to the Server Solution
Scott walks through the solution to the exercise on saving todo items to the server. - https://github.com/FrontendMasters/react-native-todo/tree/fetch-solution
Redux Overview
Introduction to Redux
Redux is a state solutions that will create a single state store for the application. Actions can then be created to modify the state which then trigger the application to re-render. Scott creates a simple Redux example to demonstrate these concepts and explain the role of reducers in state management.Adding the Store to the Component
Now that the store and reducers are created, they must be added to the component. Scott uses the Provider object to pass the store into the top-level component of the application.Using Redux with Synchronous Actions
In order to simplify this example, Scott modifies the Reddit application to use synchronous data rather than the asynchronous Fetch API. He then maps the properties from the application to the desired state from Redux.Mapping Actions to Properties
The last step is to map the actions to their corresponding properties. Scott creates an ADD_POSTS action and uses the dispatch object to trigger that action and send they action’s payload.Audience Questions: Redux Dev Tools, RxJS, and Redux Advantages
Scott begins wrapping up the first day with some audience questions. He shares some thoughts on RxJS vs. Redux and talks about some of the advantages and disadvantages of Redux.Audience Questions: React/React Native and Facebook, Application Showcase
Scott spends a few more minutes answering audience questions. He talks about the React and React Native big picture and the role Facebook played in the direction and development. He also shares a few real-world applications from the React Native showcase page.Redux Review
To conclude the first day with one more look at Redux. He walks through the existing code to reinforce the immutable nature of reducers and further explain the flow of data through the application.
Redux In-Depth
Sweat Book App Overview
Scott begins the second day of the React Native course with a quick overview of the Sweat Book application he will be building. The application allows users to track exercises throughout an entire workout. Exercises are added from a search screen and displayed in the exercise list. - https://projects.invisionapp.com/share/N27U0U08C#/screens/170997132_HomeCreating the Store and Reducers
Before starting the first exercise related to the Sweat Book application, Scott spends some time reviewing state management with Redux. Scott demonstrates these concepts on the Todo application. He beings by created a store and the reducers for managing the todo items.Adding Actions and the Provider
With the store and the reducers created, Scott adds the actions that will be dispatched as todo items are added. He also copies over some styling so the todos will be rendered correctly. Before moving on, Scott introduces the Provider utility which gives components access to the state.Connecting Redux to the Component
Scott uses the connect object from the react-redux library to gain access to the store. He then maps the desired actions to their corresponding methods in the component. These methods use the Redux dispatcher to send the action type and payload to the reducers for handling.Subscribing to the State
Once the component is connected to the store, it can subscribe to the state by mapping the state object to the corresponding component properties. Scott does this by binding the todos reducer to a property named “todos” inside the component. - https://github.com/FrontendMasters/react-native-todo/tree/redux-solutionStepping through the Redux Callstack
Now that Redux is wired up to the component, Scott sets a few breakpoints and enables the debugger. He steps through each call that’s made between the application and the Redux store. This helps better understand the flow of data from the time a user adds a todo item to the time the store is updated.Exercise: Creating the Sweat Book Root Component
In this exercise, you will initialize the Sweat Book application. You’ll create the root component. You will also prep the Redux portion of the application with the necessary store, reducers, and actions. - https://github.com/frontendmasters/sweat-book/tree/bootstrapCreating the Sweat Book Root Component Solution Part 1
Scott walks through the solution to the first Sweat Book exercise. He creates a Root component which contains the Welcome component wrapped in a Provider and each reducer for the application is placed in a separate JavaScript file. Scott also spends a couple minutes explaining the difference between container components and UI components.Creating the Sweat Book Root Component Solution Part 2
Scott continues demonstrating the solution to the first Sweat Book exercise. He explains the actions he created and talks about how they are organized. He also answers a few audience questions about sharing constants between components and global variables.
Routing Strategies
Routing in React Native
Routing in React Native is still evolving. Scott talks a little about the history of routing in React web applications and the direction it’s heading on Native. For the Sweat Book application, he’ll be using a tabbed navigation system to avoid the need for a complex router.Using the React Native Scrollable Tab View Component
Scott demonstrates how to use the react-native-scrollable-tab-view component inside the Todo application. The root component is wrapped in a <TabView> and given a tabLabel property. Any subsequent tabs are added within they same <TabView> component. - https://github.com/skv-headless/react-native-scrollable-tab-viewExercise: Adding Tab Navigation
In this exercise, you will add the tabbed interface to the Sweat Book application. The Welcome screen is not included in the tabs so the user will navigate from the welcome screen to the tabbed interface. - https://github.com/FrontendMasters/sweat-book/tree/tabs-startAdding Tab Navigation Solution
Scott walks through the solution to the Tabbed Navigation exercise. He created a boolean variable to indicate wether the workout has started or not for determining if the welcome screen should be shown. - https://github.com/FrontendMasters/sweat-book/tree/tabs-solution
Third-Party Libraries
React Native Package Manager
There are many third party libraries that can be used with React Native. They libraries include native implementations for both iOS and Android. Since each platform has its own dependencies, the React Native Package Manager (rnpm) can be used to maintain these libraries and keep them current within a React Native project.React Native Linear Gradient Library
Scott uses the React Native Package Manager to install the react-native-linear-gradient library. Even though this library uses RNPM, it installs into the node_modules folder and is used like any other module. After getting the module installed, Scott demonstrates how to import it into the Todo application and apply a linear gradient to the background. - https://github.com/react-native-community/react-native-linear-gradientExercise: Applying Gradients
In this exercise, you will use the React Linear Gradient library to apply gradients to both the home screen and the current workouts screen. For extra credit, you can find a vector icon plugin and add the icons into the application. - https://github.com/FrontendMasters/sweat-book/tree/3rd-partyApplying Gradients Solution
Scott walk through the solution to the Applying Gradients exercise. - https://github.com/FrontendMasters/sweat-book/tree/bootstrap-solution
UI Components
UI Components
User Interface components encapsulate their functionality and state. Scott demonstrates how to create the CurrentWorkout component which will occupy the first tab within the <TabView>. He also walks through the other UI components that will need to be created in the Sweat Book application.Reusable UI Components
Since the CurrentWorkout component and the modal window will both have a top bar, Scott decides this should be a reusable UI component so it can be used in both places. He starts by making a Topbar UI component and styling it to display within the CurrentWorkout component. Scott then talks a little about how it will be made to be reusable.Exercise: Creating a Modal
In this exercise, you will create an ExerciseModal component for adding exercises. This component will reuse the Topbar component and be triggered when the add exercise button is pressed.Creating a Modal Solution Part 1
Scott begins walking through the solution to the Creating a Modal exercise. He has created state properties for both the currentWorkout and the exerciseModal. The currentWorkout property will access the state for the current workout. The exerciseModal property is used to determine the modal’s visibility.Creating a Modal Solution Part 2
Scott continues the demonstration of the Creating a Modal exercise. He talks about how to implement closing the modal. He also sets some breakpoints and steps through the execution of the code to illustrate the changes in state.TextInput Component
Scott adds a TextInput component into the top bar of the modal to search for exercises. Once that’s in place, he spends a few minutes debugging some other issues in the application and answering some audience questions.ListView Component
The exercise list will be displayed in a ListView component. A ListView component has a datasource which not only provides data, but also specifies an algorithm for determining when the data has changed. Once the ExerciseList component is created, Scott adds it into the modal.Finishing the Exercise Modal
With all the components, Scott now finishes the exercise modal and implements the search functionality. As a search term is entered, a fuzzy search will be performed and return a list of rows to populate in the ExerciseList component.Exercise: Adding an Exercise
In this exercise, you will create a new action and implement the add-exercise functionality. When an exercise in the modal is tapped, it will be added to the currentWorkout array. - https://github.com/FrontendMasters/sweat-book/tree/exerciseAdding an Exercise Solution
Scott walks through the solution to Adding an Exercise. He uses a TouchableOpacity component to make the exercises tappable. When the user taps on an exercise an action is dispatched and it is added and displayed in the current workout list. - https://github.com/frontendmasters/sweat-book/tree/list-view-solution
Asynchronous Redux
Redux Thunk Middleware
In order for Redux to handle asynchronous actions it requires a piece of middleware. Scott introduces the redux-thunk library and describes how a thunk acts as an asynchronous function that dispatches actions when it resolves. He then implements an async action in the Todo application.Calling Async Actions
With the asynchronous actions created, Scott can update the Todo application to call these actions to load and create todo items. Once the application is updated Scott starts the JSON server and tests the async operations in the simulator.Exercise: Async Redux
In this final exercise, you will use a utility function called createAsyncCreator to generate the async operations in the Sweat Book application. You’ll also update the application to dispatch the new async actions. - https://github.com/frontendmasters/sweat-book/tree/list-view-solutionAsync Redux Solution
Scott walks through the solution to the Async Redux exercise. He also spends somme time explaining why he is using the createAsyncCreator function to generate the async operations. - https://github.com/FrontendMasters/sweat-bookAudience Questions & Resources
Scott spends the final minutes of the workshop answering some audience questions and sharing a few resources. Scott recommends looking at the React Native Docs for information on testing. He also talks about a few React Native competitors and how their approaches differ.