REACT DIGITAL GARDEN
What is new in My Digital Garden Last Month — (in Feb 2022)
Every month I give updates in my digital garden. February, On February, I focused mainly NoCode Development and design IDE for Users.
Dynamic Routing2
Here you will find a quick demonstration. This is a sample Dynamic Routing 2 application. I used Dynamic Routing capability for NoCode development.
In the animation below, you can see the Complex IDE Layout. First we create the page with Name and Path URL.
- Landing Page — /landing or /
- Signup Page — /signup
- Signin Page — /signin
- Forgot Password Page — /forgot-password
- Home Page — /home
Then we open pages from left sidebar and add navigation buttons to other pages.
After navigation binding, we can see the page redirections in the Storyboard tab.
The user can switch the mode to the Run mode and try how the navigations and page redirections work.
Below video displays the Cypress Test of Routing2.
Error Boundary
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
Here you will find a quick demonstration. This is a sample Error Boundary application. I setup an application, if the counter is bigger than 4, then it gives a rendering error and the page will be crashed.
If we wrap rendering containers with Error Boundary, it catches the rendering error and we can handle it.
Dynamic Form Binding
Here you will find a quick demonstration. This is a sample Dynamic Form Binding application for NoCode development.
Form elements can be input, dropdown, checkbox, radio button, etc. In the previous examples, we can add text and password inputs. In this example, we also added a dropdown component, but it has some challenges about source binding.
The below animation presents the binding mechanism.
Dynamic NPM Import
Here you will find a quick demonstration. This is a sample Dynamic NPM Import application.
Load a component or npm package dynamic and lazy. Then use it in application.
Dynamic Data Table Binding
Here you will find a quick demonstration. This is a sample Dynamic Data Table application. I used Dynamic Table capability for NoCode development.
- First step: User adds a table into a page
- Second step: User defines fetch actions for table data.
- Third step: Bind Table and Actions Result
- Fourth step: User defines which columns are displayed or hidden.
Let’s continue reading 😃
You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share
