# React Native Roadmap

## 安裝開發環境

請遵照官網 [React Native 搭建開發環境](https://reactnative.dev/docs/environment-setup)，React Native CLI + Windows + Android

須注意之處：

### 1. 替換 JDK 為 [OpenJDK](https://jdk.java.net/java-se-ri/8-MR3)
並把 java-se-8u41-ri\bin 設定至環境變數 Path 中

### 2. Android Studio IDE
- Android Gradle, Gradle: File > Project Structure > Project
- 請見 .\android\build.gradle 的 com.android.tools.build:gradle: x.x.x
- SDK Tool
- Android SDK Build-Tools: Android API xx.x.x 請見 .\android\build.gradle > buildToolsVersion
- Emulator
- Platform-Tools
- Intel x86 Emulator Accelerator (HAXM installer): 若有開啟 Window 功能的 Hyper-V 記得關掉，否則跑模擬器會發生衝突藍屏
- SDK Platforms: 選 Android API Level 對照的 Android 版本, e.g. API 29.0.2 對應 Android 9
- AVD
- TC 20: 4.3in 400 * 800
- TC 75: 4.7in 720 * 1280
- x86 Images: x86_64 Android
### 3. 安裝 [react-native-debugger](https://github.com/jhen0409/react-native-debugger)

___

## 先備知識

* Html, CSS
* box model
* flex
* 單位: px, pt, %, em, rem, vw, vh
* Javascript
* Primitive types
* scope chain
* First-class Function
* http, user event
* Promise, async/await
* this
* class
* Event Loop

___

## 學習路線

* React Main Conpect
* Component
* [Components and Props](https://reactjs.org/docs/components-and-props.html)
* State and Lifecycle
* Handling Events
* Conditional Rendering
* Lists and Keys
* Composition
* [Hooks](https://reactjs.org/docs/hooks-intro.html)
* [Lifecircle](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
* React Native
* Workflow
* [Running On Device](https://reactnative.dev/docs/running-on-device)
* Fast Refresh
* Debugging
* Design
* [Style](https://reactnative.dev/docs/style)
* Height and Width
* Layout with Flexbox
* Images
* Interaction
* [Handling Touches](https://reactnative.dev/docs/handling-touches)
* Guides (Android)
* [Publishing to Google Play Store](https://reactnative.dev/docs/signed-apk-android)
* Generating an upload key
* Setting up Gradle variables
* Adding signing config to your app's Gradle config
* Generating the release APK

* React Native Library
* [@react-navigation](https://reactnavigation.org/docs/getting-started)
* [react-hook-form](https://react-hook-form.com/get-started#ReactNative)
* [react-i18next](https://react.i18next.com/)
* [@react-native-community/async-storage](https://react-native-community.github.io/async-storage/docs/install)
* axios
* more component library: [source](https://github.com/jondot/awesome-react-native)

___

## 練習

1. HelloWorld App
2. TodoList App