Skip to content

Commit d34ef15

Browse files
committed
docs(guide): update framework overview files for consistency
1 parent df879af commit d34ef15

File tree

7 files changed

+106
-183
lines changed

7 files changed

+106
-183
lines changed

docs/angular/overview.md

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,33 +14,47 @@ sidebar_label: Overview
1414
import DocsCard from '@components/global/DocsCard';
1515
import DocsCards from '@components/global/DocsCards';
1616

17-
`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.
17+
`@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.
1818

1919
## Angular Version Support
2020

21-
Ionic v7 supports Angular v14+. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state.
21+
Ionic Angular supports the latest versions of Angular. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular).
2222

2323
## Angular Tooling
2424

25-
With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.
25+
Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` 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 angular
36+
37+
$ ionic serve █
38+
```
2639

2740
## Resources
2841

2942
<DocsCards>
30-
<DocsCard header="Getting Started" href="your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
31-
<p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
32-
</DocsCard>
3343

34-
<DocsCard header="Navigation" href="navigation" icon="/icons/feature-component-navigation-icon.png">
35-
<p>Learn the basics of navigation inside your app with Ionic and Angular Router</p>
44+
<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
45+
<p>Quickly set up your first Ionic Angular 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-angular-icon.png">
49+
<p>Build a real Photo Gallery app with Ionic Angular and native device features.</p>
3650
</DocsCard>
3751

38-
<DocsCard header="Lifecycle" href="lifecycle" icon="/icons/feature-guide-components-icon.png">
39-
<p>Learn about using Ionic lifecycle events in class components and with hooks</p>
52+
<DocsCard header="Navigation" href="navigation" icon="/icons/component-navigation-icon.png">
53+
<p>Master navigation in Ionic Angular using Angular Router.</p>
4054
</DocsCard>
4155

42-
<DocsCard header="Build Options" href="build-options" icon="/icons/logo-angular-icon.png">
43-
<p>Learn about using Modules or Standalone Components in Ionic.</p>
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>
4458
</DocsCard>
4559

4660
</DocsCards>

docs/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards';
2222
<meta property="og:url" content="https://ionicframework.com/docs" />
2323
</head>
2424

25-
Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md).
25+
Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react/overview.md), and [Vue](vue/overview.md).
2626

2727
Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts.
2828

@@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First
5858

5959
## Overview
6060

61-
Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
61+
Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react/overview.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we <a href="https://youtu.be/p3AN3igqiRc" target="_blank">created a video</a> to walk you through the basics.
6262

6363
### One codebase, running everywhere
6464

docs/react.md

Lines changed: 0 additions & 147 deletions
This file was deleted.

docs/react/overview.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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>

docs/vue/overview.md

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,21 @@ sidebar_label: Overview
1414
import DocsCard from '@components/global/DocsCard';
1515
import DocsCards from '@components/global/DocsCards';
1616

17-
`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
17+
`@ionic/vue` brings the full power of the Ionic Framework to Vue developers. It offers seamless integration with the Vue ecosystem, so you can build high-quality cross-platform apps using familiar Vue tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities.
1818

1919
## Vue Version Support
2020

21-
Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies.
21+
Ionic Vue supports the latest versions of Vue. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue).
2222

2323
## Vue Tooling
2424

25-
Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support.
25+
Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can take advantage of the full Vue CLI feature set for building, testing, and deploying your apps. Starter projects come with useful features enabled by default, such as Vue Router for navigation and TypeScript support for type safety and improved developer experience.
2626

2727
## Native Tooling
2828

29-
[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web.
29+
[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase.
3030

31-
While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova).
32-
33-
## From the Community
34-
35-
<!-- cspell:disable -->
36-
37-
- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders
38-
- [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan
39-
40-
<!-- cspell:enable -->
31+
While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, see the [Capacitor documentation](https://capacitorjs.com/docs/cordova).
4132

4233
## Installation
4334

@@ -51,16 +42,21 @@ $ ionic serve █
5142
## Resources
5243

5344
<DocsCards>
54-
<DocsCard header="Getting Started" href="your-first-app" icon="/icons/feature-component-actionsheet-icon.png">
55-
<p>Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.</p>
56-
</DocsCard>
5745

58-
<DocsCard header="Navigation" href="navigation" icon="/icons/feature-component-navigation-icon.png">
59-
<p>Learn the basics of navigation inside your app with Ionic and Vue Router</p>
46+
<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png">
47+
<p>Quickly set up your first Ionic Vue app and learn the basics of the framework and CLI.</p>
48+
</DocsCard>
49+
50+
<DocsCard header="Build Your First App" href="your-first-app" icon="/icons/logo-vue-icon.png">
51+
<p>Build a real Photo Gallery app with Ionic Vue and native device features.</p>
52+
</DocsCard>
53+
54+
<DocsCard header="Navigation" href="navigation" icon="/icons/component-navigation-icon.png">
55+
<p>Master navigation in Ionic Vue using Vue Router.</p>
6056
</DocsCard>
6157

62-
<DocsCard header="Lifecycle" href="lifecycle" icon="/icons/feature-guide-components-icon.png">
63-
<p>Learn about using Ionic lifecycle events in class components and with hooks</p>
58+
<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png">
59+
<p>Explore Ionic’s rich library of UI components for building beautiful apps.</p>
6460
</DocsCard>
6561

6662
</DocsCards>

sidebars.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ module.exports = {
9999
label: 'React',
100100
collapsed: false,
101101
items: [
102-
'react',
102+
'react/overview',
103103
'react/quickstart',
104104
{
105105
type: 'category',
6.54 KB
Loading

0 commit comments

Comments
 (0)