【Hello World】TypeScript + React Native for Web + Webpack

今度はTypeScript + React Native for Web + webpack + github pages templateを作ってみました。

こちらにコードはありますのでみてみてね〜

GitHub - jiji-thecat/ts-webpack-rn-hello-world

Contribute to jiji-thecat/ts-webpack-rn-hello-world development by creating an account on GitHub.

はじまり
tsconfig.json
依存の追加
index.web.ts
App.tsx
webpack.config.ts
1. エントリの追加
2. babel-loaderの追加
サンプル
まとめ

はじまり

React Native（以後、RN）を使いたかったのですが、なんだか色々種類がありました。今回はRN for Webを使ってみました。

React: Web Appを作るためのFrame Work
React Native: Mobile Appを作るためのFrame Work
React Native for Web: Web AppでReact Native使うためのFrame Work

このような感じで理解しています。1が最初に登場して、2がモバイルアプリサポートのために登場して、3はモバイルアプリをwebアプリにも使いたいという要望に応えて登場したのかな？（自己解釈）

2,3を使えばマルチプラットフォームなアプリが開発できるため、なようです。

とりあえず流行りに乗って、RN for Webを使ってテンプレを作ります。

まず、ベースとなる以下の記事で作成したテンプレを拡張したいと思います！以下、説明するパラメタなどは新たに追加したものに関してです。

tsconfig.json

ts-webpack-rn-hello-world/tsconfig.json at main · jiji-thecat/ts-webpack-rn-hello-world

Contribute to jiji-thecat/ts-webpack-rn-hello-world development by creating an account on GitHub.

プロパティ	説明
jsx	どのようなjsx codeを生成するか？ .tsxから、.jsにするか.jsxにするか選べるようです。（公式）
moduleResolution	使いたいtargetに欲しいライブラリがないときにライブラリを追加できる

依存の追加

ts-webpack-rn-hello-world/package.json at main · jiji-thecat/ts-webpack-rn-hello-world

Contribute to jiji-thecat/ts-webpack-rn-hello-world development by creating an account on GitHub.

babelやreact-native系の依存するパッケージを追加していきます。

index.web.ts

ts-webpack-rn-hello-world/index.web.ts at main · jiji-thecat/ts-webpack-rn-hello-world

Contribute to jiji-thecat/ts-webpack-rn-hello-world development by creating an account on GitHub.

ルートにindex.html以外にindex.web.tsというファイルを追加しました。

この中で、表示するアプリのコンポーネントを登録し、エントリーファイルとしてロードするようwebpack configを修正します。

App.tsx

ts-webpack-rn-hello-world/src/App.tsx at main · jiji-thecat/ts-webpack-rn-hello-world

Contribute to jiji-thecat/ts-webpack-rn-hello-world development by creating an account on GitHub.

ここでは、TextコンポーネントとButtonコンポーネントを使っています。

このように、RNではコンポーネント（部品）を簡単に利用することができます。

他にも、ScrollViewやTextInputなどさまざまなコンポーネントが提供されています。

webpack.config.ts

ts-webpack-rn-hello-world/webpack.config.ts at main · jiji-thecat/ts-webpack-rn-hello-world

Contribute to jiji-thecat/ts-webpack-rn-hello-world development by creating an account on GitHub.

エントリの追加

  entry: ['./index.web.ts', './src/styles.css'],

entryパラメタに新たなエントリーファイルであるindex.web.tsを追加します。

babel-loaderの追加

ここは正直100％理解できていません。とりあえず公式のいうようにコピペしたのみです。

Multi-platform setup // React Native for Web

もうちょっと色々説明つけてほしいな。。

ts-webpack-rn-hello-world/webpack.config.ts at main · jiji-thecat/ts-webpack-rn-hello-world

Contribute to jiji-thecat/ts-webpack-rn-hello-world development by creating an account on GitHub.

 use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
              presets: ['module:metro-react-native-babel-preset'],
              // Re-write paths to import only the modules needed by the app
              plugins: ['react-native-web'],
            },
          },
          ,
          { loader: 'ts-loader' },
        ],