{"id":51691554,"url":"https://github.com/devjubayr/declarative_ui","last_synced_at":"2026-07-16T02:34:46.369Z","repository":{"id":305616302,"uuid":"1023018947","full_name":"devjubayr/declarative_ui","owner":"devjubayr","description":"Understand Designing State and thinking declaratively in react ","archived":false,"fork":false,"pushed_at":"2025-07-21T04:22:14.000Z","size":26,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-16T02:34:25.250Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devjubayr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-20T11:00:23.000Z","updated_at":"2025-09-30T18:47:40.000Z","dependencies_parsed_at":"2025-07-21T06:21:27.318Z","dependency_job_id":"b4686c85-2e6d-4620-8b2d-50b79fc77001","html_url":"https://github.com/devjubayr/declarative_ui","commit_stats":null,"previous_names":["mr-jubayer/declarative_ui","jubayerahmed2/declarative_ui","crosbow/declarative_ui","devjubayr/declarative_ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devjubayr/declarative_ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fdeclarative_ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fdeclarative_ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fdeclarative_ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fdeclarative_ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devjubayr","download_url":"https://codeload.github.com/devjubayr/declarative_ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devjubayr%2Fdeclarative_ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35528482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-16T02:00:06.687Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-16T02:34:45.641Z","updated_at":"2026-07-16T02:34:46.361Z","avatar_url":"https://github.com/devjubayr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Thinking about UI declaratively ( Design UI, Defining State )\n\n- To Implement a UI and manage states always follow these steps:\n\n1. Identify your component’s different visual states\n   - _For ex_: A form that has it's (Empty - Typing - Submitting - Success/Error)\n2. Determine what triggers those state changes ( make diagram )\n   - _For ex_: The is two type of user trigger - 1. Typing 2. Click Submit\n   - _But_: The computer will take more decision/trigger, like give \"success\" or \"Error\"\n3. Represent the state in memory using _useState_\n   - Represent all state in memory using useState for every needed state\n4. Remove any non-essential state variables\n   - Remove states those can manage using others state. Like we've three status \u003e Submitting, success, Error.\n     We can manage typing and empty state using others state.\n5. Connect the event handlers to set the state\n\n\u003chr\u003e\n\nLearn more: \u003cbr\u003e\n\u003ca href=\"https://react.dev/learn/reacting-to-input-with-state\"\u003e React Doc Article \u003c/a\u003e \u003cbr\u003e\n\u003ca href=\"https://reactive-accelarator.vercel.app/reactive-accelarator/React-js/module-3/declaretive-imperative\"\u003e Lws Doc Article \u003c/a\u003e\n\n### When developing a component:\n\n- Identify all its visual states.\n- Determine the human and computer triggers for state changes.\n- Model the state with useState.\n- Remove non-essential state to avoid bugs and paradoxes.\n- Connect the event handlers to set state.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevjubayr%2Fdeclarative_ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevjubayr%2Fdeclarative_ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevjubayr%2Fdeclarative_ui/lists"}