close
The Wayback Machine - https://web.archive.org/web/20210127045011/https://ionicframework.com/jp/docs/react
Search docs/

ひとつのコードベースで
あらゆるプラットフォームが
Reactする

  • ✓ 100以上のモバイルUIに特化したReactコンポーネント

  • ✓ React DOMを利用したReact標準ツール

  • ✓ iOS / Android / Electron / PWA

    はじめ方

Image

著名で多くのユーザに愛されているReactを使って、モバイル、デスクトップ、ウェブのすべてを通してすばらしいアプリを構築

Ionic Reactは、Ionic FrameworkのネイティブReactバージョンです。IonicFrameworkは、世界中の数百万ものミッションクリティカルなアプリケーションを強化する無料のオープンソースSDKです。

Reactを使用して、あらゆるプラットフォーム向けの award-winning アプリをリリースするために必要なものはすべて揃っています。

すばらしいデザイン

100を超える美しいモバイル対応のUIコンポーネント、アニメーション、ジェスチャーの中から選択し、軽量で、ブランディングに合わせてカスタマイズします。

UIコンポーネントを調べる

Image

使い慣れたツール

Ionic Reactプロジェクトは、Reactプロジェクトと同じように、 react-dom を活用し、通常は Create React App (CRA) を利用してセットアップします。 ルーティングとナビゲーション は、React Router下に構築されます。 Compatible with React version 16.8 and above.

Image

モバイル以上のものを

最新のネイティブライブラリである Capacitor を使用して、Ionic ReactプロジェクトをネイティブiOS、Android、Electron、およびWebでProgressive Web Appとしてデプロイします。すべて1つのコードベースを共有します。

Image

Reactそのままに

結局のところ、これはただのReactです。Ionic ReactはオープンなWeb標準と組み込みのブラウザ機能を使用しているため、何百万ものWebライブラリと互換性があります。

Image

インストール

npm install -g @ionic/cli ionic start myApp tabs --type react
ionic serve

リソース

ImageImage
はじめ方

Ionic Frameworkですばらしいアプリをつくるために知るべき基礎を学びます。

ImageImage
Add Ionic to Existing React App

Use individual components or the complete app experience.

ImageImage
Navigation

Learn the basics of navigation inside your app with Ionic and React Router

ImageImage
ライフサイクル

クラスコンポーネントのフックを利用したIonicのライフサイクルの使い方を学びます。