Get Started (Setup enviroment)

1. Nodejs: https://nodejs.org/en/
2. Java SDK 8: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
3. Xcode, Android Studio: https://developer.android.com/studio/
4. Visual Studio Code: https://code.visualstudio.com/Download
5. Git SCM: https://git-scm.com/download/
6. https://chocolatey.org (Windows)
7. Yarn (https://yarnpkg.com/lang/en/docs/install/#windows-stable)
8. Setup ANDROID_HOME (c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk)
9. Add platform-tools to Path (c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools)
10. Setup JAVA_HOME (https://confluence.atlassian.com/doc/setting-the-java_home-variable-in-windows-8895.html)

Visual Studio Code Extensions:

1. Auto Rename Tag: (Downloads: 1.1M)
2. Bracket Pair Colorizer 2 (Donwloads: 66K)
3. ES7 React/Redux/GraphQL/React-Native snippets (Downloads: 1.1M)
4. React Native Tools (Downloads: 2.9M)
5. Material Icon Theme (Downloads: 5M)
6. One Dark Pro (Downloads: 7.8M)
7. Debugger for Chrome (Downloads: 15.4M)
8. Prettier (Downloads: 7.8M)

Videos:

1. Videos: https://www.youtube.com/watch?v=kNHuLOXR5T0&list=PLWBrqglnjNl31S91FFE63DtuRc9v9LSGl
2. Style Cheat Sheet https://github.com/vhpoet/react-native-styling-cheat-sheet
3. FlexBox: https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG

Session 01: Setup

1. https://facebook.github.io/react-native/
2. https://facebook.github.io/react-native/docs/getting-started
3. Get started: Select tab: Building Projects with Native Code
4. npm install -g react-native-cli
5. Create new react native project: react-native init HelloWorldApp
6. Component Examples: https://facebook.github.io/react-native/docs/tutorial

Session 02 Basic of Props & State

1. Props: https://facebook.github.io/react-native/docs/props
2. State: https://facebook.github.io/react-native/docs/state

Session 03 More Props & State

1. Type-Checking: https://reactjs.org/docs/typechecking-with-proptypes.html
2. Install Package: https://www.npmjs.com/package/prop-types
3. Handle Event within state: https://facebook.github.io/react-native/docs/handling-text-input
4. TextInput ref: https://facebook.github.io/react-native/docs/textinput

Session 04 Styles & Layout

1. Style: https://facebook.github.io/react-native/docs/style
2. Height and Width: https://facebook.github.io/react-native/docs/height-and-width
3. Layout with Flexbox: https://facebook.github.io/react-native/docs/flexbox
4. Package: React-Native-Vector-Icons: https://github.com/oblador/react-native-vector-icons
5. Browse Icons: https://oblador.github.io/react-native-vector-icons/
6. Face Stock: http://pravatar.cc/

Session 05 Handling Events & ListView & Networking

1. Handling Text Input: https://facebook.github.io/react-native/docs/handling-text-input
2. Handling Touches: https://facebook.github.io/react-native/docs/handling-touches
3. ScrollView: https://facebook.github.io/react-native/docs/using-a-scrollview
4. ListView: https://facebook.github.io/react-native/docs/using-a-listview
5. FlatList: https://facebook.github.io/react-native/docs/flatlist
6. SectionList: https://facebook.github.io/react-native/docs/sectionlist
7. Networking: https://facebook.github.io/react-native/docs/network
8. Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
9. Axios: https://github.com/axios/axios
10. Homework: Gallery: http://bit.ly/2D5BMPC

Session 06 React Navigation

1. https://reactnavigation.org
2. StackNavigation
3. TabNavigation
4. DrawerNavigation
5. SwitchNavigation

Session 07 Firebase

Cloud Function

1. Setup firebase tools: npm install -g firebase-tools
2. Login: firebase login
3. Login: firebase logout
4. Init project: firebase init => Choose Cloud Function => Choose Project => Choose Language => SELECT DEFAUT OPTIONS => DONE
5. Hello Function: Uncomment
6. Deploy: firebase deploy

Cloud Filestore

1. Cloud Firestore: https://firebase.google.com/docs/firestore/quickstart
2. Query Data: https://firebase.google.com/docs/firestore/query-data/queries
3. Get Data: https://firebase.google.com/docs/firestore/query-data/get-data
4. Add / Update Data: https://firebase.google.com/docs/firestore/manage-data/add-data
5. Delete Data: https://firebase.google.com/docs/firestore/manage-data/delete-data
6. Realtime Update: https://firebase.google.com/docs/firestore/query-data/listen

React Native With Firebase

1. https://rnfirebase.io/
2. Documents: https://rnfirebase.io/docs/v5.x.x/getting-started
3. Starter Kit: https://rnfirebase.io/docs/v5.x.x/installation/basic-kit

• Manual install for Android (Video): https://youtu.be/_7iKm233n_M
• Manual install for iOS (Video): https://youtu.be/qiOGMcX6Xtw

4. Send Notification (Google API): https://firebase.google.com/docs/cloud-messaging/http-server-ref

• Send a notification (Admin SDK - Cloud Function): https://firebase.google.com/docs/cloud-messaging/admin/send-messages
• Manage Topic: https://firebase.google.com/docs/cloud-messaging/admin/manage-topic-subscriptions

Session 08 React Component & Lifecycle

1. Theory: https://reactjs.org/docs/react-component.html
2. Diagram: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
3. Examples:

Session 09 UI / UX

Session 10 REDUX

1. Theory: https://redux.js.org/introduction/getting-started
2. Usage with React: https://react-redux.js.org
3. Diagram: https://kuanhsuh.github.io/2017/09/28/What-s-Redux-and-how-to-use-it/
4. Install packages: redux, react-redux, (npm isntall --save redux), (npm isntall --save react-redux), (npm isntall --save --dev redux-devtools-extension)
5. Coding:

• actions
• reducers
• components
• store

6. Debug:

• Download tool: https://github.com/jhen0409/react-native-debugger/releases

Session 11 React Native Elements & NativeBase

Session 12 Practice

Session 13 EXPRESSJS & MONGODB

1. Expressjs: https://expressjs.com/en/starter/generator.html
2. Basic Routing: https://expressjs.com/en/starter/basic-routing.html
3. Routing: https://expressjs.com/en/guide/routing.html
4. Mongodb: https://www.mongodb.com/download-center/community
5. Tools: https://www.mongodb.com/download-center/compass
6. Others: RoboMongo: https://robomongo.org/
7. Nodejs Mongodb Driver: http://mongodb.github.io/node-mongodb-native/3.1/
8. Databases with Express: https://expressjs.com/en/guide/database-integration.html

Final: Release

1. Android icon: https://romannurik.github.io/AndroidAssetStudio/index.html
2. iOs icon: https://appicon.co/
3. https://facebook.github.io/react-native/docs/signed-apk-android
4. https://play.google.com/apps/publish

A. Some useful websites

References:

1. https://flatuicolors.com
2. https://github.com/oblador/react-native-vector-icons

B. Expressjs

B.1 References:

1. Offical Site: https://expressjs.com
2. Install CLI tool: https://expressjs.com/en/starter/generator.html
3. Basic Routing: https://expressjs.com/en/starter/basic-routing.html
4. Run server forever: http://pm2.keymetrics.io/ (npm install pm2 -g)
5. Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development (https://nodemon.io)

B.2 Step by step:

1. Install CLI
2. Create a project with express tool
3. Run project: npm start

C. Firebase

1. https://firebase.googleblog.com/2016/01/the-beginners-guide-to-react-native-and_84.html