React Native Roadmap 1. 開發環境安裝 2. 生成 React Native 專案 3. 編輯器安裝 4. Debug Your App

1. React Native 開發快速上手
2017.11.06 - Phoebe Pan

2. React Native Roadmap
∎ 開發環境安裝
∎ 生成 React Native 專案
∎ 編輯器安裝 ESLint
∎ Debug Your App

3. Write Anywhere
LEARN
ONECE

4. Who’s using
React Native?
Facebook Instagram Airbnb Skype Tesla

5. 環境設定
Windows
∎ python - v2.7
∎ NPM - v4.6.1
∎ Node - v6.11.4
∎ NVM - v1.1.6
∎ choco - v0.10.8 (only windows)
∎ java - v1.8.0_151
∎ Android SDK
∎ Android Studio
∎ Powershell (windows native)
∎ GIT
∎ VS Code (Editor)
MacOS
∎ HomeBrew
∎ NPM - v4.6.1
∎ Node - v6.11.4
∎ NVM - v1.1.6
∎ java - v1.8.0_151
∎ Android SDK
∎ Android Studio
∎ Xcode
∎ GIT
∎ VS Code (Editor)

6. Create React
Native Project
∎ Create React Native App
∎ react-native-cli

7. Create React
Native App
+

8. react-native-cli
+
$ react-native run-android
$ react-native run-ios

9. How to Run
App?

10. (typeof Symbol
=== 'function' ?

11. WHAT IS THE BEST?
Editor
順手習慣就好

12. VSCode
WebStorm
DECO
WHICH ONE IS POWERFUL?

13. Setting up
Editor
∎ Visual Studio Code

14. Visual Studio Code
∎ 檔案 > 喜好設定 > 設定
∎ 貼上以下設定 vscode 自動格式化程式碼

15. Install Plugin
∎ React Native Tools 自動完成功能
∎ React-Native/React/Redux
snippets for es6/es7 實用程式碼
片段提示
Other VSCode Extensions
∎ Prettier
∎ ESLint
∎ vscode-icons
∎ Rainbow Brackets
∎ Color Highlight
∎ Auto Close Tag
∎ Auto Complete Tag
∎ Auto Rename Tag
Visual Studio Code

16. Project Linting

17. Airbnb/JavaScript
Style Guide
60,000+StarsFrom Github Users

19. ∎ 安裝ESlint套件: 這是npm套件，可裝在專案中或全域中
∎ 開發工具要使用對應的擴充 (外掛): 幾乎每個開發工具中都有，可以作即時檢 查
∎ 專案中要有ESlint的設定檔: 有各種格式，本文最下面有簡單的 說明
ESLINT 安裝

20. ∎ Run npm install -g eslint
∎ VSCode 安裝 ESLint 外掛
∎ .eslintrc.json
在專案資料夾安裝 eslint

21. How to Debug Your App?
1. run App on your simulator
2. Enable “Debug Remote JS”
3. open chrome
4. 使用 Chrome 開發者工具
5. Print Somthing
6. App Reload

22. ● React Native 快速學習
● 從一個中國的古代智慧深入了解 Redux
待續 ...

23. THANKS!Any questions?
E-mail me: papashong1111@gmail.com