Working with React Native (TTSREACT5) Training

Who Should Attend?

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

Working in a hands-on learning environment led by our expert React technical team member, attendees will learn about and explore:

• Getting Started with React Native
• React Fundamentals: 7 steps of app development
• Building a React Native App / Case Study
• Core Components
• Core APIs

If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate.  We offer additional related React, Redux, Angular, web development, scripting, programming and design courses which may be blended with this course for a track that best suits your objectives.

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