この記事はウェブクルー Advent Calendar 2018 10日目の記事です。
昨日は @wc-takahara さんの「 GoogleAPIを初心者が使ってみて～ランニングコース生成編～」でした。

はじめに

最近、社内でReact Nativeの勉強会が始まりました！
とりあえず何かしらコードを書いてみたいけど、とてつもなく面倒くさがりな私は(フロントエンドとしてどうなの…)
環境構築めんどくさいな〜HelloWorldまでが長いんだよな〜億劫だな〜と思いながら色々調べていて、見つけました。
こんな私にピッタリのサービスを！

Expo Snack

本記事では主に登録方法や使い方についてお伝えしたいと思います。

＜対象者＞

~~環境構築めんどくさいと思いながら~~とりあえず簡単なものをサクッと試したい方
npm とかちょっとよく分からないけどReactNativeやってみたい方
次やる案件がReact Nativeだからアサイン前に軽く触れたい方

そもそもExpoとは

React NativeでiOSやAndroindのビルドを支援するサービスです。

Expo Snack とは

ブラウザ上でコードの動作を確認できるサービスです。
codepen や CodeSandbox ような感じ

Expo Snackに登録する

expo公式のトップにアクセス！
右上のcreate an accountにてアカウント登録を行います。
登録が完了したらログインしてGet Startedを押下し、
こちらに遷移するので、スクロールしてちょっと下の方にあるTry Expo in the browserのOpen Snackを押下。
すると Expo Snack の画面になります！

試してみる

Snackは開くたびに新規でランダムでサンプルコードが出てくるっぽいです。
とりあえずお決まりのHello World 書いてみましょう！
下記の部分を変えるだけです。Change〜の英文を変えてみてください。

<Text style={styles.paragraph}>
    Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>

　↓↓↓


<Text style={styles.paragraph}>
    Hello World
</Text>

実機で見てみる

実機で見るにはiOSまたはAndroidにExpoのアプリをインストールします。

iOS
Android

右上のRunを押下し、出てきたモーダルのQR Codeを選択していただければQRが出てきます。
QRをスキャンしてアプリで開くと、リアルタイムでSnackのコードを実機で確認できます！すごい！

簡単なコードの説明

App.js


// 使いたい機能を取得
// reactからReactとComponentをインポートする
import React, { Component } from 'react';
// react-nativeから使いたい標準コンポーネントをインポートする
import { View, Text, StyleSheet } from 'react-native';

// クラス作成
export default class App extends Component {
// 画面描画
  render() {
    return (
      // div的な。注意としては中にテキストを書くことはできず、本当にただの入れ物
      // style={styles.hogehoge} クラス名的な
      <View style={styles.container}>
         // span的な。テキスト描画には必ずTextで囲う。
         <Text style={styles.text}>Hello world!</Text>
      <View>
    );
  }
}
// スタイル定義
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

その他はドキュメントを読んでみて試してみてください！

まとめ

いかがでしたか？短時間で、簡単にReact Nativeに触れることができました。
どんどんSnackでサンプルを作成して、素敵なアプリを作っていきましょう！
快適開発ライフを〜

最後に

明日は wc-kobayashiT さんです。よろしくお願いいたします！

ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。

開発エンジニアの募集
 フロントエンドエンジニアの募集