TP3058

React Native Training

React Native is used by organizations worldwide to create cross-platform phone/tablet apps with one code base. This means that you can write code that will run on iPhones, iPads, and Android phones and tablets without having to rewrite it in two or more languages -- just one. And that one language is easy to learn if you know React and JavaScript because it is React and JavaScript!

Introduction Course Outline

Furthermore, these apps run natively and can be deployed to the Apple AppStore or the Google Play store, not web apps that run in some adapter or translator. So they're faster and more reliable.

In this React Native Training course you'll learn to use React Native to create cross-platform native apps quickly and easily with a 50/50 mix of lecture and real-world labs. You'll start from scratch and build up to a comprehensive app which uses modern techniques and best practices to consume RESTful data from a NodeJS/Express server and present it to the user in a multi-screen, interactive app.

Objectives

Upon completion of this React Native Training course, the student should be able to:

• Create cross-platform iOS and Android apps

• Set up a device emulator on your laptop and deploy apps to it

• Use expo to create and run iOS and Android apps

• Explain the architecture of a device app

• Apply the most useful React Native components

• Write app code that works differently on the different platforms

• Use flexbox on devices to control the layout of your apps

• Style your app efficiently using best practices

• Use stack navigators, drawer navigators and tab navigators to change app scenes

• Consume RESTful data in a handheld device and present it to the user

Audience

Seasoned developers who want to create iOS and Android apps.

Prerequisites for this React Native Training Course

A very strong grasp of React, Redux and advanced JavaScript. Please ask about our JavaScript and React/Redux courses which will prepare you for this course.

Duration

Four days

Outline for React Native Training

Chapter 1. Course Overview

Chapter 2. Hello React Native

a. What is React Native?

b. What does it do for us? Why choose it?

c. Pros and cons

d. Architecture

e. Sharing with web projects

f. What React Native code looks like

g. Leveraging your React knowledge

Chapter 3. React and Redux reviews (when needed)

a. Redux reminder

b. Reducers, actions, state, store, and middleware

c. React reminder

d. SFCs vs class-based components

e. Composition

f. JSX structure and rules

g. props

h. state

i. Controlled and uncontrolled components

j. Virtual DOM vs the real DOM

Chapter 4. The Development Process

a. Where do I even start?

b. react-native vs. create-react-native-app

c. Which is better for given situations

d. The React Native team's recommendations

e. What is expo?

f. Creating a new React Native app

g. How to run it on a tethered device

h. How to run it on a wireless device

i. How to run it in an Android emulator

j. How to run it on an iOS simulator

k. Debugging in a browser window

l. Logging, breakpoints, stepping through

m. YellowBoxes and RedBoxes

Chapter 5. Single-value Controls

a. Components overview

b. Categories of components

c. Text

d. Text props and events

e. TextInput

f. props and events and the event object

g. Image

h. Differences between HTML and React Native images

i. Reserving space for them

j. Local images vs remote images

k. resizeMode

Chapter 6. Platform-specific Development

a. How can we develop differently on the different platforms?

b. Why would we ever do this?

c. Technical roadblocks

d. The DatePicker - iOS vs Android

e. Using the Platform module

Chapter 7. Layout Components

a. Components review

b. View

c. SafeAreaView

d. ScrollView

e. Pinch-to-zoom

f. KeyboardAvoidingView

g. How to create modal views

h. Controlling the OS's status bar

Chapter 8. Flexbox for Native Layouts

a. Why flexbox?

b. Where it came from

c. Flexbox on the web is NOT flexbox on native

d. Containers and items

e. flexDirection

f. flexBasis vs width/height

g. flexShrink, flexGrow

h. The flex shorthand

i. justifyContent and alignContent

j. flexWrap

Chapter 9. Styling React Native Apps

a. How React Native styles differ from CSS

b. How to apply styles

c. How to control style inheritance

d. Style arrays

e. Four methods of defining styles

f. Common properties

g. Cross-platform fonts

h. Conditional and programmatic styles

Chapter 10. Navigation

a. What is navigation, really?

b. How to get React Navigation

c. The three types of navigators

d. StackNavigator

e. Routing object

f. Navigation config

g. How to pass params when navigating

h. TabNavigators

i. Three types of TabNavigators

j. How to set icons

k. DrawerNavigator

l. Examples and demos

Chapter 11. Ajax in React Native

a. Why it must be different on a device

b. The fetch API

c. How to show a loading indicator

d. How to make requests and populate affordances

e. Security in a native environment

Chapter 12. Pressables and Buttons

a. The Button API

b. Button events and props

c. Why touchables?

d. Pressables

e. Why work with Pressables

f. How to work with Pressables

Chapter 13. List Components

a. Components review

b. Pickers

c. FlatList

d. SectionList

Frequently asked React Native Training Questions

What is React used for?

React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

What is React Native?

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities. Furthermore, an incomplete port for Qt also exists.

Why take a React Native Training course with Web Age?

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.There’s never been a better time to learn React Native and take a React Native Training course.

What is the difference between React and React Native?

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a mobile web app, an HTML5 app, or a hybrid app; you build a real mobile app that's indistinguishable from an app built using Objective-C or Java.

Can I take React Native Training courses online?

Yes! We know your busy work schedule may prevent you from getting to one of our classrooms which is why we offer convenient React Native training courses online to meet your needs wherever you want. We offer our React Native Training courses as public instructor-led React Native training courses or dedicated instructor-led React Native training courses. Ask us about taking a React Native Training course live online.