If you are a beginner React Developer and want to know how to display a list of items on the browser screen then you are at the right place.

click here to read more:
https://www.positronx.io/react-list-example-tutorial-display-list-in-react/

React Native と React Native for macOS の差分

2020年5月19日、MicrosoftからReact Native for macOS公開についてブログでアナウンスがありました。

Announcing React Native for macOS and more · React Native for Windows + macOS

Microsoftは2019年5月7日に多くのコンポーネントをC++で書き直したReact Native for Windowsを公開しており、今回はmacOS用のネイティブライブラリなどが追加されています。

今回、本家FacebookのReact Nativeと比べてどのようなファイルがコミットされているかを調べてみました。

調査は2020年5月29日のmasterで行いました。

• https://github.com/facebook/react-native/tree/f438a6e8f60a5cd10b06f19bc5248f5805fbb739
• https://github.com/microsoft/react-native-macos/tree/9232ace99d095a793bddf00ffda3238cc7078820

トップディレクトリの差分

+ .ado
+ .appveyor
+ Folly
+ ReactApple
+ android-patches
+ danger
- docs
+ double-conversion
+ follybuild
+ glog
+ jsc
+ metadata
+ processor
+ stubs/glog
+ v8-docker-build
+ website/server
+ flowconfig.macos
+ Brewfile
+ CHANGELOG.json
+ CODE_OF_CONDUCT.md
+ KeepingRecent.md
- index.js
- interface.js

概要

トップディレクトリの主な差分は

1. ライブラリの追加
2. Microsoftの管理用と思われるファイル

の2つです。

1. ライブラリの追加

React Native for macOSには以下のライブラリが追加されてました。

ライブラリ名	開発チーム	概要
Folly	Facebook	C++ ライブラリ
Infer annotations	Facebook	Java アノテーションライブラリ
glog	Google	C++ ロギングライブラリ
double-conversion	Google	C++ binary-decimal convertライブラリ

2. Microsoftの管理用と思われるファイル

ファイル / ディレクトリ	概要
.appveyor/config.yml	OSにWindowsを使っていることを特徴としたCI、AppVeyorの設定ファイル
ReactApple/ReactApple.nuspec	.NET用パッケージNuGetのメタファイル
android-patches	"patches-droid-office-grouped" というディレクトリから推測すると、AndroidのOffice用のパッチファイルか。
metadata/repo.json	リポジトリ管理用のjsonファイル。
docsList.js	Websiteのドキュメント管理用？

補足: metadata/repo.json

metadata/repo.json

{
  "description": "Fork of facebook's react-native implementation.  Include additional platform implementations for Mac, Win32 and UWP.  And implementation of the JS bridge against Chakra.",
  "schema": {
    "office": "1.0.0"
  },
  "deployedToProduction": true,
  "complianceTypes": [],
  "inventoryId": ["684c3345-709f-474d-9f83-726e63a64237"],
  "contacts": ["acoates@microsoft.com"]
}

"description": "Fork of facebook's react-native implementation. Include additional platform implementations for Mac, Win32 and UWP. And implementation of the JS bridge against Chakra."

ChakraはIEなどで使われていたJSエンジン。Microsoft EdgeはChromiumベースなのでV8なはず。WindowsのJSエンジンとしてのChakraと思われる。

その他追加されているファイル

ファイル / ディレクトリ	概要
danger/dangerfile.js	GitHub拡張用のJSファイル。bots/dangerfile.js のバックアップ?
jsc	Appleが開発したJSエンジンであるJSC ( JavaScriptCore ) のヘッダーファイルたち。initial コミットから修正なし。
.ado	ローカルにnpmレジストリを作成できる Verdaccio とCI関連のファイル

Reactディレクトリ以下の差分

% diff -rq react-native/React/ react-native-macos/React/ | grep 'Only in react-native-macos'
Only in react-native-macos/React/Base: RCTBridge+Cxx.h
Only in react-native-macos/React/Base: RCTBridge+Cxx.mm
Only in react-native-macos/React/Base: RCTPlatformDisplayLink.h
Only in react-native-macos/React/Base: RCTUIKit.h
Only in react-native-macos/React/Base: macOS
Only in react-native-macos/React/CoreModules: RCTImageEditingManager.h
Only in react-native-macos/React/CoreModules: RCTImageEditingManager.m
Only in react-native-macos/React/CoreModules: RCTImageLoader.h
Only in react-native-macos/React/CoreModules: RCTImageLoader.mm
Only in react-native-macos/React/CoreModules: RCTImageStoreManager.h
Only in react-native-macos/React/CoreModules: RCTImageStoreManager.m
Only in react-native-macos/React/DevSupport: RCTDevLoadingView.h
Only in react-native-macos/React/DevSupport: RCTDevLoadingView.m
Only in react-native-macos/React/DevSupport: RCTDevMenu.h
Only in react-native-macos/React/DevSupport: RCTDevMenu.m
Only in react-native-macos/React/Modules: RCTAccessibilityManager.h
Only in react-native-macos/React/Modules: RCTAccessibilityManager.m
Only in react-native-macos/React/Modules: RCTAlertManager.h
Only in react-native-macos/React/Modules: RCTAlertManager.m
Only in react-native-macos/React/Modules: RCTAppState.h
Only in react-native-macos/React/Modules: RCTAppState.m
Only in react-native-macos/React/Modules: RCTAsyncLocalStorage.h
Only in react-native-macos/React/Modules: RCTAsyncLocalStorage.m
Only in react-native-macos/React/Modules: RCTClipboard.h
Only in react-native-macos/React/Modules: RCTClipboard.m
Only in react-native-macos/React/Modules: RCTDevSettings.h
Only in react-native-macos/React/Modules: RCTDevSettings.mm
Only in react-native-macos/React/Modules: RCTDeviceInfo.h
Only in react-native-macos/React/Modules: RCTDeviceInfo.m
Only in react-native-macos/React/Modules: RCTI18nManager.h
Only in react-native-macos/React/Modules: RCTI18nManager.m
Only in react-native-macos/React/Modules: RCTKeyboardObserver.h
Only in react-native-macos/React/Modules: RCTKeyboardObserver.m
Only in react-native-macos/React/Modules: RCTRedBox.h
Only in react-native-macos/React/Modules: RCTRedBox.m
Only in react-native-macos/React/Modules: RCTSourceCode.h
Only in react-native-macos/React/Modules: RCTSourceCode.m
Only in react-native-macos/React/Modules: RCTStatusBarManager.h
Only in react-native-macos/React/Modules: RCTStatusBarManager.m
Only in react-native-macos/React/Modules: RCTTVNavigationEventEmitter.h
Only in react-native-macos/React/Modules: RCTTVNavigationEventEmitter.m
Only in react-native-macos/React/Modules: RCTTiming.h
Only in react-native-macos/React/Modules: RCTTiming.m
Only in react-native-macos/React/Profiler: RCTFPSGraph.h
Only in react-native-macos/React/Profiler: RCTFPSGraph.m
Only in react-native-macos/React/Profiler: RCTPerfMonitor.m
Only in react-native-macos/React/Views: RCTFontSmoothing.h
Only in react-native-macos/React/Views: RCTModalManager.h
Only in react-native-macos/React/Views: RCTModalManager.m
Only in react-native-macos/React/Views: RCTProgressView.h
Only in react-native-macos/React/Views: RCTProgressView.m
Only in react-native-macos/React/Views: RCTRefreshControl.h
Only in react-native-macos/React/Views: RCTRefreshControl.m
Only in react-native-macos/React/Views: RCTRefreshControlManager.h
Only in react-native-macos/React/Views: RCTRefreshControlManager.m

概要

macOS用のネイティブライブラリ群が追加されてます。macOSプラットフォーム関連として React/Base/macOS ディレクトリが追加されました。

% ls React/Base/macOS
RCTDynamicColor.h
RCTDynamicColor.m
RCTPlatform.m
RCTPlatformDisplayLink.m
RCTUIKit.m

RCTUIKit.m

React Native はUI描画のOSによる差分を吸収し、同じレイアウト構成(YogaによるFlexbox)を構築することが大きな特徴の一つです。

macOSのUIクラスであるUIKitについて、UIImage / NSImageを扱うために書かれたファイル。

NSImage *UIGraphicsGetImageFromCurrentImageContext(void)
{
    NSImage *image = nil;
    NSGraphicsContext *graphicsContext = [NSGraphicsContext currentContext];

    NSValue *sizeValue = objc_getAssociatedObject(graphicsContext, &RCTGraphicsContextSizeKey);
    if (sizeValue != nil) {
        CGImageRef cgImage = CGBitmapContextCreateImage([graphicsContext CGContext]);

        if (cgImage != NULL) {
            image = [[NSImage alloc] initWithCGImage:cgImage size:[sizeValue sizeValue]];
            CFRelease(cgImage);
        }
    }

    return image;
}

CGFloat UIImageGetScale(NSImage *image)
{
  if (image == nil) {
    return 0.0;
  }

  RCTAssert(image.representations.count == 1, @"The scale can only be derived if the image has one representation.");

  NSImageRep *imageRep = image.representations.firstObject;
  if (imageRep != nil) {
    NSSize imageSize = image.size;
    NSSize repSize = CGSizeMake(imageRep.pixelsWide, imageRep.pixelsHigh);

    return round(fmax(repSize.width / imageSize.width, repSize.height / imageSize.height));
  }

  return 1.0;
}

React Native for macOS の歴史

年月	出来ごと
2019年3月6日	v0.0.1-microsoft.0がリリース
2019年5月7日	MicrosoftがReact Native for Windowsを公開
2020年5月19日	MicrosoftのReact Native BlogでReact Native for macOSをアナウンス

はじめに

おはようございます。こんにちは。こんばんは。
ワタタクです。
今回から数回にかけてReact.jsを勉強していこうと思います。

※この記事は初学者用かつ自分の勉強用で書いていきます。
※Macを使っての解説です。

ゴール

Reactを使ってアプリケーションを作れるようになる。
最終的にFirebaseを用いてのチャットボット的な物を作成する。

React.jsとは

公式サイト

• SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。
• Facebook 社によって開発され、Facebook の Web サイトでも利用されています。
• 2020年4月現在の最新バージョンは 16.13.1 です。
• JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。
• JavaScript は ES6 の文法である import やアロー関数を取り入れています。

create-react-appとは

reactの環境開発を簡単に行なってくれるもの

環境構築

何か新しい言語を始めようとするには、最初に環境構築を行うことがほとんどの場合必要ですのでやっちゃいましょう。
自分の場合はReact.jsを触る前にVue.jsを触っているので、nodeやnpmといったものがもうすでに入っていますが、初学者向けに0からやっていきます。
まずはnode.js

あります。（バージョン情報が出ればインストールされています。）
インストールがまだの方はこちらのインストーラーを使うことをお勧めします。

インストールが完了するとnpmも同時に使えるようになります。

npm（Node Package Manager）とは?

• Node.jsのモジュール管理ツールです。
• フロントエンドで使用するJavascriptのパッケージ（例えば、vueといった有名なフレームワーク、gulpなどのビルドシステム等）のインストールとバージョン管理に使います。
• 公式サイト

それでは、いよいよReactアプリを作成します。
以下のコマンドを入力して下さい。

$ npx create-react-app hello

※helloはプロジェクト名です。

実行

$ cd hello
$ npm start

以上。お疲れ様でした。

サーバーアップ

$ npm run build

できたbuildフォルダの中身を本番サーバに置く。

最後に

もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです
次回は基本的な書き方とかやっていきます。

最後まで読んでいただきありがとうございました。
Twitterやってます。良ければチェックして見てください。

reactアプリを作成

npx create-react-app quiz-app

cd quiz-app

ビルドをする。

npm run build

firebase init

firebase deploy

VS CODE プラグイン

Bracket Pair Colorizer

コードブロック毎に{},() を色分けしてくれるので、コードの見通しが若干よくなります

ES7 React/Redux/GraphQL/React-Native snippets

これをいれるとショートカットで沢山のスニペットを使えるようになるので、Reactのコードを書くのがかなり効率化できます。
例えば rfcp というショートカットで

import React from 'react'
import PropTypes from 'prop-types'

function App(props) {
  return (
    <div>

    </div>
  )
}

App.propTypes = {

}

export default App

のようにproptypes付きのファンクショナルコンポーネントを呼び出せます

proptypeを指定するときに例えば ptfrと入力すれば

PropTypes.func.isRequired

とスニペットを呼び出せます。
定型文の入力をショートカットで呼び出せるだけでかなり効率化できます。

Prettier

コードフォーマッター
自動でソースコードのインデントを揃えたり、コーテーションをシングルコーテーションに統一できたりします。

setting → format on save
でチェックボックスをオンにすることでコード保存時に自動で整形してくれます。

setting →　prettier
でラインごとにセミコロンを入れるかとか、コーテーションを統一するかとかの細かい設定は任意で出来ます

EmmetをJSXで有効化しましょう

設定画面で左上のアイコンが三つ並んでる一番左をクリックするとsettings.jsonを開けます。

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

と記入すると、jsxを書いてるときもEmmetの短縮記法が使えますのでタグ打ちが捗ります。

その他 chrome プラグイン

Redux DevTools は redux使うならほぼ必須です。
これを使うとstateの状態やactionの発火状況を詳細に検証したりできます。

以上、備忘録でした。

reduxやuseRecucerで定義するActionですがenumを使うと簡単に定義できるんですがenumはデメリットが多く使わないようにするのがベストプラクティスのようになっています。

個人的には別にどうでもいいかと思うんですがenum使わないで定義する方法を試してみたので載せておきます。

TypeScriptのenumを使わないでreducerを定義

ここでのポイントはas constです。
このキーワードはリテラルの型を保持してくれる効果があります。

const x = {foo: 1}; // {foo: number} 型になってしまう。

const x = {foo: 1} as const; // {foo: 1} 型を保ってくれる。

そして定義したreducerがこちらです。

type State = {
  foo: string;
  bar: number;
};

export const ActionNames = {
  SET_FOO: 'SET_FOO',
  SET_BAR: 'SET_BAR'
} as const;

type Action =
  | {
      type: typeof ActionNames.SET_FOO;
      payload: string;
    }
  | {
      type: typeof ActionNames.SET_BAR;
      payload: number;
    };

export const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case ActionNames.SET_FOO: {
      return {
        ...state,
        foo: action.payload
      };
    }
    case ActionNames.SET_BAR: {
      return {
        ...state,
        bar: action.payload
      };
    }
    default:
      throw new TypeError();
  }
};

せっかくenum用意してくれてるのに残念ですね...

はじめに

フレームワークやライブラリを利用して開発を行うと、やはり少なからず、カスタマイズする必要が出てくることがあります。
今回は、「React」 × 「UIフレームワークのMaterial-UI」を使って開発する際にちょっと手こずったポイントがありましたので紹介です。

対象のコンポーネント 【TextField】

インプットフィールドや、セレクトボックスなど、HTMLタグの<input>として活用できます。

Material-UIについて

Material-UIはもともとあらゆるAPIが用意されており、カスタマイズ性も結構担保されており使いやすい印象です。
しかし、今回紹介するTextFieldコンポーネントで入力させたくないdisabledのUIを変更したい際に問題が出てきました。

基本的なカスタマイズ

基本的に用意されているカスタマイズ方法として、公式ドキュメントをベースにButtonコンポーネントのカスタマイズを行った際のソースコードが以下です。

import React from "react";
import Button from "@material-ui/core/Button";
import FormLabel from "@material-ui/core/FormLabel";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";

const styles = makeStyles(theme => ({
  rootBtn: { // Buttonクラスのrootクラス
    marginRight: "1em",
    backgroundColor: "#ff8800",
    "&:disabled": {
      color: "#bababa",
      backgroundColor: "#dadada"
    }
  }
}));

export default function App() {
  const classes = styles();

  return (
    <div className="App">
      <h1>ボタンの例</h1>
      <div>
        <Button className={classes.rootBtn}>Button</Button>
        <FormLabel>通常デザイン</FormLabel>
      </div>
      <div>
        <Button className={classes.rootBtn} disabled>
          Button
        </Button>
        <FormLabel>disabledデザイン</FormLabel>
      </div>
    </div>
  );
}

上が機能するデザインで、下がdisabledにした場合になります。
公式ドキュメントにあるように、disabledAPIがtrueの場合、rootに対して擬似クラスを宣言するように指示されています。

Pseudo-class applied to the root element if disabled={true}.
参照：公式ドキュメントより

今回、rootクラスにrootBtnを指定して、その擬似クラスにdisabledのスタイルを定義しています。
有効になるトリガーは、disabledのAPIがtrueの場合になるため、下のボタンの時のみこのスタイルが有効になっています。

このように、APIにCSSクラスに用意されたものがあり、簡単にスタイルを環境に合わせてカスタマイズすることができるのは大きな魅力です。

TextFieldでのカスタマイズ

上記のButtonコンポーネントの感じで作っていたら失敗しました。
全然スタイルが効かない。仕方なく、ドキュメントを眺めていても一向に解決方法は見当たりませんでした。

そこで、構造を見にいくと、TextFieldコンポーネントは、いくつかのコンポーネントが合わさって構成されているようでした。

<!-- inputタグラップされて形成されている -->
<div class="TextField">
  <input class="input-base">
  ...
  </>
</>

disabledのスタイルは<input>で定義されているようだったので、どうにかここを上書きする方法が必要でした。

ローカルルールを参照させる $ruleName

こんな書き方があったなんて知らなかった。

const styles = {
  root: {
    '&$disabled': {
      color: 'white',
    },
  },
  disabled: {},
};

これを参考にスタイルするとうまくスタイルが効きました。
ソースは以下です。

import React from "react";
import TextField from "@material-ui/core/TextField";
import FormLabel from "@material-ui/core/FormLabel";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";

const styles = makeStyles(theme => ({
  rootTxt: {
    marginRight: "1em",
    "&$disabled": {
      color: "#bababa",
      backgroundColor: "#dadada"
    }
  },
  disabled: {}
}));

export default function App() {
  const classes = styles();

  return (
    <div className="App">
      <h1>テキストフィールドの例</h1>
      <div>
        <TextField
          InputProps={{
            classes: {
              root: classes.rootTxt,
              disabled: classes.disabled
            }
          }}
          defaultValue="TextField"
        />
        <FormLabel>通常デザイン</FormLabel>
      </div>
      <br />
      <div>
        <TextField
          InputProps={{
            classes: {
              root: classes.rootTxt,
              disabled: classes.disabled
            }
          }}
          defaultValue="TextField"
          disabled
        />
        <FormLabel>disabledデザイン</FormLabel>
      </div>
    </div>
  );
}

さいごに

今回取り上げたのは、TextFieldコンポーネントですが、他にもコンポーネントを掛け合わせた形で表現されているコンポーネントはたくさんあります。
そういったコンポーネントもおそらくこの書き方が必要になってきそうですね。

前提として知っているのと知っていないので、使い方や設計が大きく変わってきそうだなと感じながら今回はなんとか解決することができました！

紹介した内容のSnadbox

P.S

気がついた頃にはこんなこと書いてた！

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.