Customize the Code
Explore how to customize your Ionic React application by modifying the appPages array, adding new pages, and updating icons. Understand how routing works with generic components and see immediate results through live reloading. This hands-on lesson helps you build confidence in tailoring your app's navigation and interface before moving to the next chapter.
We'll cover the following...
Adding a page
Before we leave this hello-ionic app, let’s do a couple of fun things. How do you think you might customize that page list? If you said, “modify the appPages array,” give yourself a pat on the back! I noticed that there is no Sent Mail page, so let’s create one quickly and see what happens.
Put it right between Outbox and Favorites.
Select the second instance of the word Outbox to Sent Items, and the url to /page/sent. Leave the two icons alone for now. Microsoft Outlook uses that paper airplane icon for sent items. Instead, change the icon for outbox to albumsOutline for iOS and albumsSharp for the MD. Now here’s where it gets fun. As soon as you save these changes, the application will be rebuilt automatically, and the browser will reload to reflect these changes.
If all went well, you should see something like the following:
Page readiness
What do you think will happen if you click on the new Sent menu? We did not create a new page or route, so will we get a 404? Nope. The Page component will render with its name set to the name portion of the route. This is because the Page component is itself a generic object.
Not every page will be that clean, but we will make use of this pattern in later chapters.
Run the following to observe the above changes to our application.
Run the application
iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAilBMVEVHcExH iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9H iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9H iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9W kbhyAAAALXRSTlMA6fH5rdwnAiEH0+btgEEEhIdflMmPDhUatIxwnWlXMNV1 EEtIpjajv9fMK6VUL25nAAACmklEQVRYw61X6ZqqMAwFpqwFZBXZdNDRcWbk /V/vYsvSlrL25oefHzQhPTk5TSWJb7p29kGkQtuGagT8s6ZLG+zgxtZHTdmH FbuHle6nyqq5ZlWnFe6JJ9eTZmfHBXe9hPWcxea8/9+T3risWpYqD3A470Va GWeBwfUPlMEZgtw1rqaum1fDzQFKLG3WXAsUT/E5uWS9t/J9YzZ7vH0rtdb4 R92alI1g3nuofG6C2rn5eQ05+ow/6F4UxjRIDxIhap3efV+9zaHskRiXvP2n 81wBVE1J/Ntn4QLlqQAhgU9bv2yJpxkZIB8AeI5CTphLgqj1j8t2/8stq6dD gGLoH9w+arKi1wy184+ubG2+RrJwCZwwdIILKQRGm8Nr+FxiMxm1K51eFiyH 5IybAeA93v9y/LjC9KcJYDo2JQQOp3ecukJLPznM1iJWCSKNbf2GE59mXxk6 gQdHVuCDyhB3tdv8jTEm1Pe5sgSpHNKOzbo1KoH5y9ezXxKHLwzvQdJQKvBI gTNhDqkwsGXjGb0CZP2UqQCKMeqrs+QzfTGTAJ1C3hYPB3IJBH6mA/yYbF8B KWLV6TJ3LlyInSLwIgk1h3wcawvXAgJF1IKqhMBUzQnZY80jtoo+DSVEeYtQ gnAuACE5mEC2eADhLQiDKFxGYSIJU1m4mYTbWVBQ9N2S9uoP6H2ielL66u2T dVw8JOu7DpY2gWrX0fa2AodNdhyuRAn61tpyvGMHfMbLyfYBg5oyyh0jDik5 T33HkEUMWgpV17VjXpNtONaWDYOmdOqmLDbZlaPurZux7qNU1wzbRtGtAZyJ Z3HcN/ye3XdzYY6duHDU9UKxlq48bfRg/6UL8edP5NpXw3KJKbMXT9lb03CC V9//cPnedv3/B03WKCmdQSV1AAAAAElFTkSuQmCC
If you want to see where those icons came from, refer here.
For more information on the components, you can click the components link right in the middle of the hello-ionic app itself.
And that wraps up this chapter! You should now know how to create a new Ionic-React app and do some minor customizations.
So, go forth, delight in your newfound skill. Play around a bit between before you start the next chapter. When you are ready, we’ll continue the journey.
Quiz
Suppose you wish to create a new ‘Drafts’ page. How would you do that? Suppose the icons for it are called documentOutline and documentSharp.
Add the following to appPages:
...
{
title: 'Drafts',
url: '/page/Drafts',
iosIcon: albumsOutline,
mdIcon: albumsSharp
},
...
Create a new route for Drafts with IonReactRouter.
Modify labels to look like const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders', 'Drafts'];