Developer Jahia 8.2

ReactJS and Jahia: an example with TypeScript and a Pokedex

Question

Goal

The goal of this training is to have a Pokedex available in jContent thanks to ReactJS and the new capabilities of Jahia User Interface.

pokedex_main_page.png

 

pokedex_pokemon_details.png

pokedex_pokemon_edit.png

Solution

Prerequisites

For each part of this training, there will be the related branch in the Github repository.

Development

Getting started

ReactJS is a Javascript framework to help building user interfaces.

In our case, we will be using the syntax ECMAScript 6 (ES6) and, to have a code more strict and easy to read, we will be using Typescript.

The file package.json

This file allows configuring the dependencies for the Node package manager (and other things).

Add the file package.json at the root of the module.
 

The file tsconfig.json

This file allows configuring Typescript.

Add the file tsconfig.json to the root of your module.

Open the file and you should have something like that: tsconfig_1.png

As you can see, we're setting the value react for the property jsx. Consequently, our React files will have an extension .tsx.

The part tsconfig_2.png 

defines where the ReactJS files will be. If this folder doesn't exist, create it.

Webpack

webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

Add the files ./webpack.config.js and ./webpack.shared.js.

webpack.config.js

Some important properties:

  • output.filename: file that will be generated, webpack_config_fiename.png

  • ModuleFederationPlugin: module_federation_plugin.png

webpack.shared.js

Additional configuration used in the previous file.

Installing the dependencies

Execute the command following in the root of the module: 

 

 

npm install

 

Build, deploy and test your module

As usual, build and install the module.

Then you can create a website and add this module as dependency. As a result, you should have that: getting_started_pokedexAdmin.png

During the development, I advise using Chrome. Do not forget to activate the developer tools and to check the cache is deactivated: chrome_cache.png

Hooks

A hook is a special function that lets you "hook into" various React features. 

State hook

This hook allows setting a state on a variable: A state is the data a stateful program is managing. info. In JavaScript, a variable is a memory for storing data. And the variable's value is the state. In other words, a variable is like a diary, while a state is the data logged into that diary

Here is a useful tutorial:

React Hooks for Beginners – Learn to Use the useState Hook in 10 Minutes

Now, add the files:

Then modify the file App.tsx so the number of Pokemons is displayed (correction there)

Effect hook

The Effect Hook lets you perform side effects in function components: useEffect is a tool that lets us interact with the outside world but not affect the rendering or performance of the component that it's in.

Here is a useful tutorial:

The React useEffect Hook for Absolute Beginners

Now, use this hook to initialize the value of the constant pokemons (correction there).

Virtual DOM

When returning the "HTML" code to render, it has to be included between one root tag.

Modify the previous code to display the list of Pokemons with their information (correction there).

If you don't have a scrollbar, try to put a style on the root tag.

The Props

Props stands for properties and its usage is optional. It's being used as arguments for React components.

Here is a useful tutorial:

How to Use Props in React.js

We're going to create now components to have a model like that: model.png

Correction can be found there.

CSS: usage of Materialize

Our current Pokedex is not very nice to look at: pokedex_unstyled.png

Let's try to have something more modern:

  • Download the CSS Materialize from there and put in ./src/javascript

  • Unfortunately, this library seems to be in conflict with Jahia UI so here is a library with the necessary elements from Materialize

  • Import this CSS in the pokemon-card.tsx

You should now have something like that: pokedex_styled.png

Correction can be found there.

Interactivity

Now, let's add a green border on the pokemon-card, then, when it's done, let's modify this color when the mouse is over the component then green when it's not.

Correction can be found there.

Computed properties

Now, let's display the type(s) for each Pokemon.

Then, to add some difficulty, let's give a specific color for each type (cf this code to get a color from a type).

Here is the result: pokemon_types.png

Correction can be found there.

Personalized hooks

A personalized hook is a function, starting by the term use, that can call other hooks.

It can be used to factorize some behavior.

Here is a useful tutorial:

Building Your Own Hooks – React

In our case, we are going to gather the following code into a personalized hook named usePokemons: personalized_hooks.png

The Routes

The new Jahia UI allows the addition of our Pokedex in different places (cf this documentation).

To get a dynamic list of these different places, you can execute the following code in the Javascript console: 

 

 

window.jahia.uiExtender.registry.registry

Don't hesitate to study the content of this object, especially the properties set for the Pokedex but also the ones set for other menus (for example, the property requiredPermission).

For the moment, it's being added to the site settings thanks to the following code: registry.png

Now, the goal is to add it in:

  • the server settings

  • the global interface (like jContent, Page composer, etc)

  • the user dashboard
     

Correction can be found there.

Execute GraphQL requests

Until now, we were using a static JSON to retrieve a list of Pokemons but, of course, we can retrieve the Pokemons thanks to Jahia.

The goal of this current chapter is to execute GraphQL queries against Jahia to populate the Pokemons list:

Correction can be found there.

Now that we're able to display a list of the Pokemons stored in Jahia, we're going to display the detail of a specific one with a single click but first, please have a look this example: https://reactgo.com/react-router-usehistory-hook/

Then:

The Forms

The idea is now to do a custom form so we can have a full CRUD system without having to use jContent/Content Editor

So: