Working with React Native (TTSREACT5)

Getting Started with React Native is a hands-on, intermediate level web development course geared for experienced web developers who need to build and design applications using React Native. Students will explore the core APIs and Components, applying these skills to the course case study project to create a React Native app in class. This is an intermediate-level course for web developers with prior practical experience working with React.

1.Getting Started with ReactJS

• Introducing ReactJS
• Downloading ReactJS
• Tools
• Trying ReactJS

2: Exploring JSX and the ReactJS Anatomy

• What is JSX?
• Why JSX?
• The ReactJS anatomy

3: Working with Properties

• Component properties
• Configuring Facebook Open-Graph API
• Rendering data in a ReactJS component

4: Stateful Components and Events

• Properties versus states in ReactJS
• Exploring the state property
• Events

5. Component Life cycle and Newer ECMAScript in React

• React component lifecycle
• Other ES (ECMAScript) versions in React

6: Reacting with Flux

• An overview of Flux
• Flux versus the MVC architecture
• Actions
• Dispatchers
• Stores
• Controller-Views and Views
• Revisiting the code

7: Making Your Component Reusable

• Understanding Mixins
• Validations
• The structure of component
• Summary

8: Testing React Components

• Testing in JavaScript using Chai and Mocha
• Testing using ReactTestUtils
• The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
• Testing with shallow rendering

9: Preparing Your Code for Deployment

• An introduction to Webpack
• Advantages of Webpack
• Introduction to Gulp

10: What's NextGetting Started with React Native

• Weather App
• Starting the project
• Expo
• Components
• Custom components

React Fundamentals

Breaking the app into components

7 step process

Step 1: Review

Step 2: Build a static version of the app

Step 3: Determine what should be stateful

Step 4: Determine in which component each piece of state should live

Step 5: Hardcode initial states

Step 6: Add inverse data flow

• Updating timers
• Deleting timers
• Adding timing functionality
• Add start and stop functionality
• Methodology review

Core Components, Part 1

• What are components?
• Building an Instagram clone
• View
• StyleSheet
• Text
• TouchableOpacity
• Image
• ActivityIndicator
• FlatList

Core Components, Part 2

• TextInput
• ScrollView
• Modal

Core APIs, Part 1

• Building a messaging app
• Initializing the project
• The app
• Network connectivity indicator
• The message list
• Toolbar
• Geolocation
• Input Method Editor (IME)

Core APIs, Part 2

• The keyboard

React Router

• Server-side rendering
• Isomorphic applications
• Hot reloading
• Redux React
• Relay and GraphQL
• React Native
• References

Incoming students should have skills equivalent to the topics in, or should have recently attended, this course as a prerequisite:

• TTSREACT3 Mastering React: React, Redux, JSX, Flux, Forms, Unit Testing & More

This intermediate and beyond level course is targeted for experienced web developers with current, solid hands-on experience with React.