---
# System prepended metadata

title: React Native Roadmap

---

# 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
