React Context API + Typescript + PWA

Hi! My name is Yahya Sahaja. This is the first time I’m trying to share experiences and practices. So, a couple of days ago, I’m trying to build React Application. But considering to utilize the latest technology, yap, using React JS + Typescript as shown on the title, and a little bit touch of Progressive Website Application.

Here we go!

React JS is a library from Facebook to handle client-side for a website application. We could dive into the React app using javascript, but yep, I think we have to take care of the next large app that will be more complicated, handled by the team members. We need to assert what we have defined to work with, so came across those problems, Typescript blowing up!

And on the other side. There are so many reasons why the industries would rather choose the best pattern and technologies for their business. The reason is all about the user experiences to gain users! There are so many ways we could see to improve our app to gain users, such as SEO, Analytics, etc. But we’re not talking about that now, maybe on another day, I will post about it. One of the most important things is performance and user experience. Progressive Website Application is a method that we could implement it to our application to be more user-friendly. Because nowadays, people always using the smartphone to be used on every daily activity. PWA knows how to turn website application as similar as native application does.

To the point, just go dive into the core! Okay, the first part, init the project. Talking about initializing app, for a faster solution, just using create-react-app with typescript template.

npx create-react-app pokemon — template typescript

Now we could start our project. The first thing we are gonna do is thinking about the requirements, and then the app architecture. The requirements clearly about making the application that should be able to:

1. Show pokemon list (we’re gonna implement just this function in this article)
2. Show pokemon detail
3. Catch pokemon (chance 50%)
4. Give it a nickname
5. Show the caught pokemon list (and their nickname indeed)

Next, we’re gonna use MVVM design pattern, utilize Context API from React JS.

Let’s structure our folder

• src/components contains all shared components
• src/contexts contains all contexts, could be represented as ViewModel
• src/screens contains all the screens inside this app, structured by route logic

Then the app architecture:

• The Model can be found at https://pokeapi.co/api/v2/. For the image, I preferred using this https://pokeres.bastionbot.org/images/pokemon/${id}.png, it has the same id given as Pokeapi.
• The View can be found at screens
• The ViewModel can be represented as the context itself. So all the requests can only be triggered from ViewModel. There's no way to direct interaction between Model and View

Next, the UI library we’re gonna use: Material-UI. This is used because we want to make Progressive Website Application, so to create an app-like design, it’s a nice way. There are so many UI libraries out there, just pick the one that matches the requirements.

Then let’s define the Context. We assume that the context here as an observable object. So we could think that our views observing that context, then re-render if there’re any changes. Here’s one example of the Pokemon list context

Here’s the explanation, we are gonna create the context store, it has properties and actions to change that properties.

First focus on the context store properties and types

The DefaultValue interface is about all the states for pokemon context data. Such as the pokemon list itself, single pokemon data, loading, offset, and limit. Then the Actions interface is functions to mutate the state such as fetchPokemons, next (for go to the next page), etc. All the Actions interface functions are an optional property, so we have to implement it to the context store class.

Then all of them are sent to the context Provider’s value. So all the consumers could be updated if there’s a change from the states.

Then we could register that stores to the application context that might be the top of every context consumers needs

After that, let’s define the View

Just use React.useContext to observe the context from PokemonContext. And takes everything there to be implemented to the view.

I think that’s all for this article, please correct me if I got mistakes. Feel free to comment or chat with me anytime. This is the repository: https://github.com/yahyasahaja/pokemon and this is the demo: https://pokemon.ngopi.men.

What next?

This is just an example from my experience, then I’ll continue talking about SSR + CSR implemented for this project.

Thank you for reading! Happy coding!