Handle our layout with Ionic grid

Introduction to Ionic React

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

Displaying Todo items in an Ionic React App

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

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

Intro to Ionic React

How to use React Suspense

Intro to a2 hosting with Node.js

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=2IcqTW4g7Nk
</div></figure>



<p>First, we want to set up make sure we're in our CPanel interface, which should look like the following</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.28.17-PM-1024x616.png" alt="" class="wp-image-301" width="768" height="462"/></figure>



<p>Then, we want to scroll down to Software and select Setup Node.js App, This should take you to a panel that looks like the following</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.32.33-PM-1024x625.png" alt="" class="wp-image-302" width="768" height="469"/></figure>



<p>Lets hit the orange create application button on the top right corner, you should be sent to a set of options that look like the following</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.34.31-PM-1024x641.png" alt="" class="wp-image-303" width="768" height="481"/></figure>



<p>Lets set our Node.js version to be 12.9.0 and then add an application root and our application url. Note that this will be the url of the root of our application. This is important to note when we start looking at setting up Express.</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.38.24-PM-1024x639.png" alt="" class="wp-image-305" width="768" height="479"/></figure>



<p>Now hit the orange create button and you should see that your node application is ready and running</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.40.04-PM-1024x631.png" alt="" class="wp-image-306" width="768" height="473"/></figure>



<p>Now we can go to the application url and we will see the following hello world page show up</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.41.33-PM-1024x537.png" alt="" class="wp-image-307" width="768" height="403"/></figure>



<p>But what if wanted to make a change, first we'd need to go back to our CPanel interface, then we go to the file manager, whose icon looks like the following</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.42.58-PM.png" alt="" class="wp-image-308" width="288" height="92"/></figure>



<p>Then search for the folder with the name we used for the Application Root column when we set up our application. It should contain the following files</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.43.46-PM-1024x75.png" alt="" class="wp-image-309" width="768" height="56"/></figure>



<p>We can go on app.js and update the message inside, I'm going to update the message to say "Welcome to Victoryflame!!!"</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.45.55-PM-1024x547.png" alt="" class="wp-image-311" width="768" height="410"/></figure>



<p>Then I'll press the blue button to save my changes. I'll want to go back into our CPanel interface and select Setup Node.js app again. This time, we want to select the restart application icon next to the project we just created</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.47.29-PM-1024x505.png" alt="" class="wp-image-312" width="768" height="379"/></figure>



<p>Now when we go back to our application url, we should see our updated message</p>



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.48.30-PM-1024x599.png" alt="" class="wp-image-313" width="768" height="449"/></figure>

Tutorials, articles and quizzes on Software Development

More Articles