{"id":13671720,"url":"https://github.com/ykforerlang/tinyreact","last_synced_at":"2025-08-16T16:05:34.179Z","repository":{"id":83880542,"uuid":"101163788","full_name":"ykforerlang/tinyreact","owner":"ykforerlang","description":"a tiny react help you understand react better","archived":false,"fork":false,"pushed_at":"2018-04-11T01:28:51.000Z","size":308,"stargazers_count":39,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T22:12:08.757Z","etag":null,"topics":["react","react-library","react-like","tiny"],"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/ykforerlang.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}},"created_at":"2017-08-23T09:39:11.000Z","updated_at":"2023-11-21T11:33:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"da1706db-8d6c-41d8-8da4-c202de8c5c4a","html_url":"https://github.com/ykforerlang/tinyreact","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ykforerlang/tinyreact","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykforerlang%2Ftinyreact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykforerlang%2Ftinyreact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykforerlang%2Ftinyreact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykforerlang%2Ftinyreact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ykforerlang","download_url":"https://codeload.github.com/ykforerlang/tinyreact/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ykforerlang%2Ftinyreact/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270734952,"owners_count":24636271,"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-08-16T02:00:11.002Z","response_time":91,"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":["react","react-library","react-like","tiny"],"created_at":"2024-08-02T09:01:17.103Z","updated_at":"2025-08-16T16:05:34.118Z","avatar_url":"https://github.com/ykforerlang.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# tinyreact\ntinyreact is tiny, simple and clear react-like lib. It will help you understand react better.\n\nso first, let's play [todoList](https://ykforerlang.github.io/todo/index.html) written by tinyreact\n\n### Install\n```\nnpm install tinyreact --save\n```\n\n### Getting Started\nlet's write 'Hello World':\n1. .babelrc \n```jsx harmony\n{\n  \"presets\": [\n    \"es2015\"\n  ],\n  \"plugins\": [\n    [\"transform-react-jsx\", {\n      \"pragma\":  \"createElement\"// default pragma is React.createElement, we should change!\n    }]\n  ]\n}\n```\n2. npm install tinyreact --save\n\n3. write your code like React\n```jsx harmony\nimport Tinyreact, { createElement, Component } from 'tinyreact'\n\nclass HelloWorld extends Component {\n    render() {\n        return \u003cdiv style={{ color: 'red' }}\u003eHello World\u003c/div\u003e\n    }\n}\n\nTinyreact.render(\u003cHelloWorld/\u003e, document.getElementById(\"root\"))\n```\n\n### Feature\n* virtual-dom\n* life-cycle\n* SyntheticEvent\n\n### TODO\n* batchUpdate\n* high-performance virtual-dom\n* fiber\n\n### Example\n 1. [helloword](https://github.com/ykforerlang/tinyreact/tree/master/example/helloworld) \n 2. [lifecycle](https://github.com/ykforerlang/tinyreact/tree/master/example/lifecycle)\n 3. [yiwandiv](https://github.com/ykforerlang/tinyreact/tree/master/example/yiwandiv)\n 4. [TodoList](https://github.com/ykforerlang/todo)\n\n### Blog\n\n1. [从0实现一个tiny react(一)](https://github.com/ykforerlang/tinyreact/blob/master/blog/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtiny%20react(%E4%B8%80).md)\n2. [从0实现一个tiny react(二) virtual-dom](https://github.com/ykforerlang/tinyreact/blob/master/blog/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtiny%20react(%E4%BA%8C).md) \n3. [从0实现一个tiny react(三) 生命周期](https://github.com/ykforerlang/tinyreact/blob/master/blog/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAtiny%20react(%E4%B8%89).md) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fykforerlang%2Ftinyreact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fykforerlang%2Ftinyreact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fykforerlang%2Ftinyreact/lists"}