{"id":30687653,"url":"https://github.com/naratteu/reactwebcomponentforblazor","last_synced_at":"2026-04-17T15:33:41.192Z","repository":{"id":309655885,"uuid":"1035723891","full_name":"naratteu/ReactWebComponentForBlazor","owner":"naratteu","description":"리액트를 블레이저에서 컴포넌트 단위로 활용하기 위한 프로젝트 구성 템플릿 입니다.","archived":false,"fork":false,"pushed_at":"2025-08-20T06:47:52.000Z","size":14,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-20T08:39:06.299Z","etag":null,"topics":["blazor","react","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naratteu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-11T01:55:47.000Z","updated_at":"2025-08-20T06:47:56.000Z","dependencies_parsed_at":"2025-08-13T19:01:06.690Z","dependency_job_id":null,"html_url":"https://github.com/naratteu/ReactWebComponentForBlazor","commit_stats":null,"previous_names":["naratteu/reactwebcomponentforblazor"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/naratteu/ReactWebComponentForBlazor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naratteu%2FReactWebComponentForBlazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naratteu%2FReactWebComponentForBlazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naratteu%2FReactWebComponentForBlazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naratteu%2FReactWebComponentForBlazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naratteu","download_url":"https://codeload.github.com/naratteu/ReactWebComponentForBlazor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naratteu%2FReactWebComponentForBlazor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273208777,"owners_count":25064204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"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":["blazor","react","webcomponent"],"created_at":"2025-09-02T00:03:55.029Z","updated_at":"2026-04-17T15:33:41.187Z","avatar_url":"https://github.com/naratteu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactWebComponentForBlazor\n\n리액트를 블레이저에서 컴포넌트 단위로 활용하기 위한 프로젝트 구성 템플릿 입니다.\n\n## How to test\n\n```bash\ngit clone https://github.com/naratteu/ReactWebComponentForBlazor\ncd ReactWebComponentForBlazor\n\ndotnet new blazor -o BlazorApp\ncd BlazorApp\ndotnet add reference ../ReactLib\n```\n\n생성된 프로젝트의 `Program.cs` 에 아래 의존성을 추가합니다.\n\n```cs\nbuilder.Services.AddScoped\u003cReactLib.ReactLibLoader\u003e();\n```\n\n```bash\ndotnet build # 한번 해줘야댐\ndotnet watch # href /Test\n```\n\n실행된 블레이저 웹앱의 `/Test`경로에 접속하여 `WebComponent`로 정적출력 된 리액트컴포넌트와 블레이저간의 양방향 바인딩효과를 확인할 수 있습니다.\n\nhttps://github.com/user-attachments/assets/b00622d0-c6b9-472d-b873-5fad8e50f65b\n\n## Todo\n\n- `onchange` 등의 알려진 이벤트 핸들러 뿐만이 아닌 커스텀 이벤트 핸들러로도 바인딩이 가능해야 합니다.\n    - https://github.com/dotnet/aspnetcore/issues/27651\n\n## Potential\n\n- `react` 뿐만 아니라 `stencil`, `lit` 등 모든 `WebComponent` 지원 생태계로 블레이저를 확장.\n    - https://github.com/solidjs/solid/tree/main/packages/solid-element\n- `.jsx` 말고 `.tsx`, `.mdx` 도 넣어보기\n- 블레이저 참조용 리액트 프로젝트에 반복적으로 작성될 코드에 대한 소스생성기 혹은 Sdk 까지 구성할수 있지 않을지?\n    - https://www.npmjs.com/package/vite-plugin-codegen\n\n## Thanks\n\n- https://github.com/bitovi/react-to-web-component\n\n## See also\n\n- https://blog.aliencube.org/ko/2020/06/03/adding-react-components-to-blazor-webassembly-app\n- ~~https://www.perplexity.ai/sidecar/search/blazoryi-two-way-bindinggwa-re-P92NWn8lRiiI_rXdCGdpGA~~\n    - 위 출력된 내용이 가능한것이라면, `astro` 등 다른프레임워크의 하위로 `blazor`컴포넌트가 사용될수도 있을거 같음.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaratteu%2Freactwebcomponentforblazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaratteu%2Freactwebcomponentforblazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaratteu%2Freactwebcomponentforblazor/lists"}