{"id":13493569,"url":"https://github.com/pomber/didact","last_synced_at":"2025-05-14T14:07:29.266Z","repository":{"id":37697901,"uuid":"87960853","full_name":"pomber/didact","owner":"pomber","description":"A DIY guide to build your own React","archived":false,"fork":false,"pushed_at":"2023-03-06T11:35:52.000Z","size":234,"stargazers_count":6480,"open_issues_count":29,"forks_count":542,"subscribers_count":67,"default_branch":"master","last_synced_at":"2025-05-07T08:45:20.924Z","etag":null,"topics":["diy-guide","javascript","jsx","react","react-internals"],"latest_commit_sha":null,"homepage":"https://pomb.us/build-your-own-react/","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/pomber.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}},"created_at":"2017-04-11T17:22:23.000Z","updated_at":"2025-05-07T07:34:15.000Z","dependencies_parsed_at":"2023-07-25T14:20:04.325Z","dependency_job_id":null,"html_url":"https://github.com/pomber/didact","commit_stats":null,"previous_names":["hexacta/didact"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fdidact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fdidact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fdidact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomber%2Fdidact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pomber","download_url":"https://codeload.github.com/pomber/didact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253411488,"owners_count":21904142,"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","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":["diy-guide","javascript","jsx","react","react-internals"],"created_at":"2024-07-31T19:01:16.678Z","updated_at":"2025-05-14T14:07:29.234Z","avatar_url":"https://github.com/pomber.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://cloud.githubusercontent.com/assets/1911623/26426031/5176c348-40ad-11e7-9f1a-1e2f8840b562.jpeg\"\u003e\u003c/p\u003e\n\n# Didact\n\n#### A DIY guide to build your own React\n\nThis repository goes together with a [series of posts](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5) that explains how to build React from scratch step by step. **You can jump straight to [the last post](https://pomb.us/build-your-own-react) which is self-contained and includes everything.**\n\n| Blog Post                                                                                                                                       |                         Code sample                          |                                                                                                                                    Commits                                                                                                                                    |                                                       Other languages                                                       |\n| ----------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: |\n| [Introduction](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5)                        |                                                              |                                                                                                                                                                                                                                                                               |                                                                                                                             |\n| [Rendering DOM elements](https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b)                                            | [codepen](https://codepen.io/pomber/pen/eWbwBq?editors=0010) |                                                                                           [diff](https://github.com/hexacta/didact/commit/fc4d360d91a1e68f0442d39dbce5b9cca5a08f24)                                                                                           |               [中文](https://github.com/chinanf-boy/didact-explain#1-%E6%B8%B2%E6%9F%93dom%E5%85%83%E7%B4%A0)               |\n| [Element creation and JSX](https://engineering.hexacta.com/didact-element-creation-and-jsx-d05171c55c56)                                        | [codepen](https://codepen.io/pomber/pen/xdmoWE?editors=0010) |                                                                                           [diff](https://github.com/hexacta/didact/commit/15010f8e7b8b54841d1e2dd9eacf7b3c06b1a24b)                                                                                           |          [中文](https://github.com/chinanf-boy/didact-explain#2-%E5%85%83%E7%B4%A0%E5%88%9B%E5%BB%BA%E5%92%8Cjsx)           |\n| [Virtual DOM and reconciliation](https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0)                  | [codepen](https://codepen.io/pomber/pen/WjLqYW?editors=0010) | [diff](https://github.com/hexacta/didact/commit/8eb7ffd6f5e210526fb4c274c4f60d609fe2f810) [diff](https://github.com/hexacta/didact/commit/6f5fdb7331ed77ba497fa5917d920eafe1f4c8dc) [diff](https://github.com/hexacta/didact/commit/35619a039d48171a6e6c53bd433ed049f2d718cb) | [中文](https://github.com/chinanf-boy/didact-explain#3-%E5%AE%9E%E4%BE%8B-%E5%AF%B9%E6%AF%94%E5%92%8C%E8%99%9A%E6%8B%9Fdom) |\n| [Components and State](https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37)                                                |       [codepen](https://codepen.io/pomber/pen/RVqBrx)        |                                                                                           [diff](https://github.com/hexacta/didact/commit/2e290ff5c486b8a3f361abcbc6e36e2c21db30b8)                                                                                           |            [中文](https://github.com/chinanf-boy/didact-explain#4-%E7%BB%84%E4%BB%B6%E5%92%8C%E7%8A%B6%E6%80%81)            |\n| [Fiber: Incremental reconciliation](https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec) (self-contained post) |       [codepen](https://codepen.io/pomber/pen/veVOdd)        |                                              [diff](https://github.com/hexacta/didact/commit/6174a2289e69895acd8fc85abdc3aaff1ded9011) [diff](https://github.com/hexacta/didact/commit/accafb81e116a0569f8b7d70e5b233e14af999ad)                                              |             [中文](https://github.com/chinanf-boy/didact-explain#5-fibre-%E9%80%92%E5%A2%9E%E5%AF%B9%E6%AF%94)              |\n| [The one with Hooks](https://pomb.us/build-your-own-react) (self-contained post)                                                                |    [codesandbox](https://codesandbox.io/s/didact-8-21ost)    |                                                                                                                                                                                                                                                                               |  [中文](https://www.tangdingblog.cn/blog/react/buildyourownreact-2020-09-22/)                                                                                                                         |\n\n\u003e Follow [@pomber](https://twitter.com/pomber) on twitter for updates.\n\n## License\n\nThe MIT License (MIT)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomber%2Fdidact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpomber%2Fdidact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomber%2Fdidact/lists"}