Intro to Ionic React

Ionic is used for creating mobile web apps using web technologies. Let’s say you’re a Developer who knows HTML, CSS and Javascript, those skills will transfer when using Ionic, because thats exactly what it uses. Mobile front ends created in Ionic are rendered in the DOM, same as what we use for websites.

Ionic React gives us access to Mobile UI elements that are commonly used in mobile apps. Also, since Ionic React, like React compiles to HTML, CSS and Javascript, we can also use it to create web applications that run on Desktop as well as Mobile and tablet, along with progressive web apps.

You need:

• Knowledge of HTML, CSS, and Javascript
• Knowledge of React.js
• Node.js installed on your computer

Creating your first Ionic React app

Install ionic-cli

To start you need to install the Ionic CLI globally using npm

npm install -g @ionic/cli

When its finished installing, run the following command to make sure Ionic has successfully installed

ionic --help

Initializing an Ionic react project

We could choose initialize can Ionic project

• With tabs
• With a side menu
• A blank project with neither tabs or a side menu

For this project, we’ll initialize a blank project

ionic start myFirstApp blank

Note that you’ll be asked whether you want an Angular or React project. Choose React.

Starting up our new Ionic project

Starting our Ionic project is simple, we just have to go into the directory of our new project run ionic start

cd myFirstApp
ionic serve