Overview

Documentation

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