Sunday, June 14, 2020

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!!

No comments:

Post a Comment