DNET_ReactNative

ReactNative

• 戻る
  • React
  • クロスプラットフォーム開発ツール
    • Flutter
    • React Native
    • Cordova (PhoneGap)

概要

• Viewしか扱わないReactがベース

• まだまだ不安定らしい（2019年3月）。

• エコシステムが拡大し過ぎて
  取り巻く環境が複雑化している。

詳細

特徴

• JavaScriptと、JSXと呼ばれるXMLライクなマークアップを使って実装。

• １つのコードで、iOSとAndroidの両方のプラットフォームで動くものが作れる。

• WebViewではなく、ネイティブで描画される（モバイルUIコンポーネントが描画される）。
  （ネイティブ描画故、仮想DOMを介してのDOM操作は行われない）

• JavaScriptの実行ランタイムが、Node.jsではなく、JavaScriptCoreランタイム。
  （コノため、Node.jsネイティブのnpmライブラリは使用できない。）

• プラットフォームの機能であるカメラや位置情報といったものも利用できる。

• JavaやObjective-Cのライブラリを自分で書いて拡張できる。

用途

• スマホには、Flutterがあるので、スマホ開発用と言うより、

• React Native for Windows（でO365開発）の様な用途に適合しそう。

辛い話

• React Native開発のつらい点まとめ – MMiyauchi Blog
  https://mmiyauchi.com/?p=1526

• React Native でアプリ開発をして
  良かったところ・ツラかったところ - BizReach Tech Blog
  https://tech.bizreach.co.jp/posts/300/react-native/

• ログミーTech（テック）

• ナカザンドットネット

Airbnbの話

• 【翻訳】React Native at Airbnb: The Technology - Studio Andy
  http://studio-andy.hatenablog.com/entry/react-native-at-airbnb-the-technology

• AirbnbがReact Nativeの採用をやめる話で思ったこと｜masaya｜note
  https://note.com/msykd/n/na31eccde03ae

• AirbnbがReact Nativeをやめたことに対する世間の反応 - Togetter
  https://togetter.com/li/1239438

...

その他

React Native for Windows

React Native for Windows

C/C++のライブラリを自分で書いて拡張できる。

React Native for Web

React Native for Web

ReactNative vs Flutter

ReactNative vs Flutter

参考

• React Native - Wikipedia
  https://ja.wikipedia.org/wiki/React_Native

• いつ ReactNative を使っても大丈夫か - mizchi's blog
  https://mizchi.hatenablog.com/entry/2018/06/20/115539

• React Native製アプリのクオリティを
  上げるために工夫した事 - 週休７日で働きたい
  https://blog.craftz.dog/lessons-learned-from-creating-my-mobile-app-to-build-a-high-quality-react-native-app-dcf021ce37ef

• ウィンドウ(Windows)にreact nativeの開発環境を構築する方法
  https://dev-yakuza.github.io/react-native/install-on-windows/

reactnative.dev

• React Native · A framework for building native apps using React
  https://reactnative.dev/

Qiita

• React Nativeとは何なのか
  https://qiita.com/Iwark/items/7c27e919bb71f8b256f6

• ReactとReact Nativeでコードを共通化し，
  web / android / iOS (+PC)クロスデバイス開発
  https://qiita.com/tuttieee/items/7c66691fe6cc244053de

  • tuttieee/ReactCrossDeviceTodoExample:
    Sample app running on iOS / android / web (+ electron) using React, React native, Redux
    https://github.com/tuttieee/ReactCrossDeviceTodoExample

• Expo ではじめる ReactNative 開発環境
  https://qiita.com/mizchi/items/4bcc82cbf4bbe8050993

• 【入門】はじめての React Native
  https://qiita.com/nskydiving/items/41e446ef5c821359ab79

• React Nativeでnpmライブラリを使う
  https://qiita.com/takehiro224/items/d60243820b069197e4ba

• Windows

  • ReactNativeの開発環境を構築する話(Windows編)
    https://qiita.com/nekoniki/items/054c22f3072141bf6aea

  • WindowsにReact Native開発環境をインストール
    https://qiita.com/kik4/items/b3a01ef3578bdc95188a

  • 【連載】初めてのReact Native + Expo開発環境構築入門(Windowsベース)
    https://qiita.com/hitotch/items/5142fff638c7805d84d5

CodeZine（コードジン）

• 基礎からはじめるReact Native入門連載一覧
  https://codezine.jp/article/corner/772

  • React Nativeとは何か？ 基本の仕組みと使いどころを理解する
    https://codezine.jp/article/detail/11295

  • ExpoではじめるReact Native開発環境の構築
    https://codezine.jp/article/detail/11384

  • Reactの基本を学ぼう

    • ～コンポーネントの仕組みと作り方
      https://codezine.jp/article/detail/11686
    • ～コンポーネントで動的な状態管理
      https://codezine.jp/article/detail/11748

  • React Hooksの使い方を学ぼう
    ～関数コンポーネントの状態管理を行う
    https://codezine.jp/article/detail/11782

  • React Nativeでアプリの見た目を整えよう

    • ～スタイルでコンポーネントを装飾する
      https://codezine.jp/article/detail/11864
    • ～スタイルでコンポーネントをレイアウトする
      https://codezine.jp/article/detail/11957

  • UIライブラリで美しいデザインを手軽に利用する
    https://codezine.jp/article/detail/12087

  • React Navigationで画面遷移を実現する
    https://codezine.jp/article/detail/12150

  • React Nativeでメモアプリを作ろう

    • ～セットアップと表示
      https://codezine.jp/article/detail/12271
    • ～作成画面の構築と実データの利用
      https://codezine.jp/article/detail/12328

  • 静的型チェックを行うTypeScriptで品質を担保しよう
    https://codezine.jp/article/detail/12432

  • リリース用のアプリファイルを用意しよう
    https://codezine.jp/article/detail/12673

ログミーTech（テック）

• 「React Native」はなにがすごい？
  リクルートのエンジニアが徹底調査
  https://logmi.jp/193977

• よく分かるReact Nativeのこれから
  ––GUI上で変更が可能になり、
  モバイル・Web以外に転用していく
  https://logmi.jp/291600

• 僕にとってReact Nativeは“つらい”
  DMMが負債脱却のために取り組んだSwift化
  https://logmi.jp/tech/articles/324358

ナカザンドットネット

• React Nativeの光と闇について喋ってきました
  上越TechMeetup - ナカザンドットネット
  https://blog.nkzn.info/entry/2018/07/23/165427

• React Nativeの「(not) for you」を伝え続けた2019年を振り返る
  https://blog.nkzn.info/entry/2020/02/12/120239

• React Native for Windows

KOKENSHAの技術ブログ

• React Nativeとは何か？
  https://kokensha.xyz/reactnative/what-is-react-native/
• 2018最新定番！React Native開発の虎の巻
  https://kokensha.xyz/reactnative/the-best-react-native-basics-2018/

移行メモ：マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への リンクは、移行済みの MS_ReactNativeForWindows に張り替えた。

---

Tags: 移行, React Native, React, クロスプラットフォーム, スマホ, JavaScript