今から5分でReactNativeを完全理解する

5分理解チャレンジ

はい、おはようございます。僕です。早速ですが今日はネイティブアプリを作るためのJSフレームワークであるReact Nativeを完全理解していこうと思います。

件のツールはこれになります。
React Native · A framework for building native apps using React
これが何かと言うとネイティブアプリを作るためのJSフレームワークです（トートロジー）。

それじゃあ、まずはレギュレーションについてをば……。やはり完全理解というからにはすごいものを作らないといけません。そういうことで、「世界と挨拶するプログラム」を作ることを目標にしていこうと思います。計測開始地点はnpm install -g create-react-native-appをインスコしてからにしていきます。

それじゃあ、よーいスタート。

さわってみた

# Create React Native Appのインスコ（React Native Appを簡単に作れるようになるやつ）
$ npm install -g create-react-native-app
# React Native App 実行
$ create-react-native-app 【プロジェクト名】
? Choose a template: 【テンプレート】
Your project is ready at ***
To get started, you can type:
  cd 【プロジェクト名】
  expo start
$ cd 【プロジェクト名】
$ npm start

これで動かすことができるようになるようです。ということで確認用のアプリを作ります。生成されたApp.jsに以下を書き込みます。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello World!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

んでこれを実行すると挨拶アプリ完成です。

いやー五分でできましたね。世界と挨拶するアプリができました。えっ機能ですか？そんなものは知りませんよ。世界と挨拶する文字を表示するだけです。

完走した感想

これ普通にテキスト表示だけにすると、上の通知領域にめり込むね……。CSSでレイアウト組めるのはいい感じだと思うけど、それ以上の利点が見えてこない……。まだ標準コンポーネント何があるのかよくわかんないから、細かいことできないせいかもしれないけどね。iOSとAndroidの両方で動かせるやったーとか思ってはじめたんだけど、やっぱりKotlinとSwiftも並行で覚えていくとかやっていくのがよさげな気がする。