Creating a Wordpress app based on Ionic 6 & React
By: Julian Vasa
Tags: React, React Hook, Ionic Framework, Rest Api, WordPress

Let’s start coding 😄

The base of our app will be in the src directory, and the main entry point will be our index.tsx . If we open our project in a code editor and open src/index.tsx , we should see the following:

So what’s going on here? Well, the first three lines are pulling in some dependencies. The first being React itself. This allows us to write components in an HTML-like syntax called JSX. We’ll talk about JSX a bit later on.

The second import is for ReactDOM. The ReactDOM.render method is the browser/DOM specific way of taking our components and rendering it to a specified DOM node.

The last import is the root component for our app, simply named App . This is our first React component and will be used in the bootstrapping process for our React app.

If we open App.tsx , we should see the following (I changed the tab item icons, renamed the components):

App.tsx

So, basically we are importing IonReactRouter which is a component that wraps ReactRouter’s BrowserRouter component. Following BrowserRouter , we next have our first imports for Ionic. To use a component in React, you must first import it. So for Ionic, this means anytime we want to use a Button or a Card , it must be added to our imports. In the case of our App component, we’re only using IonApp IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs , IonRouterOutlet , and IonReactRouter . Below is the full list of imports in App.tsx: Some Ionic components, our components (located in the pages directory) and some stylesheets.

We will the have these paths (routes). When the user will open a route then a certain page (with a bunch of components) will be rendered.

/home -> Home page

page /categories -> Categories page

page /search -> Search page

page / -> Home page (fallback path if no path provided)

At this point, our app is very simple, it does nothing… we have three tabs which render three pages and that’s it how it looks like:

Now, let’s talk more in detail about the Ionic components that we’ll be using.

IonPage is the base component for all pages (a component with a route/URL), and includes some common building blocks of a full-screen component, like header, title, and content components.

IonHeader is a bit self explanatory. It's a component that is meant to exist at the top of the page. IonHeader itself doesn't do much by itself, aside from handling some flexbox-based layout. It's meant to hold other components, like IonToolbar or IonSearchbar .

IonContent is, as its name suggests, the main content area for our page. It's responsible for providing the scrollable content that users will interact with, plus any scroll events that could be used in an app.

A more complete list of Ionic components can be found here.

Now, let’s have a look at the Home page, it’s pretty simple, it has a page title, a toolbar title and a list of posts which are rendered by the PostsContainer component which will have a look next.

The PostsContainer component is a function component. We’ll be using React Hooks to retrieve the posts from the backend (WP).

We create a function (component) which has a state variable posts and then create an async function loadPosts which fetches a json response with a list of posts from a backend WP.

I will try to explain briefly what hooks are and how do they work. I think it’s very important to understand (and eventually) use hooks as it seems to be the future for React development driven by Facebook. Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.

What is a Hook? A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.

We are using two predefined hooks useState and useEffect (hook name should start with use ).

useState is a tuple (two elements) composed of a state variable and a callback function to set the state variable. useState is a normal JS function and has one param which is the default value for the state variable (in our case is an empty array)

is a tuple (two elements) composed of a state variable and a callback function to set the state variable. is a normal JS function and has one param which is the default value for the state variable (in our case is an empty array) useEffect lets you perform side effects in function components, it’s a combination of componentDidMount,componentDidUnmount and componentDidUpdate . The piece of code defined inside useEffect is called after each render of the component PostsContainer is rendered. If we don’t want to run useEffect after each render we might add some condition that checks a state variable and doesn’t run after each render.

Hooks don’t work inside classes. But you can use them instead of writing classes.

In our app PostsContainer component we are declaring an async function inside useEffect which will fetch a list of posts from mozilla.org and assign this list to the state variable posts .

PostsContainer is just a component to fetch the posts and store it, the render will be handled by the Post component. Each post will be rendered as a IonCard inside a IonGrid . The list of posts, the total page number and a callback function to update the page in the parent component are passed as props by the parent component PostsContainer . It seems like the Ionic Infinite Scroll is not yet supported in React so i am going to add a simple button at the end of the page to retrieve the next 10 posts. At the end of the list there is a NextButton component which will analyze later.

The NextButtonContainer component is something like this:

And the component to render the next button looks something like this:

Again, some props are passed by the parent component NextButtonContainer.

The new stuff for me was the way to update Parent state vars from the Child component. I found a nice explanation how to it. The idea is that the Parent provides in the Child attribute a callback function which the Child calls after modifying its own state.

And now our app home page looks something like this:

I get it that the UI is not very nice so i thought i need to add a thumbnail to each post. Maybe it looks better 😃

Looks better 😃

I’ve created some similar components for the Categories page and Search.

You can find the full source in this Github repository.

I would appreciate if you give me a ⭐️

Some resources i’ve used: