Introduction to Ionic React

<p>In our Ionic React application, we're going to want to add a IonFabButton that opens up a model </p>



<h2>Adding the IonFabButton</h2>



<p>We're going to want to add an IonFab component thats wrapped around our IonFabButton. We want to set the slot prop equal to fixed, and for this example we want our fab button to be on the bottom right.</p>



<pre class="wp-block-code"><code>&lt;IonPage>
  &lt;IonToolbar>
      &lt;IonTitle>Todo App&lt;/IonTitle>
    &lt;/IonToolbar>
  &lt;IonContent>
    &lt;IonGrid>
      {todoItems.map((todoItem, index) => (
        &lt;IonRow>
          &lt;IonCol size="12">
            &lt;IonItem>
              &lt;IonGrid>
                &lt;IonRow>
                  &lt;IonCol size-xs="8.5" size-sm="8.5" size-md="10" size-lg="11"  class="ion-align-self-center">
                    &lt;IonText>{todoItem.title}&lt;/IonText>
                  &lt;/IonCol>
                  &lt;IonCol size-xs="3.5" size-sm="3.5" size-md="2" size-lg="1" class="ion-text-right">
                    &lt;IonButton onClick={() => deleteTodo(index)}>Delete&lt;/IonButton>
                &lt;/IonCol>
                &lt;/IonRow>
              &lt;/IonGrid>
            &lt;/IonItem>
          &lt;/IonCol>
        &lt;/IonRow>
      ))}
    &lt;/IonGrid>
    &lt;IonFab slot="fixed" vertical="bottom" horizontal="end">
      &lt;IonFabButton>&lt;/IonFabButton>
    &lt;/IonFab>
  &lt;/IonContent>
&lt;/IonPage></code></pre>



<h2>Adding the Modal with the IonModal component</h2>



<p>We want to add our IonModel component. It doesn't matter where inside our component we place it, since it will overlay over everything else, but lets put it at the bottom, next to the IonFabButton</p>



<pre class="wp-block-code"><code>...
&lt;IonModal&gt;
  &lt;p&gt;Some content inside our Model&lt;/p&gt;
&lt;/IonModal&gt;
&lt;IonFab slot="fixed" vertical="bottom" horizontal="end"&gt;
  &lt;IonFabButton&gt;Add Todo&lt;/IonFabButton&gt;
&lt;/IonFab&gt;
...</code></pre>



<p>Our modal wont show up unless we pass down a prop named <code>isOpen</code> to our IonModel component <em>and</em> the model must be set to true.</p>



<p>To handle this, we're going to create use the useState hook and have it toggled using the IonFabButton we created. </p>



<pre class="wp-block-code"><code>..
const Todo = () =&gt; {
  const &#91;showModal, setShowModal] = useState(false);
... </code></pre>



<pre class="wp-block-code"><code>...
&lt;IonModal isOpen={showModal}&gt;
  &lt;p&gt;This is modal content&lt;/p&gt;
  &lt;IonButton onClick={() =&gt; setShowModal(false)}&gt;Close Modal&lt;/IonButton&gt;
&lt;/IonModal&gt;
&lt;IonFab slot="fixed" vertical="bottom" horizontal="end"&gt;
 &lt;IonFabButton onClick={()=&gt;setShowModal(true)}&gt;Add Todo&lt;/IonFabButton&gt;
&lt;/IonFab&gt;
...</code></pre>



<p>Note that we also have a button in the model so we can close the model and go back to our page.</p>



<p>Now when you click the Fab button, the model will appear, and when you click the IonButon inside the modal, the Model will disappear.</p>



<p>On desktop, the modal will be much smaller, centered in the middle of the viewport with a dark transparent overlay behind it. Here, you could click any part of the overlay to close the modal</p>

Using IonFabButton and IonModal to make Todo items in Ionic React

<p>Ionic gives us a grid system for us to use with our components. With it, we don't have to worry about importing a grid system from somewhere else or build your own (although it is an option if you choose).</p>



<p>Inside your Ionic Page's IonContent tag, you want to have an IonGrid component with rows defined inside of it.</p>



<pre class="wp-block-code"><code>&lt;IonGrid&gt;
  &lt;IonRow&gt;
    &lt;IonCol&gt;ion-col&lt;/IonCol&gt;
    &lt;IonCol&gt;ion-col&lt;/IonCol&gt;
  &lt;/IonRow&gt;
&lt;/IonGrid&gt;</code></pre>



<p>Here we've defined a grid that has a row with two columns inside of it.</p>



<p>We can also define column width. Ionic's rows have a total column length of 12, and the columns inside our row can add up to that height</p>



<pre class="wp-block-code"><code>&lt;IonGrid&gt;
  &lt;IonRow&gt;
    &lt;IonCol size="4"&gt;ion-col&lt;/IonCol&gt;
    &lt;IonCol size="8"&gt;&gt;ion-col&lt;/IonCol&gt;
  &lt;/IonRow&gt;
&lt;/IonGrid&gt;</code></pre>



<p>Here the first column is 4/12'ths the width of the row and the second column take's up 8/12th's of  the row.</p>



<p>For our Todo app, we can wrap our todo items in a row. For now we can just have our Todo Items wrapped in a column of size 12, which would be the whole column. This would allow us some flexibility if we want to add another component beside it. </p>



<pre class="wp-block-code"><code>&lt;IonGrid&gt;
  &lt;IonRow&gt;
    &lt;IonCol size="12"&gt;
      &lt;IonItem&gt;
        &lt;IonText&gt;This is a todo item&lt;/IonText&gt;
      &lt;/IonItem&gt;
    &lt;/IonCol&gt;
  &lt;/IonRow&gt;
&lt;/IonGrid&gt;</code></pre>



<p>We don't have to stop there, we could also add a IonGrid inside our IonItem. Our Todo item could have its own IonGrid inside it. In it, we could have a Grid with a Row containing a column with a piece of text and a button</p>



<pre class="wp-block-code"><code>&lt;IonGrid&gt;
  &lt;IonRow&gt;
    &lt;IonCol size="12"&gt;
      &lt;IonItem&gt;
        &lt;IonGrid&gt;
          &lt;IonRow&gt;
            &lt;IonCol size="8" class="ion-align-self-center"&gt;
              &lt;IonText&gt;I am a todo item&lt;/IonText&gt;
            &lt;/IonCol&gt;
            &lt;IonCol size="4"&gt;
              &lt;IonButton&gt;Delete&lt;/IonButton&gt;
            &lt;/IonCol&gt;
          &lt;/IonRow&gt;
        &lt;/IonGrid&gt;
      &lt;/IonItem&gt;
    &lt;/IonCol&gt;
  &lt;/IonRow&gt;
&lt;/IonGrid&gt;</code></pre>



<h2>Moving the delete button to the right of its column</h2>



<p>You might notice in the Ionic documentation here it states that we should use <code>ion-align-items-end</code> and  <code>ion-justify-content-end</code>. However for centering buttons, you should use the class <code>ion-text-right</code></p>



<pre class="wp-block-code"><code>&lt;IonCol size="4" class="ion-text-center"&gt;
  &lt;IonButton&gt;Delete&lt;/IonButton&gt;
&lt;/IonCol&gt;</code></pre>



<figure class="wp-block-image size-large"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2021/08/Screen-Shot-2021-08-14-at-2.34.15-PM.png" alt="" class="wp-image-1464"/></figure>



<h2>How to handle multiple screen sizes on Ionic Grid</h2>



<h3>Desktop</h3>



<p>Ionic allows us to write applications that run on multiple screen sizes. </p>



<p>We might want our column sizes to be different depending on  </p>



<p>Lets change how much space our columns take up on desktop using the <code>size-lg</code> property.</p>



<p>For the column containing our Text, lets set it to be a size of 11 on desktop</p>



<pre class="wp-block-code"><code>&lt;IonCol size="8" size-lg="11" class="ion-align-self-center"&gt;</code></pre>



<p>We want to adjust the size of our columns add up to a size of 12, so we also want to adjust the Ion Button to be a size of 2 instead of 4 on desktop</p>



<pre class="wp-block-code"><code>&lt;IonCol size="4" size-lg="1" class="ion-text-center"&gt;
   &lt;IonButton&gt;Delete&lt;/IonButton&gt;
&lt;/IonCol&gt;</code></pre>



<h3>Tablet</h3>



<p>We can also adjust columns in our Ionic grid to handle tablet size using the <code>size-md</code> property</p>



<pre class="wp-block-code"><code> &lt;IonCol size="8" size-md="10" size-lg="11" class="ion-align-self-center"&gt;
   &lt;IonText&gt;I am a todo item&lt;/IonText&gt;
&lt;/IonCol&gt;</code></pre>



<pre class="wp-block-code"><code> &lt;IonCol size="4" size-md="2" size-lg="1" class="ion-text-center"&gt;
   &lt;IonButton&gt;Delete&lt;/IonButton&gt;
&lt;/IonCol&gt;</code></pre>



<h3>Mobile</h3>



<p>Since we have <code>size-md</code> and <code>size-lg</code> defined already, mobile would take on the values of the <code>size</code> property alone, but we can also have it use the <code>size-sm</code> property if we want to explicitly have our columns adjust to smaller sizes. If you find that your device isn't taking on the values of the <code>size-sm</code> property, theres also a <code>size-xs</code> property as well</p>



<pre class="wp-block-code"><code>&lt;IonCol size-xs="9" size-sm="9" size-md="10" size-lg="11" class="ion-align-self-center">
  &lt;IonText>I am a todo item&lt;/IonText>
&lt;/IonCol></code></pre>



<pre class="wp-block-code"><code>&lt;IonCol size-xs="3" size-sm="3" size-md="2" size-lg="1" class="ion-text-right">
    &lt;IonButton>Delete&lt;/IonButton>
&lt;/IonCol></code></pre>



<h2>Using decimal ( float / double ) values for Ionic Column sizes</h2>



<p>We can get more granular with our column sizes by using decimals</p>



<pre class="wp-block-code"><code>&lt;IonCol size-xs="8.5" size-sm="8.5" size-md="10" size-lg="11"  class="ion-align-self-center">
  &lt;IonText>{todoItem.title}&lt;/IonText>
&lt;/IonCol></code></pre>



<pre class="wp-block-code"><code>&lt;IonCol size-xs="3.5" size-sm="3.5" size-md="2" size-lg="1" class="ion-text-right">
    &lt;IonButton onClick={() => deleteTodo(index)}>Delete&lt;/IonButton>
&lt;/IonCol></code></pre>

Handle our layout with Ionic grid

Displaying Todo items in an Ionic React App

Using our IonModel to enter data for a Todolist item

Using a Model to enter data in Ionic React

<p>In our Model, we want to create some text fields to add a new TodoItem onto our page.</p>



<p>Let's use the IonInput for the Todo title and a IonTextArea for the description of the Todo item to add input fields.</p>



<pre class="wp-block-code"><code>...
&lt;IonModal isOpen={showModal}&gt;
   &lt;p&gt;This is modal content&lt;/p&gt;
   &lt;IonItem&gt;
     &lt;IonInput placeholder="Enter Todo Item"&gt;&lt;/IonInput&gt;
   &lt;/IonItem&gt;
   &lt;IonButton onClick={() =&gt; setShowModal(false)}&gt;Close Modal&lt;/IonButton&gt;
&lt;/IonModal&gt;
...</code></pre>



<p>Now we need to make sure that our input and text area both use the useState hook so we get back the data inside them when we're done.</p>



<pre class="wp-block-code"><code>...
const Home = () =&gt; {

  const &#91;showModal, setShowModal] = useState(false);
  const &#91;newTodo, updateNewTodo] = useState('');

...</code></pre>



<pre class="wp-block-code"><code>&lt;IonList&gt;
  &lt;IonItem&gt;
    &lt;IonInput value={newTodo} placeholder="Enter Todo Item" onIonChange={e =&gt; updateNewTodo(e.detail.value)&gt;&lt;/IonInput&gt;
  &lt;/IonItem&gt;
&lt;/IonList&gt;</code></pre>



<p>Notice that we use onIonChange instead of onChange.</p>



<h3>Creating a submit button to add a new TodoItem</h3>



<p>Finally we want to create a submit button to add a new todo item based on the information in our input box. </p>



<pre class="wp-block-code"><code>&lt;IonModal isOpen={showModal} cssClass='my-custom-class'&gt;
  &lt;p&gt;This is modal content&lt;/p&gt;
  &lt;IonList&gt;
    &lt;IonItem&gt;
      &lt;IonInput value={newTodo} placeholder="Enter Todo Item" onIonChange={e =&gt; updateNewTodo(e.detail.value)&gt;&lt;/IonInput&gt;
    &lt;/IonItem&gt;
  &lt;/IonList&gt;
  &lt;IonButton onClick={submitTodo}&gt;Add todo&lt;/IonButton&gt;
  &lt;IonButton onClick={() =&gt; setShowModal(false)}&gt;Close Modal&lt;/IonButton&gt;
&lt;/IonModal&gt;</code></pre>



<p>Lets make sure to also create the submitTodo function. This function will add our todo information as an element in an array, reset the text input fields inside our model to be ready for when we want to add a new todolist item, and then finally close our model since we do longer need it once we press submit.</p>



<pre class="wp-block-code"><code>function submitTodo() {
  const listOfTodosClone = Object.create(todoItems, &#91;]);
  const newTodoItem = {title: newTodo};
  listOfTodosClone.push(newTodoItem);
  updateTodoItems(listOfTodosClone);
  updateNewTodo('');
  showModal(false);
}</code></pre>



<p></p>

<p>Now that we have our Todo App scaffolding, we want to place dummy todo items on our page. We're doing this so we have everything set in place when we get started on adding functionality to add todo items. For now, we're going to use dummy data to see what our todo items will look like</p>



<h2>Use the useState hook to create an array of data for our Todo items</h2>



<p>We want to use React's useState hook to create an array of todo items. </p>



<pre class="wp-block-code"><code>...

const Todo = () =&gt; {

    const &#91;todoItems, updateTodoItems] = useState(&#91;{ title: 'Get groceries'}, {title: 'Fill up on gas' }]);


...</code></pre>



<h2>Display Todo Items using map function on todoItems array</h2>



<p>Next we want to run <code>todoItems.map</code> in our render function to display our dummy todo items.</p>



<pre class="wp-block-code"><code>&lt;IonGrid&gt;
  {todoItems.map((todoItem, index) =&gt; (
    &lt;IonRow&gt;
      &lt;IonCol size="12"&gt;
        &lt;IonItem&gt;
          &lt;IonGrid&gt;
            &lt;IonRow&gt;
              &lt;IonCol size-sm="8" size-md="10" size-lg="11" class="ion-align-self-center"&gt;
                &lt;IonText&gt;{todoItem.title}&lt;/IonText&gt;
              &lt;/IonCol&gt;
              &lt;IonCol size-sm="4" size-md="2" size-lg="1" class="ion-text-center"&gt;
                  &lt;IonButton&gt;Delete&lt;/IonButton&gt;
              &lt;/IonCol&gt;
            &lt;/IonRow&gt;
          &lt;/IonGrid&gt;
        &lt;/IonItem&gt;
      &lt;/IonCol&gt;
    &lt;/IonRow&gt;
  ))}
&lt;/IonGrid&gt;</code></pre>



<h2>Adding a delete button to delete Todo Items</h2>



<p>We want to have a delete button for when we're finished with a todo item. Lets add that alongside our text.</p>



<pre class="wp-block-code"><code>{todoItems.map((todoItem, index) =&gt; (
  &lt;IonGrid&gt;
    &lt;IonRow&gt;
      &lt;IonCol size="8"&gt;
        &lt;IonText&gt;{todoItem.title}&lt;/IonText&gt;
        &lt;IonText&gt;{todoItem.description}&lt;/IonText&gt;
      &lt;/IonCol&gt;
      &lt;IonCol size="4"&gt;
        &lt;IonButton onClick={() =&gt; deleteTodo(index)}&gt;Delete&lt;/IonButton&gt;
      &lt;/IonCol&gt;
    &lt;/IonRow&gt;
  &lt;/IonGrid&gt;
 ))}</code></pre>



<p>And of course, we would need to create the <code>deleteTodo</code> function</p>



<p>First thing we want to do is duplicate the todoItems variable we use for our state. Its very important that you use Object.create or the spread operator here.</p>





<pre class="wp-block-code"><code>  function deleteTodo(index) {
    const todoItemsClone = Object.create(todoItems, &#91;]);
  }</code></pre>



<p>The next thing we want to do is remove the chosen item from our todoItemsClone variable. The process of removing the item from the array is done using the splice method available to Arrays in Javascript.</p>





<pre class="wp-block-code"><code>  function deleteTodo(index) {
    const todoItemsClone = Object.create(todoItems, &#91;]);
    todoItemsClone.splice(index,1);
  }</code></pre>



<p>Finally we want to update our state variable todoItems to show that we've deleted our chosen todo item.</p>



<pre class="wp-block-code"><code> function deleteTodo(index) {
    const todoItemsClone = Object.create(todoItems, &#91;]);
    todoItemsClone.splice(index,1);
    updateTodoItems(todoItemsClone);
  }</code></pre>



<p></p>

<p>Ionic comes with a set of pre-built components you can use, these components handle a lot of styling you would normally have to worry about when building a cross platform app such as:</p>



<ul><li>Styling difference between Android and iOS devices</li><li>Styling for Desktop, Tablet and Mobile</li></ul>



<p>Since Ionic focuses on this, we can focus on building out our app and adding new features.</p>



<p>Note, you might notice that the files inside are Typescript files. We'll be creating our components and pages in a new jsx appended files, so we shouldn't have to follow any Typescript specific rules in our components.</p>



<h2>File structure of a new Ionic React project</h2>



<ul><li>/node_modules</li><li>/public</li><li>/src<ul><li>/components<ul><li>ExploreContainer.css</li><li>ExploreContainer.tsx</li></ul></li><li>/pages<ul><li>Home.css</li><li>Home.tsx</li></ul></li></ul><ul><li>/theme</li><li>App.test.tsx</li><li>App.tsx</li><li>index.tsx</li><li>react-app-env.d.ts</li><li>reportWebVitals.ts</li><li>service-worker.ts</li><li>serviceWorkerRegistration.ts</li><li>setupTests.ts</li></ul></li><li>.gitignore</li><li>capacitor.config.json</li><li>ionic.config.json</li><li>package-lock.json</li><li>package.json</li><li>tsconfig.json</li></ul>



<p>We'll be creating a Todo page in the /pages folder and its corresponding components in the /components folder, and they will have an extension of jsx, not tsx.</p>



<p>Lets create a folder called TodoPage in the pages folder. In that lets add a file named index.jsx</p>



<ul><li>/pages<ul><li>TodoPage<ul><li>index.jsx</li></ul></li><li>Home.tsx</li><li>Home.css</li></ul></li></ul>



<h3>The scaffolding of an Ionic-React page</h3>



<p>Before we start building out any todo list functionality, we want to bring over the scaffolding of our app</p>



<p>First thing we'll need is the IonicPage component. The Ionic page component isn't well defined, but we could call it the highest point of a page in Ionic.</p>



<pre class="wp-block-code"><code>import { IonPage } from '@ionic/react';

const Todo = () =&gt; {
  return (
    &lt;IonPage&gt;

    &lt;/IonPage&gt;
  );
};

export default Todo;</code></pre>



<p>Next we want to add the IonContent Component. For now lets just leave it empty</p>



<pre class="wp-block-code"><code>import { IonPage, IonContent } from '@ionic/react';

const Todo = () =&gt; {
  return (
    &lt;IonPage&gt;
      &lt;IonContent&gt;
      &lt;/IonContent&gt;
    &lt;/IonPage&gt;
  );
};

export default Todo;</code></pre>



<p>Next what we want is to add a header. In our header we want to add the IonToolBar component and that component will have a component called IonTitle, which will contain the title of our component</p>



<pre class="wp-block-code"><code>import { IonPage, IonTitle, IonContent, IonToolbar } from '@ionic/react';

const Todo = () => {
  return (
    &lt;IonPage>
       &lt;IonToolbar>
         &lt;IonTitle>Todo App&lt;/IonTitle>
       &lt;/IonToolbar>
       &lt;IonContent>
       &lt;/IonContent>
    &lt;/IonPage>
  );
};

export default Todo;</code></pre>



<p>Ionic also requires us to define the toolbar inside of our IonContent, if we dont do this, our header won't appear on iOS</p>



<pre class="wp-block-code"><code> &lt;IonPage&gt;
     &lt;IonToolbar&gt;
       &lt;IonTitle&gt;Todo App&lt;/IonTitle&gt;
     &lt;/IonToolbar&gt;
     &lt;IonContent&gt;
        &lt;IonHeader collapse="condense"&gt;
          &lt;IonToolbar&gt;
            &lt;IonTitle size="large"&gt;Todo App&lt;/IonTitle&gt;
          &lt;/IonToolbar&gt;
        &lt;/IonHeader&gt;
     &lt;/IonContent&gt;
 &lt;/IonPage&gt;</code></pre>

Importing and adding components from Ionic React

<p>Ionic is used for creating mobile web apps using web technologies. Let's say you're a Developer who knows HTML, CSS and Javascript, those skills will transfer when using Ionic, because thats exactly what it uses. Mobile front ends created in Ionic are rendered in the DOM, same as what we use for websites.</p>



<p>Ionic React gives us access to Mobile UI elements that are commonly used in mobile apps. Also, since Ionic React, like React compiles to HTML, CSS and Javascript, we can also use it to create web applications that run on Desktop as well as Mobile and tablet, along with progressive web apps.</p>



<h2>You need:</h2>



<ul><li>Knowledge of HTML, CSS, and Javascript</li><li>Knowledge of React.js</li><li>Node.js installed on your computer</li></ul>



<h2>Creating your first Ionic React app</h2>



<h3>Install ionic-cli</h3>



<p>To start you need to install the Ionic CLI globally using npm</p>



<pre class="wp-block-code"><code>npm install -g @ionic/cli</code></pre>



<p>When its finished installing, run the following command to make sure Ionic has successfully installed</p>



<pre class="wp-block-code"><code>ionic --help</code></pre>



<h3>Initializing an Ionic react project</h3>



<p>We could choose initialize can Ionic project</p>



<ul><li>With tabs</li><li>With a side menu</li><li>A blank project with neither tabs or a side menu</li></ul>



<p>For this project, we'll initialize a blank project</p>



<pre class="wp-block-code"><code>ionic start myFirstApp blank</code></pre>



<p>Note that you'll be asked whether you want an Angular or React project. Choose React.</p>



<h2>Starting up our new Ionic project</h2>



<p>Starting our Ionic project is simple, we just have to go into the directory of our new project run ionic start</p>



<pre class="wp-block-code"><code>cd myFirstApp
ionic serve</code></pre>



<p></p>

Tutorials, articles and quizzes on Software Development

More Articles