|
| 1 | +--- |
| 2 | +title: 'Ionic React Overview' |
| 3 | +sidebar_label: Overview |
| 4 | +--- |
| 5 | + |
| 6 | +<head> |
| 7 | + <title>Ionic React Overview | React Version Support and Tooling</title> |
| 8 | + <meta |
| 9 | + name="description" |
| 10 | + content="@ionic/react combines the Ionic experience with the tooling and APIs tailored to React developers. Learn more about version support and resources in our React Overview." |
| 11 | + /> |
| 12 | +</head> |
| 13 | + |
| 14 | +import DocsCard from '@components/global/DocsCard'; |
| 15 | +import DocsCards from '@components/global/DocsCards'; |
| 16 | + |
| 17 | +`@ionic/react` brings the full power of the Ionic Framework to React developers. It offers seamless integration with the React ecosystem, so you can build high-quality cross-platform apps using familiar React tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. |
| 18 | + |
| 19 | +## React Version Support |
| 20 | + |
| 21 | +Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/docs/reference/support#ionic-react). |
| 22 | + |
| 23 | +## React Tooling |
| 24 | + |
| 25 | +Ionic React works seamlessly with the React CLI and popular React tooling. You can use your favorite libraries for state management, testing, and more. Ionic React is designed to fit naturally into the React ecosystem, so you can use tools like Create React App, Vite, or Next.js to scaffold and build your apps. |
| 26 | + |
| 27 | +## Native Tooling |
| 28 | + |
| 29 | +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. |
| 30 | + |
| 31 | +## Installation |
| 32 | + |
| 33 | +```shell-session |
| 34 | +$ npm install -g @ionic/cli |
| 35 | +$ ionic start myApp tabs --type react |
| 36 | +
|
| 37 | +$ ionic serve █ |
| 38 | +``` |
| 39 | + |
| 40 | +## Resources |
| 41 | + |
| 42 | +<DocsCards> |
| 43 | + |
| 44 | +<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png"> |
| 45 | + <p>Quickly set up your first Ionic React app and learn the basics of the framework and CLI.</p> |
| 46 | +</DocsCard> |
| 47 | + |
| 48 | +<DocsCard header="Build Your First App" href="your-first-app" icon="/icons/logo-react-icon.png"> |
| 49 | + <p>Build a real Photo Gallery app with Ionic React and native device features.</p> |
| 50 | +</DocsCard> |
| 51 | + |
| 52 | +<DocsCard header="Navigation" href="navigation" icon="/icons/component-navigation-icon.png"> |
| 53 | + <p>Master navigation in Ionic React using React Router.</p> |
| 54 | +</DocsCard> |
| 55 | + |
| 56 | +<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png"> |
| 57 | + <p>Explore Ionic’s rich library of UI components for building beautiful apps.</p> |
| 58 | +</DocsCard> |
| 59 | + |
| 60 | +</DocsCards> |
0 commit comments