Episode 1: Building cross-platform mobile app - create react application hello world

Series:  Building a cross-platform mobile app using ionic and react

This is a series that will showcase you how to build a mobile application with an ionic framework and react. For this series, we will use Ionic 5 and React latest version.
There is an alternative for ionic, which is React Native it will be a topic for our next series.

Ionic vs React Native

ionic is entirely based on web standards, it is like a regular web app. Another benefit of ionic is it helps you to build PWA(Progressive Web Apps), potentially we can hit 3 platforms Web, Android, and iOS from single code base.

What is ionic?

• Ionic is free and opensource.
• It offers a library of mobile-optimized UI components
• Ionic is a UI component library, it is more than a component library. Ionic allows you to build cross-platform apps. It means an app that can run in a regular web browser, but also build as Android and ios mobile apps.
• The major benefit of the ionic framework is you need to write code once and you can publish it on Android and iOS play store.
• The ionic framework supports the following languages
1. Angular
2. React
3. Vue
4. Vanilla javascript

          They do provide official integrations for React and Angular at present.

Required Tools

• NodeJS
• Code editor: I prefer Visual studio code
• Browser

Prerequisite:

• HTML
• CSS
• Javascript
• React

Today we will start with hello world application

1. We need to create react application first, it will take a few minutes to create react app 

                   npx create-react-app hello-world

It will create react project, you can find project structure like below:

To run a project you can execute the command: 

                              npm start or yarn start           

The project will execute and open in a browser

Update App.js file as below:

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
<div className="App">      <header className="App-header">        Hello World
      </header>    </div>  );
}
export default App;

You will see the output


We have achieved what we have targeted.
In this tutorial, we have created a react project, in next tutorial we will add an ionic project.

Happy Coding!!