|
| 1 | +--- |
| 2 | +title: 'Ionic JavaScript Overview' |
| 3 | +sidebar_label: Overview |
| 4 | +--- |
| 5 | + |
| 6 | +<head> |
| 7 | + <title>Ionic JavaScript Overview | JavaScript Version Support and Tooling</title> |
| 8 | + <meta |
| 9 | + name="description" |
| 10 | + content="@ionic/core combines the Ionic experience with the tooling and APIs tailored to JavaScript Developers. Learn more about version support in our JavaScript Overview." |
| 11 | + /> |
| 12 | +</head> |
| 13 | + |
| 14 | +import DocsCard from '@components/global/DocsCard'; |
| 15 | +import DocsCards from '@components/global/DocsCards'; |
| 16 | + |
| 17 | +`@ionic/core` brings the full power of the Ionic Framework to JavaScript developers. It offers seamless integration with the JavaScript ecosystem, so you can build high-quality cross-platform apps using familiar JavaScript tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. |
| 18 | + |
| 19 | +## JavaScript Version Support |
| 20 | + |
| 21 | +Ionic Core supports the latest versions of JavaScript. For detailed information on supported JavaScript runtime versions, see the [Stencil Support Policy](https://stenciljs.com/docs/support-policy#javascript-runtime). |
| 22 | + |
| 23 | +## JavaScript Tooling |
| 24 | + |
| 25 | +Ionic Core works seamlessly with modern JavaScript tooling and build systems. You can use popular tools like Vite, Webpack, or Parcel to scaffold and build your apps. Ionic Core is designed to fit naturally into the JavaScript ecosystem, so you can use your favorite libraries for state management, testing, and more. |
| 26 | + |
| 27 | +## Native Tooling |
| 28 | + |
| 29 | +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Core, enabling your apps to run natively on iOS, Android, and the web with a single codebase. |
| 30 | + |
| 31 | +## Installation |
| 32 | + |
| 33 | +Before you begin, make sure you have [Node.js](https://nodejs.org/) (which includes npm) installed on your machine. |
| 34 | + |
| 35 | +```shell-session |
| 36 | +$ npm create vite@latest my-app -- --template vanilla |
| 37 | +
|
| 38 | +$ cd my-app |
| 39 | +$ npm install && npm install @ionic/core |
| 40 | +$ npm run dev █ |
| 41 | +``` |
| 42 | + |
| 43 | +## Resources |
| 44 | + |
| 45 | +<DocsCards> |
| 46 | + |
| 47 | +<DocsCard header="Getting Started" href="quickstart" icon="/icons/guide-quickstart-icon.png"> |
| 48 | + <p>Quickly set up your first Ionic JavaScript app and learn the basics of the framework and CLI.</p> |
| 49 | +</DocsCard> |
| 50 | + |
| 51 | +<DocsCard |
| 52 | + header="JavaScript Documentation" |
| 53 | + href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" |
| 54 | + icon="/icons/logo-javascript-icon.png" |
| 55 | +> |
| 56 | + |
| 57 | + Learn more about JavaScript's core concepts, tools, and best practices from the official JavaScript documentation. |
| 58 | + </p> |
| 59 | +</DocsCard> |
| 60 | + |
| 61 | +<DocsCard header="Navigation" href="/docs/api/router" icon="/icons/component-navigation-icon.png"> |
| 62 | + <p>Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.</p> |
| 63 | +</DocsCard> |
| 64 | + |
| 65 | +<DocsCard header="Components" href="/docs/components" icon="/icons/guide-components-icon.png"> |
| 66 | + <p>Explore Ionic's rich library of UI components for building beautiful apps.</p> |
| 67 | +</DocsCard> |
| 68 | + |
| 69 | +<DocsCard header="Theming" href="/docs/theming/basics" icon="/icons/guide-theming-icon.png"> |
| 70 | + <p>Learn how to customize the look and feel of your app with Ionic's powerful theming system.</p> |
| 71 | +</DocsCard> |
| 72 | + |
| 73 | +<DocsCard header="Capacitor Documentation" href="https://capacitorjs.com/docs/" icon="/icons/guide-capacitor-icon.png"> |
| 74 | + <p>Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.</p> |
| 75 | +</DocsCard> |
| 76 | + |
| 77 | +</DocsCards> |
0 commit comments