Mendix : Building a Pluggable Widgets With React Hooks

Explore how React enables a declarative, efficient, and flexible JavaScript library for building user interfaces by composing reusable components with state and hooks.

Create your first react application using the Windows Terminal and create react app. Start the development server to view it in the browser, then edit hello world text.

Examine the react project structure, including public and source folders, npm dependencies like react and react-scripts, and how index.html and the app component render the app.

Create four new React components: profile, main, search, and user, and visualize the app component's child components in a browser, using React dev tools.

Add Bootstrap to the Mendix pluggable widget project by linking it in the head to enable styling and layout, and apply Bootstrap classes for a bordered component layout.

Build a user component using bootstrap styles and a card layout in the Mendix course, with inline styles for image sizing inside a stateless React component.

Learn to design an isolated, reusable cart component using props such as image, title, description, action name, and action event, turning a static UI into a modular, shareable component.

Refactor the card component by mastering props, using spread and destructuring to pass a card object with image, title, description, and action name.

Render multiple product cards by mapping a products array inside the search component. Pass each product as a prop and trigger an alert with the action name on click.

Style components with bootstrap classes and flex utilities to create consistent layouts, borders, and padding; apply the same styles across components, and manage overflow and height for scrollable areas.

Learn how component states redraw the UI using the useState hook, as typing in an input updates the app name and reflects across the UI.

Update the parent component state triggers reruns of itself and all child components, re-executing their functions and redrawing the UI. For large data, use memorization or caching to improve performance.

Explore how updating a child component's state with useState affects rendering, demonstrating onChange handling, passing state to a child, and conditional rendering using React fragments.

Demonstrates updating a parent component's state from a child by wiring a setter through controller, profile, and user components to change the app background color.

Explore replacing prop drilling with React context API, using use context, creating an app state context, and sharing the set background function across components via a data wrapper.

Discover how to immutably update object state in React hooks by copying the current state, using the spread operator, and updating nested fields like name and password with onChange handlers.

Explore the useReducer hook to manage state with a reducer, dispatching actions (type and payload) to update state for increment and decrement, improving readability and maintainability.

Learn how to implement the useReducer hook. Create a reducer with initial state, dispatch actions (type and payload), and update a background color via context.

Refactor the app using useReducer by moving action types to a separate actions folder, creating action creators, and extracting the reducer, then wire it into useReducer and verify functionality.

Refactor your useReducer reducer using immer's produce to safely update complex state with nested objects and arrays in React hooks.

Add a random product to the global search state by dispatching a random product action from the user component, updating the products array via context and reducer.

Learn to create reusable custom hooks that access app state and dispatch via a shared context, refactor code with the new hook, and apply it across components.

Refactor a user component by extracting ui logic into custom hooks, separating ui and business logic with use header and use user events for cleaner, reusable components.

Refactor main component into a user info part and a background part, using a user info hook and another background hook to manage the background and respond to user changes.

Explore the use effect hook and its lifecycle roles for mounting and updating state, triggering side effects after renders with and without arguments, illustrated by a username and password example.

Explore useEffect with an empty array, showing it runs on first render; use multiple effects, fetch data, and focus inputs, while noting strict mode may cause double runs.

Use useRef to store a value between renders and access a dom element via its current property. Demonstrate primitive and reference type usage.

Use useEffect with a dependency variable by creating a custom hook, and manage the first render with a ref; add a random product when the username changes in search component.

Implement a reusable custom hook usePassFirstMount to skip the initial render and execute a provided function on subsequent updates, with a configurable dependency array.

Learn to scaffold a Mendix widget project by installing npm packages, including Yeoman and the Mendix widget generator for a React component, to set up and start widget development.

Create an empty Mendix project and initialize the first pluggable widget using React hooks and a functional components template, then synchronize, build, and render the sample text passed as props.

Prepare the widget project structure by cleaning up unused files, preserving the UI folder, and defining properties within the Learning Widget Example to inspect props.

Learn how static string keys define props in Mendix pluggable widgets built with React, and how to pass values to display dynamic text on the widget.

Explore static widget types, including multi-line strings, boolean, integer, decimal properties, and enumeration values with colors. The lesson ends by introducing a future custom hook to access these properties.

Learn to destruct static widget properties with a React hook, map them to the UI, and display static string, multi-line string, bool, integers, and decimal values in Mendix pluggable widgets.