Episode 2: Adding ionic to a react project

In the last episode, we have seen how to create a react application. in this tutorial, we will see how to add ionic in the existing react application.

Ionic provides a number of UI components that we can use to build our user interface.
for example, ionic provides various UI components like- IonButton, IonIcon, IonContent...
Before we can use any ionic components we will need to add the ionic package to our project.
Check package.json file for which packages are present in the current project.


Step 1. First, install ionic/react package after that you will be able to use ionic components in the project. To install ionic/react, use command as =>  npm install @ionic/react


After successful installation, you can check package.json  where you can find ionic/react


Step 2: Add css file in index.js
core.css is always required in order to use any ionic component
                 import '@ionic/react/css/core.css';



now we are ready to start with ionic UI component.

Step 3: To use ionic button, we need to import IonButton control first from ionic/react package then you can use it the UI section



Now run the project using npm start or yarn start. You will see button as shown in below image



So we are ready with our react + ionic project. You can add other controls.
Now we will do some action on the button.

Here we have added one more ionic component - IonToast. this control is used to show the message on the screen. We have handled the buttons click event. on that, we have updated state of showToastMessage




Happy Coding!!