More than 5 years have passed since last update.

プログラミングをあまりしたことない人がReactNativeを始めるときに知っておきたいことや参考資料のまとめ

Last updated at 2018-07-14Posted at 2018-01-10

おって書き足していきますmm

この資料について

ReactNativeで開発をはじめるために知っておいた方がいいことまとめ
新人が入った時とかの参考資料に。

想定読者レベル：

js以外の他の言語を、研修/もしくは授業等で習った経験があるくらいで、実務経験はなし

※可能限りわかりやすいように、正確性よりは雰囲気重視

プログラミング基本/教養として

※ 本を読む

リーダブルコード
(プログラムはなぜ動くのか)
(オブジェクト指向でなぜつくるのか) // immutable.jsとか関数型とか、いろいろ出てくる前にまずオブジェクト指向についてしっておく。JAVAとかを授業で習った前提ではあるが。

Javascript(ES6)

※ javascriptにはes6という新しい規格の記法があり、基本はes6やそれより新しいの記法を使うのがベター

追記： 2018-07-13

jsに関しては下記がよかった
★ ECMAScript 2018時代のJavaScript入門書
https://asciidwango.github.io/js-primer/

let / const
関数やらオブジェクトやら
- [JavaScript] オブジェクトの基礎 - Qiita
class
アロー関数 / function
import/export
promise
async / await

※ 一歩踏み込めるのであれば、コールバック地獄や、スコープ汚染、プロトタイプ汚染など（昔の？）JSの課題だったところもさらっておく。
中上級者になるためのJavaScript【知識編】 - Qiita

React / ReactNative

Reactとは?

コンポーネントという部品を組み立てて　画面をつくることができるやつ
出来る限り短く説明するReact.js入門 - Qiita

ReactNativeとは

reactでネイティブアプリをつくるやつ

追記： 2018-07-13

reactnativeexpress が一通りまとまっていてすごくいい
http://www.reactnativeexpress.com/

一度盲目的にチュートリアルをやってみる。
Learn the Basics · React Native
qiitaにも勉強してみた的な記事がたくさんあるので読んでみる。やってみる。

参考：デバッグツールの使い方

(iOS)
メニュー:コマンド + D
リロード:コマンド + R

(Android)
メニュー:コマンド + M
リロード:大文字のRを二回押す

component

componentとは
- View(見た目)を構成するパーツのようなもの
- React-native で実装してくときに一番触ることが多い(たぶん

基本的な構成

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native' //ReactNativeのコンポネント。使うものをimportする

class App extends Component { //ReactのComponentを継承して、コンポネントを作っていく
  constructor(props) {
    super(props)
    this.state = { count: 0 } //コンポネント内での状態を管理するにはstateを使う。stateが更新されると、renderが呼ばれてviewが更新される
  }

  componentDidMount() { //lifecycleイベント。コンポネントがmountしたときなどのイベントに処理を書く時に。
  }

  onPress = () => { 
    this.setState({
      count: this.state.count+1
    })
  }

 render() { //Viewの描画の本体的な場所。returnでjsxを返す。
   return (
     <View style={styles.container}> //このViewもComponent(react-nativeの) styleなどのpropsを渡していく
       <TouchableOpacity
         style={styles.button} 
         onPress={this.onPress} //propsにはfunctionも渡せる
       >
         <Text> Touch Here </Text>
       </TouchableOpacity>
       <View style={[styles.countContainer]}>
         <Text style={[styles.countText]}>
            { this.state.count !== 0 ? this.state.count: null} // {}で囲った中にjsもかける
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({ //CSS的な感じでスタイルを書いていく
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  },
  countContainer: {
    alignItems: 'center',
    padding: 10
  },
  countText: {
    color: '#FF00FF'
  }
})

AppRegistry.registerComponent('App', () => App) //アプリのエンドポイント

renderメソッド/jsxとは
- 出力するViewのテンプレートみたいなもの
- htmlみたいな感じでviewをかける
- React.jsのJSXを使ってみる - Qiita
- stateかpropsが更新されたタイミングで呼ばれる。自動的に。
  - 逆にいうとstateを更新するとrenderが走ってしまう。
stylesheet
- CSSのようなもの
state
- コンポーネントの中の状態管理
props
- コンポーネントの外から渡されるデータやコールバック。
- コンポーネントが関数だとすると引数みたいなイメージ
life cycle イベント
- React.jsのComponent Lifecycle - Qiita