Create an Ionic Website Application with React

Ionic framework Practice 1

Firstly, we need to know more about Ionic

What is Ionic?

Ionic is a Cross-platform for web, hybrid mobile android/iOS app development. Write once, run anywhere! It is web standards-based by using web technologies like HTML, CSS, JavaScript, modern Web APIs. JavaScript framework, including Angular, React, Vue, or no framework at all.

There are three famous hybrid development frameworks: Ionic, React Native and Xamarin. And the most popular one in Australia is React Native. Check the comparison between them by refer to this link: https://belitsoft.com/react-native-development/react-native-vs-xamarin-vs-ionic

Native Mobile App uses Java for Android applications and Swift, Object-C for iOS applications. Here also provide a link that explains about what is Native Mobile App and Hybrid Mobile App: https://ionicframework.com/resources/articles/what-is-hybrid-app-developmentHere is the developer document from Ionic: https://ionicframework.com/docs/developing/starting

Now we are more familiar with this framework, let’s set up the environment. Install the Visual Studio Code, Node.js in your laptop if you don’t have yet. After that, we are going to create and run our first Ionic application!

Install Ionic

Open the terminal, which is ‘cmd’ in Windows OS, install Ionic into your system, it would show successful msg once it installed successfully.

$ npm install -g @ionic/cli

Note: The -g option means install globally.

Create a new Ionic application (with react)

At the direction where you want to create your first one app and run the code below. Here myApp is the name of the project, blank is the template, and the project type is react.

$ ionic start myApp blank --type=react

Note: blank would create an empty project with a signal page. There are several templates available, such as tabs, sidemenu, etc.

I created my myApp under Documents directory, it would show the below message that asking you to integrate with Capacitor or not, since we are going to deploy to iOS and Android, type ‘y’ and press enter.

And it will run the installation

After installation, it will ask you to create a free Ionic account or not, I choose ‘n’ this time.

If it shows this screen, it means the system installed the Ionic application ‘myApp’ successfully!

Access to the new Ionic app folder and run the app

$ cd myApp
$ ionic serve

Make sure you run ionic serve under the ionic application folder, press Enter and it will start running, it may take a while to run the application. Then the web browser will be opened automatically with localhost IP address.

If you see this on your browser after all, then congrats! You got your first one Ionic app ready to go!

Issue

When you run ‘ionic serve’ you might encounter an error called

Error: TypeScript error TS1005

please open your code editor Visual Studio Code, open myApp folder, and choose the package.json file. Fine “typescript”: “3.7.4”, change the number into “3,8,3”, save the file. And back to terminal run the command line below,

$ ionice repair

It would ask you to continue? Type yes and press Enter. Then run ‘ionic serve’ again.

For More Practice and Component in Ionic

• Ionic React Quick Start
• Ionic Component Overview

Next: Deploy to Android and iOS Platform

Support my writing by becoming a Medium member today and getting access to an unlimited number of articles.