Pokedex

Category: Widgets
Subcategory: Display widgets

Overview

For those who love pokemon game. This is an example how to make a nice pokedex with React in Mendix

Documentation

Demo urlhttps://reactpokedex-sandbox.mxapps.io/index.html

Description

For those who love to know how to use React in mendix. The source code demonstrate how it can handle API call via axios and render within the widget

Typical usage scenario

Display the list of pokemon from pokedex api. Including category and search.

Features and limitations

Features:

  • List of Pokemons
  • Categories of Pokemons
  • Details and type of each pokemons

Limitations:

  • Render within a page which contain atlas top bar layout

Dependencies

  • Mendix 9.4

Installation

1- place the widget on Home_Web

2- run local and start to enjoy

 Configuration

- Note: in case you want to build the widget again github (make sure that pluggable widget tools is version 8.18.3

you need to add these line into /node_modules/@mendix/pluggable-widgets-tools/configs/webpack.config.dev.js

 {

                test: /\.(js|jsx)$/,

                exclude: /(node_modules)/,

                loader: 'babel-loader',

                options: {

                  presets: [

                    '@babel/preset-env',

                    '@babel/react',

                    {

                      plugins: ['@babel/plugin-proposal-class-properties'

                       , '@babel/plugin-transform-runtime'

                    ],

                    },

                  ],

                },

            },

            {test:/.(png | jpg | gif | svg)$/, use:['url-loader?limit=8192&name=./[name].[ext]']},

            {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=app/images/[name].[ext]"},

 Then add these line into /node_modules/@mendix/pluggable-widgets-tools/configs/webpack.config.common.js

            {test:/.(png | jpg | gif | svg)$/, use:['url-loader?limit=8192&name=./[name].[ext]']},

            {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=app/images/[name].[ext]"},

Bugs

None

Releases

Version: 1.0.0
Framework Version: 9.4.0
Release Notes: - Pokedex. List all pokemon characters. The easy way to learn react via building something you love.