Home > Mobile Application Development > Learn React Native
Topic: Learn React Native
- Lesson: Recap of React learnt in Web Application Development Module
- Lesson: Introduction to React Native
- Lesson: Creating UIs with React Native
- Lesson: Components that every app needs
- Lesson: More and more components
- Lesson: Making smooth UIs
- Lesson: Creating a simple Shopping Cart list
- 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