Enterprise React
React NoCode Counter Examples
In this blog post, I will provide NoCode Counter examples from the EnterpriseReact website, as well as examples I made for various use cases.
In this section, I demonstrated how to design and manage a basic Counter component using drag and drop in NoCode.
The challenge in this phase is that we create components like and need to write them numerous times to multiplex them in the code.
The examples below show how I made it an independent block component in a NoCode tool.
Get Onur Dayıbaşı’s stories in your inbox
Join Medium for free to get updates from this writer.
NoCode Counter KnowledgeMap link offers access to all of the samples seen in the image below.
Note: The LearnReactUI.dev platform provides tutorials and source code for the blue-colored samples seen in the image below. For further and more complex examples you may contact me via this page. Also click on this link to access examples on other topics
Examples
Static Counter, Multiple Counter
In this example, I first created a simple Counter component. The Counter component consists of 4 element
- Inc Button
- Dec Button
- Reset Button
- Value Displayer
In the example below, we just need to write a single component for SingleCounter.
<Counter/>But you need to write these components one after the other to create a Multiple Counter.
<Counter/>
<Counter/>
<Counter/>
<Counter/>
Manage Parts
In order to configure each element of the component, these elements must be selectable when hovered over. In this example, while hovering over the component with the mouse, the border of the relevant elements is hovered and when clicked on, it logs this in the console.
Dynamic Counters
In this example, in order to switch from a static counter to a dynamic counter, we first need to take it out of the State component. I named this State generating and managing structure Store.
- Add Store: we can create this Counter State. And we can bind the desired UI components to it.
- You can see the most primitive version of this in the example below.
Dynamic Store
I diversified the Dynamic Store. I added not only Counter but also the Store that forms the infrastructure of the Say Hello component to this section.
With IDE
I tried to use this Dynamic Counter Complex by placing it inside the IDE.
Left Border contains;
- Samples Tab
- Layouts Tab
- Styling Component Tab
Right Border contains;
- Dynamic Store Tab
- Action Tab
- Flow Tab
Bottom Border contains;
- Console Tab
- Storyboard Tab
- Info Tab
