React Native v2 - Setup

發表於 分類於

前言

最近要轉換跑道學習開發 React Native，目前學習的課程是 Kadi Kraman 的 React Native v2 ，之前完全碰過 App 的開發，所以寫這篇文的時候是我學習 React Native 第一天，主要是講講基本的 Setup，但應該會跳過 Native 的 Setup，單純只使用 Expo。

我認為這門課程適合的人：

  • 會使用 React 的人
  • 沒碰過 React Native 的人，而且對 React Native 有興趣

課程最終會做出一個簡單的 React Native App，功能就是可以顯示現有的調色盤、檢視調色盤的細節、彈出 Modal 新增調色盤等等。

大概就這樣，因為初學的關係，內容應該會有諸多錯誤，有誤的地方也麻煩不吝指正，感恩感恩。

Getting Started with Expo

[Expo] Getting started with Expo

基本上可以參考 React Native 官方文件的 Quick Start with Expo CLI

Getting Started with Plain React Native

這章節我先略過，感覺很麻煩，後續有時間看的時候會再補上。

Adding a Linter

Adding a linter

主要是安裝 React Native 的 eslint plugin，首先輸入：

yarn add eslint @react-native-community/eslint-config --dev
  • eslint - the code linter for JavaScript
  • @react-native-community/eslint-config - a community-built eslint configuration for React Native

再來於 root 新增 .eslintrc.js 檔案，在檔案裡面加上：

// .eslintrc.js

module.exports = {
  root: true,
  extends: '@react-native-community',
};

讓 linter 知道我們用了什麼 extends。

另外還要調整 prettier 的設定檔，所以我們要新增 .prettierrc.js，然後再裡面加上：

// .prettierrc.js

module.exports = {
  bracketSpacing: true,
  singleQuote: true,
  trailingComma: 'all',
};
  • bracketSpacing - adding a space around brackets, e.g. import { useState } from 'react'; vs import {useState} from 'react';
  • singleQuote - using single quotes for strings, e.g. import React from 'react' vs import React from "react"
  • trailingComma - adding a trailing comma after array arguments (the default is not to have a trailing comma for the last element of the array)

Debugging

如果 Expo 在手機裝置上 debug 的方式蠻酷的，就是搖手機，帥吧！

  • on device - shake the device (yes, really!)
  • iOS simulator - Cmd + D
  • Android emulator - Cmd + M on Mac, Crl + M on Windows/Linux

搖手機之後可以看到幾個 debug 工具，目前覺得最有用的應該就是「Debug Remote JS」，可以在 Chrome 打開 dev tool 來看 console。

「Show Element Inspector」我目前感受不到它的用處，因為是在手機裡面 inspect element，眼睛真的是會看到脫窗。

另外，除了熟悉的 console.log 以外，console.warn 和 console.error 也是很棒的除錯工具。

References

React Native, v2