https://github.com/devjubayr/declarative_ui
Understand Designing State and thinking declaratively in react
https://github.com/devjubayr/declarative_ui
Last synced: 6 days ago
JSON representation
Understand Designing State and thinking declaratively in react
- Host: GitHub
- URL: https://github.com/devjubayr/declarative_ui
- Owner: devjubayr
- Created: 2025-07-20T11:00:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-21T04:22:14.000Z (about 1 year ago)
- Last Synced: 2026-07-16T02:34:25.250Z (6 days ago)
- Language: JavaScript
- Size: 25.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Thinking about UI declaratively ( Design UI, Defining State )
- To Implement a UI and manage states always follow these steps:
1. Identify your component’s different visual states
- _For ex_: A form that has it's (Empty - Typing - Submitting - Success/Error)
2. Determine what triggers those state changes ( make diagram )
- _For ex_: The is two type of user trigger - 1. Typing 2. Click Submit
- _But_: The computer will take more decision/trigger, like give "success" or "Error"
3. Represent the state in memory using _useState_
- Represent all state in memory using useState for every needed state
4. Remove any non-essential state variables
- Remove states those can manage using others state. Like we've three status > Submitting, success, Error.
We can manage typing and empty state using others state.
5. Connect the event handlers to set the state
Learn more:
React Doc Article
Lws Doc Article
### When developing a component:
- Identify all its visual states.
- Determine the human and computer triggers for state changes.
- Model the state with useState.
- Remove non-essential state to avoid bugs and paradoxes.
- Connect the event handlers to set state.