REACT DIGITAL GARDEN
React Digital Garden’s entire infrastructure has been upgraded. (Oct 2023)
I have updated the React Digital Garden infrastructure from top to bottom, including the libraries used, the transition from Class Comp to Function Comp, singularization in the UI Library, update in Navigation structure, changes in Project Structure and Folder structure, and so on. These topics will be discussed further below.
In the post linked below, I discussed how, in September, I converted access to sample apps via Page Navigation into a Knowledge and Sample based framework.
Big Impact, Big Change: Updates from My Digital Garden in September 2023
These adjustments I performed in the Frontend, Navigation section were the visible portion of the job; the main work was to undertake logical and structural refactoring operations in the infrastructures in parallel with these frontend improvements.
Let us return to the beginning and briefly discuss my first structure. My goal in the first examples was to create an infrastructure that could be used to generate standalone examples and applications.
In Background (Architecture)
We need an abstracted sandbox, so our mini-applications don’t affect each other. Below, architecture tells how I develop my dynamic environment.
Dynamic Module Loader
Every module(mini-app/experiment/plant) should load lazily when the user clicks the navigation cards, and redirect the modules will load after that time. But How?
React Lazy provides to load components Lazy with Suspense wrapping. So first, define your routing with React Lazy.
With the growing number of applications and the requirement to develop content for LearnReactUI.dev, I was obliged to construct KnowledgeMap, a layer on top of Digital Garden.
One of the examples I built on Learn ReactUI dev will help me explain the subject more clearly.
I’ll write an article about Mastering React Client State Management.
- A manual on how to use it
- Source Codes,
- as well as a Demo environment containing these codes
This application is being built using React Digital Garden. And the Knowledge Map link for the issue I’d like to explain is provided below.
As seen above, the demo and content are complete, but how do I export the code? The refactoring work I’d been doing for the past two months was actually for this export process.
For this, I reduced the page logic to merely Wrapper codes. I relocated all page codes to sample files, i.e., Knowledge packages, in the same way as I moved all digital gardens’ component, container, store, network, mock data, etc… codes into their appropriate knowledge packages and renamed them.
In addition to these structural modifications, I added a KnowledgeMap to each sample accessed in the Sample Menu for ease of use; you may access the Knowledge Map in these menus by clicking on the sample or the knowledge.
Not:
Don’t forget to sign up for LearnReactUI.dev now to take advantage of free content.
