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
- Angular
- React
- Vue
- Vanilla javascript
Required Tools
- NodeJS
- Code editor: I prefer Visual studio code
- Browser
Prerequisite:
- HTML
- CSS
- Javascript
- React
Today we will start with hello world application
- 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;
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!!
