February 21, 2019
  • Announcements
  • Ionic 4
  • react

Announcing the Ionic React Beta

Josh Thomas

Today, we’re excited to announce that Ionic React is now available in beta! Take a read below to understand more about this release and how to get started building with Ionic and React.

A Quick History

If you are familiar with Ionic Framework, you more than likely associate it with Angular. Historically, your assumption would be correct, as Ionic and Angular have been exclusively paired for a long time. However, with the recent release of Ionic Framework 4.0 this has changed: Now, Ionic’s core is able to adapt and expand to support many different frameworks. In previous posts, we mentioned that Vue and React were in the works…

Finally, however, we’re thrilled to share that the @ionic/react beta is here! 🎉

What is Ionic Framework?

If you’re already using React, but haven’t done so with Ionic, you might be wondering: What is the Ionic Framework and why should I care?

Well, let’s take a step back and just say, “Hello, we’re Ionic!” We’re about 5 million apps (and users) strong, with companies like Nationwide, Marketwatch, and Sworkit using our code.

We’re best known for our popular open source Framework, which at its core is a collection of UI components for building high-quality, cross-platform hybrid apps. All of these components are built with HTML, CSS, and JavaScript and can be easily deployed natively to iOS and Android devices, to desktop with Electron, or to the web as a progressive web app (PWA).

Why does this matter? Because the web is awesome and only getting better! Building with web technologies allows developers to leverage their existing skills for native development, while also depending on the stability of the web. Meaning, you don’t have to learn any special new tools, use a subset of CSS, or rewrite portions of your app when building with Ionic—It just works across multiple platforms, all using one codebase.

And, because the Ionic Framework is focused on the Component/UI layer, you can still keep your framework’s build tools and CLI. Our main goal is to care about how your apps look and behave, not how they’re built. In the past, Ionic Framework has been built only supporting Angular. While we still love and support Angular, we’re also opening up to other tools in the front-end ecosystem. This is why we’re excited to share the details about @ionic/react.

How to Get Started with React & Ionic?

Getting started is quite simple. Begin first with create-react-app, because we want you to use Ionic with React in the most familiar way. We also recommend using TypeScript in your app, something we recently wrote about on our blog if you need tips. While this is not required, we mention it because Ionic React ships with TypeScript type definitions, and it makes for an excellent developer experience.

 npx create-react-app my-ionic-app --typescript
 cd my-ionic-app

Ionic provides components to help with navigation like tabs and stack-based navigation. Right now, we support react-router so we will need to install it as a dependency along with @ionic/react.

npm install @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom

Fire up your favorite code editor and open up App.tsx. Then replace the contents of the file with:

import React, { Component } from 'react';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';
import {
  IonApp,
  IonContent,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle
} from '@ionic/react';

class App extends Component {
  render() {
    return (
      <IonApp>
        <IonContent>
          <IonCard>
            <IonCardHeader>
              <IonCardSubtitle>Welcome to Ionic</IonCardSubtitle>
              <IonCardTitle>Running on React</IonCardTitle>
            </IonCardHeader>
          </IonCard>
        </IonContent>
      </IonApp>
    );
  }
}

export default App;

Run npm run start and you got yourself an Ionic React app!

Alright, that is pretty much it. From here, you can use Ionic Components as you wish. Now, let’s dive into the specifics of what components are available from Ionic.

What Does Ionic React Include?

We ship around 70 components with Ionic React. These components should cover the majority of use cases for building a mobile application—Including buttons, cards, menus, tabs, alerts, modals, and so much more. Next, let’s take a look at a few example components to gain a better understanding of what to expect when building with Ionic.

Button

Button provides a clickable element that can be used in forms or anywhere that needs standard button functionality. They can also display text, icons, or both. Additionally, buttons can be styled with several attributes to look a specific way.

<IonButton onClick={this.props.dismissModal}>Cancel</IonButton>

Card

Cards are just a standard piece of UI that serves as an entry point to more detailed information. A card can be a single component, but it is often made up of some header, title, subtitle, and content.

<IonCard>
  <IonCardHeader>
    Card Heading
  </IonCardHeader>
  <IonCardContent>
    This is some card content.
  </IonCardContent>
</IonCard>

Modal

A Modal is a dialog that appears on top of the app’s content and must be dismissed by the app before an interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as anytime you need the users’ input before you can continue.

<IonModal
  isOpen={this.state.showModal}
  onDidDismiss={() => this.setState(() => ({ showModal: false}))}
>
  Some content to display in the modal.
</IonModal>

Ionic & the React Ecosystem

Additionally, some people might be wondering how Ionic fits into the overall React ecosystem.

React developers have long used React Native to make native apps for iOS and Android. We think React Native is a good approach for native app development, but we have always believed in the web platform and think React developers will find many advantages in creating hybrid mobile, desktop, and progressive web apps with Ionic and React. We even see opportunities in using React Native and Ionic together. Stayed tuned for more info on that coming soon.

Next Steps for Ionic & React

It is pretty early for @ionic/react and there’s a lot more to test before we recommend it for production, though we’re happy to finally have this available for our community to try!

If you would like to see an example application that shows usage and provides more context around the best way to leverage each component, please take a look at our demo application built with @ionic/react, here.

To see the demo running live, click here.

We’ve always said that Ionic’s biggest asset is our large, passionate community, and now we need your feedback.

If you want to give Ionic a try in your next React app, please do so—we’d love to know how it goes! You can reach out to us on Github with your thoughts and updates, just make sure you mention React somewhere in the issue text when you do. Our issue bot will make sure it gets to the right people.

Now that you have more information about how to use ‘@ionic/react’, we can’t wait to see what you create. Happy building!


Josh Thomas