Slides of Jump into React-Native, Class 1, at NIC

1. Jump into React-
Native 1/6
Waqqas Jabbar
25th June 2018

2. Course Completion Criteria
At the end of the course
1. Complete the TODO App with all the functionality (Atleast one platform)
2. Pass the test at the end of the course
Ask questions any time
Workshop style - Do actual work here

3. Why React-Native?

4. TODO App - Features
1. Register a new user
2. See a list of tasks
3. Add a new task
4. Mark the task as completed
5. Delete a task
6. Update user’s settings
Patterns
● Directory Structure
● Authentication
● Redux, Redux-Sagas

5. TODO App - Screens
● Splash Screen
● Register Screen
● Task List Screen
● Add Task Screen
● Task Detail Screen
● Settings Screen

6. What we will learn today
1. Setting up the development environment
2. Create a new project
3. Run the project
4. Add project in Git
5. Basics of React.js and React-Native

7. 1- Development Environment Setup
- Windows 10
- Ubuntu 18.04
- MAC High Sierra

8. 2- Project Creation and Walkthrough
JavaScript ES6
Flow
Searching packages
Adding a package
React-Native init
Add to Git
Directory walkthrough, bundler
File walkthrough
Debugging
React.js Basics

9. React.js Basic
https://reactjs.org/
● States
● Props
● JSX

10. Reading
Git
● https://git-scm.com/book/en/v2/Getting-Started-Git-Basics
● https://datasift.github.io/gitflow/IntroducingGitFlow.html
React.js
1. https://reactjs.org/docs/hello-world.html Go through “Main Concepts” section

11. Reference
Introduction to React-Native
https://www.slideshare.net/waqqasjabbar/introduction-to-react-native-97361657
Finding packages: https://js.coach/