React

  • React は React.js(ReactJS) と記載されることもある
  • JSX と呼ばれる記法を使う
  • React と React Native のコードをある程度共通化する方法
  • React を理解するためには webpack(バンドラ), babel(トランスパイラ) も理解する必要がある

Create dev environment

$ export PATH=$PATH:./node_modules/.bin
$ npm i --save-dev create-react-app
$ create-react-app testapp
$ cd testapp
$ npm start
## ブラウザが開いて localhost:3000 でReactアプリが起動する

$ npm run build
$ ls -l build

Develop

$ npm start
$ vi src/App.js
  -> browser auto reload

Directory structure

$ ls -1 src
App.css
App.js
App.test.js
actions/
components/
containers/
reducers/
index.css
index.js
registerServiceWorker.js

react-router の導入

$ npm install --save react-router-dom

query-string を処理する

$ npm install --save query-string

redux の導入

React Native Firebase

react-native init firestoreapp
cd firestoreapp/
npm install --save react-native-firebase
  • package.json で”babel-preset-react-native”: “4.0.0”に書き換える(5.0.0 は動かない)

  • npm install

  • Firebase のページで iOS の追加

    • iOS bundle ID: com.codelogue.firestoreapp
    • App nickname:
    • App Store ID:

  • Download GoogleService-info.plist をダウンロード

    • ios/firestoreapp/GoogleService-Info.plist に保存

  • Xcode の Project 設定欄, General > Identity > Bundle Identifier に上記の IOS bundle ID を設定する

  • link

react-native link
  • cocoapod インストールと設定
sudo gem install cocoapods
cd ios
pod init

vi Podfile

platform :ios, '9.0'

target 'firestoreapp' do
  pod 'Firebase/Core'
  pod 'Firebase/Firestore'
end

pod install

vi .gitignore
ios/Pods

vi ios/{Project Name}/AppDelegate.m

#import <Firebase.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

vi App.js

export default class App extends Component<Props> {
  constructor() {
    super();
    this.ref = firebase.firestore().collection("messages");
    this.ref.add(["abc"]);
  }
  • Xcode の File > Add File to で GoogleService-Info.plist を追加する
  • ios/[YOUR APP NAME].xcproj の代わりに ios/[YOUR APP NAME].xcworkspace を使う

React Native

環境設定

  • Install Xcode
  • Run Xcode and agree license
  • Install Homebrew
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew -v
  • Install Nodebrew
$ brew install nodebrew
$ nodebrew -v
$ echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile
  • Install Node.js
$ mkdir -p ~/.nodebrew/src
$ nodebrew ls-remote
$ nodebrew install-binary v9.8.0
$ nodebrew ls
$ nodebrew use v9.8.0
$ nodebrew ls
$ node -v
v9.8.0
$ npm -v
5.6.0
  • Downgrade npm
$ npm install -g npm@4.6.1
$ npm -v
  • Install watchman
$ brew update
$ brew install watchman
  • Install React Native
$ npm install -g create-react-native-app

※native コードを混ぜてアプリ開発する場合は上記の代わりに以下
$ npm install -g react-native-cli
  • Create Project
$ create-react-native-app MyProject
$ cd MyProject
$ npm start
  • Install “Expo Client” on iPhone
    • iPhone と開発機を同じ Wifi ネットワークに接続する
    • Expo Client で QR コードを読み取る
    • Got it ボタンを押す

React Native 開発ライブラリ

  • redux
  • react-native-router-flux
    • react-navigation
  • redux-persist
  • react-native-config

開発環境

Prettier

  • ライブラリインストール
$ npm install -g eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import prettier-eslint prettier-eslint-cli eslint-plugin-jest

##$ npm i --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import prettier-eslint prettier-eslint-cli eslint-plugin-jest
  • Prettier, eslint の拡張機能を導入
  • 表示>コマンドパレット>user settings
{
"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true
}

Tips

ナビゲーションメニューの作り方

React コンポーネントを別ファイルで定義し，インポートする方法

# index.js

import HomeScreen from './screen/HomeScreen';

# ./screen/HomeScreen

import React, { Component } from 'react';

export default class HomeScreen extends Component {
render() {
return ();
}
}

Camera をコントロールする

実機デプロイ時に node のパスエラーがでる

xcode からデプロイがうまくできない

  • Project 設定を開く（左上のプロジェクト名を選択）
    • General > Identity の Bundle Identifier を変更する
    • General > Signing でアカウントを追加する
    • アカウントは Manage Certificates で iOS Deployment を作成しておく
    • General > Deployment Info で Deployment Target を設定する（OS バージョン）
  • 上記と同じことを XXXTests に対しても行う

Reference
comments powered by Disqus