Skip to content

Latest commit

 

History

History
279 lines (187 loc) · 5.71 KB

02-learn-react-native.md

File metadata and controls

279 lines (187 loc) · 5.71 KB

Home > Mobile Application Development > Learn React Native

Topic: Learn React Native

  1. Lesson: Recap of React learnt in Web Application Development Module
  2. Lesson: Introduction to React Native
  3. Lesson: Creating UIs with React Native
  4. Lesson: Components that every app needs
  5. Lesson: More and more components
  6. Lesson: Making smooth UIs
  7. Lesson: Creating a simple Shopping Cart list
  8. Assessment: Assessment

Lesson 1

Recap of React Learnt in Web Application Development Module

Self Learning Duration
30 mins
Lecture Duration
30 mins
Lab Tutorial Duration
30 mins

Self learning content

Watch videos: https://www.youtube.com/watch?v=tJzZRhNs00I

Recap react principals at https://reactjs.org/tutorial/tutorial.html#what-is-react

Lecture content

Discussion on concepts of React and using JSX to build UIs

Lab and tutorials

Lesson 2

Introduction to React Native

Self Learning Duration
45 mins
Lecture Duration
60 mins
Lab Tutorial Duration
30 mins

Self learning content

Follow creating UIs: https://www.coursera.org/learn/react-native Week 2

Lecture content

  • Concepts of react native
  • Learn how components in React Native maps to native

Lab and tutorials

With this Lab/Tutorial students are starting to build a mobile application using react native that will be incrementally developed through out the module. This is the Mini Project that is major part of the assessment for the module.

  • Proposed app is a shopping cart application
  • Each group can create a new react native app with name of their choice
  • Add project to a git repo and ensure all teammates have access

Lesson 3

Creating UIs with React Native

Self Learning Duration
30 mins
Lecture Duration
60 mins
Lab Tutorial Duration
45 mins

Self learning content

Follow through:

Lecture content

Creating of UIs with Components in RN

  • View
  • Text
  • Button
  • Alert
  • Image
  • TextInput
  • ScrollView
  • StyeSheet
  • Picker
  • Switch

Making use of these elements in practical examples.

Lab and tutorials

  • Create a Login screen
  • Create an About screen with App Name, Version and names and photos of teammates

Lesson 4

Components that every app needs

Self Learning Duration
30 mins
Lecture Duration
120 mins
Lab Tutorial Duration
45 mins

Self learning content

Follow through:

Lecture content

Digging more into React Native components

  • FlatList
  • SectionList
  • Implementing Navigation with React Native (+ explore possible navigators)

Lab and tutorials

  • Create a view with list of "Products"
  • Check-in the code
  • Have all students pull the code, change background colour of the list and run in their own device
  • Using git knowledge, explore how code commits can create you check-points so you can roll back after experimenting.

Lesson 5

More and more screens

Self Learning Duration
30 mins
Lecture Duration
60 mins
Lab Tutorial Duration
45 mins

Self learning content

Follow through:

Lecture content

  • BackHandler
  • DrawerLayoutAndroid
  • PermissionsAndroid
  • ToastAndroid
  • ActivityIndicator
  • Dimensions
  • KeyboardAvoidingView
  • Linking
  • Model
  • PixelRatio
  • RefreshControl
  • StatusBar

Lab and tutorials

  • Add drawer navigation to the Mini project project
  • Create 2 more views with lists for "Promotions" and "Favorites"
  • Check in the code

Lesson 6

Making smooth UIs

Self Learning Duration
45 mins
Lecture Duration
60 mins
Lab Tutorial Duration
30 mins

Self learning content

Watch video: https://www.youtube.com/watch?v=LdKtugH-sb8

Lecture content

  • How to create non-blocking UIs
  • Animated
  • Debugging UI performance issues

Lab and tutorials

  • Create another list for "Shopping Cart"

Lesson 7

Creating a simple Shopping Cart list

Self Learning Duration
None
Lecture Duration
60 mins
Lab Tutorial Duration
60 mins

Self learning content

...

Lecture content

Lesson is aimed for students to put together what they have learnt previous component lessons. This lesson would be a fully hands on sessions to build a better looking Shopping cart View.

Lab and tutorials

  • Polish previously created list views for UI completion

Assessment 2

Learn React Native

MCQ assessment verifying the understanding of the students in the following concepts and areas. Preferably use a gamified assessment tool such as Kahoot.

  • Concepts of React
  • React Native UI Components
  • Best practices of React Native UIs

Review the answers of any common mistakes at the end of the session