Working with React Native (TTSREACT5)

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

This “skills-centric” course is about 50% hands-on lab and 50% lecture, designed to train attendees in core modern web development skills, coupling the most effective techniques with the soundest industry practices. Throughout the course students will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises, and lab review. Our courses include a wide range of supporting materials and labs to ensure all students are appropriately challenged or assisted at all times.