2016 年から C# での実装があった React Native for Windows ですが 2019 年 2 月に C++ で実装された高性能なバージョンがデフォルトの実装として公開されました。 ここでは、新しい React Native for Windows の概要について説明します。 React Native を使うと Android、iOS、Windows アプリの開発が出来るようになるので、Web 系技術を普段お使いの方にお勧めです。

1. *本資料の内容 (添付文書、リンク先などを含む) は de:code 2020 における公開日時点のものであり、予告なく変更される場合があります。
#decode20 #
React Native で Windows アプリ開発
~React Native for Windows~
A01
大田 一希
日本マイクロソフト株式会社
Windows AppConsult エンジニア

2. 本セッションについて
対象者
課題
ゴール
• Web 系技術開発者で Windows アプリ開発に興味のある方
• Windows アプリ開発者
• 新しい Windows アプリ開発の情報収集
• React Native for Windows の概要把握

3. セッションアジェンダ
• React Native for Windows とは
• デモ
• まとめ
• 参考サイト

4. React Native for Windows とは

5. https://github.com/facebook/react
React とは

6. https://github.com/facebook/react-native
React Native とは

7. React Native for Windows

8. React Native を使うと…

9. React での開発
const MyComponent = () => {
const name = "John";
return (
<p>Hello {name}</p>
);
}
const MyComponent = () => {
const name = "John";
return (
<p>Hello {formatName(name)}</p>
);
}

10. JSX がレンダリングされて HTML になる
const MyComponent = () => {
const name = "John";
return (
<p>Hello {name}</p>
);
}
<p>Hello John</p>

11. JSX がレンダリングされて Native コントロールになる
const MyComponent = () => {
const name = "John";
return (
<Text>Hello {name}</Text>
);
}

12. https://reactnative.dev/docs/components-and-apis
React Native のコンポーネント

13. ネイティブの機能の利用

14. React Native のコンポーネントをネイティブ アプリに

15. https://classic.yarnpkg.com/en/docs/install#windows-stable
環境構築

16. プロジェクトの作成
# プロジェクト名が decode20 の場合
> npx react-native init decode20 --version ^0.61.5
> cd decode20
> npx react-native-windows-init --overwrite

17. https://microsoft.github.io/react-native-windows/docs/getting-started
プロジェクトの実行
> npx react-native run-windows

18. https://microsoft.github.io/react-native-windows/docs/getting-started
プロジェクトの実行
> npx react-native run-windows

19. TypeScript の利用
Using TypeScript React Native
https://reactnative.dev/docs/typescript

20. デモ

21. https://github.com/microsoft/react-native-windows/issues
今後

22. まとめ

23. https://reactjs.org/
https://reactnative.dev/
https://microsoft.github.io/react-native-windows/
https://github.com/microsoft/react-native-windows
参考サイト

24. © 2018 Microsoft Corporation. All rights reserved.
本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。
© 2020 Microsoft Corporation. All rights reserved.
本情報の内容 (添付文書、リンク先などを含む) は、公開日時点のものであり、予告なく変更される場合があります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。