{"id":22199453,"url":"https://github.com/babbel/build-your-own-react-workshop.js","last_synced_at":"2025-10-12T09:12:34.808Z","repository":{"id":61967184,"uuid":"554712851","full_name":"babbel/build-your-own-react-workshop.js","owner":"babbel","description":"Library that constitutes part of a workshop for React Day 2022, which teaches participants how to build their own version of React (R2D2)","archived":false,"fork":false,"pushed_at":"2024-12-15T14:14:40.000Z","size":3138,"stargazers_count":18,"open_issues_count":13,"forks_count":9,"subscribers_count":23,"default_branch":"main","last_synced_at":"2025-08-12T06:49:16.871Z","etag":null,"topics":[],"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/babbel.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":"2022-10-20T09:07:05.000Z","updated_at":"2025-06-27T04:51:08.000Z","dependencies_parsed_at":"2025-08-12T06:34:46.433Z","dependency_job_id":"12abd2f9-08fb-4e20-b56b-ef0c4ef393cf","html_url":"https://github.com/babbel/build-your-own-react-workshop.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/babbel/build-your-own-react-workshop.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/babbel%2Fbuild-your-own-react-workshop.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/babbel%2Fbuild-your-own-react-workshop.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/babbel%2Fbuild-your-own-react-workshop.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/babbel%2Fbuild-your-own-react-workshop.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/babbel","download_url":"https://codeload.github.com/babbel/build-your-own-react-workshop.js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/babbel%2Fbuild-your-own-react-workshop.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010957,"owners_count":26084837,"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-10-12T02:00:06.719Z","response_time":53,"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":"2024-12-02T15:14:21.927Z","updated_at":"2025-10-12T09:12:34.779Z","avatar_url":"https://github.com/babbel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# build-your-own-react-workshop.js\n\nLibrary that constitutes part of a workshop for React Day 2022, which teaches participants how to build their own version of React (R2D2)\n\n## Build your own (simple) React from scratch!\n\nHave you ever wondered how React works?\nWhat would it feel like to create the magical lines that make up the tool we all grew to learn and love?\n\nCome along in our journey to implement React from scratch, making a simple React project work with your own `my-react.js` library.\n\nAt the end of the workshop, a simple TODO app written in React will work with your very own `my-react.js`.\n\nLevel: Medium\nDuration of workshop: 3 hours\n\n### Table of contents\n\n- Introduction\n- Rendering our first component\n- Update cycle and the VDOM\n- Meet the hooks\n\n\n### Workshop Guide\n\n#### Introduction\n1. Clone the repo `gh repo clone babbel/build-your-own-react-workshop.js`\n2. Make sure to use the node version defined in `.nvmrc`\n3. `cd ./todo-app \u0026\u0026 npm install`\n4. Check out the working app using the real boring React `npm run start`\n5. /!\\ When moving from the `main` branch to the first branch, you will need to restart the app as we aliased react in the webpack config\n\nEach step of this workshop is represented by a git branch, which contains the relevant code and prompts for that step. Make sure to checkout the relevant branch whenever you move onto the next step.\n\n`main` branch = the beginning of the journey =\u003e TODO app connected to the real React\n\nEach branch contains comments to help you along the way. Search for the following in the code for a hint:\n`START HERE` =\u003e Starting point for the branch (step).\n`DON'T FORGET` =\u003e Hint that some code needs to be added or edited for the step to be completed.\n\n#### Chapter 1\n\n*Rendering JSX*\nBy the end of this chapter your version of React: will have DOMHandlers that are able to render static JSX.\n\n*Chapter 1 Step 1* =\u003e DOMHandlers can render an empty div\n`git checkout chapter-1/step-1`\n\n*Chapter 1 Step 2* =\u003e DOMHandlers can handle simple attributes\ne.g. `id=\"step2`\n`git checkout chapter-1/step-2`\n\n*Chapter 1 Step 3* =\u003e DOMHandlers can handle HTML tag children\n`git checkout chapter-1/step-3`\n\n*Chapter 1 Step 4* =\u003e DOMHandlers can handle components\n`git checkout chapter-1/step-4`\n\n\n#### Chapter 2\nBy the end of this chapter your version of React: will have a working `useState` and repaint the whole page on every update.\n\n*Chapter 2 Step 1* =\u003e How does state work? We need to subscribe!\n`git checkout chapter-2/step-§`\n\n*Chapter 2 Step 2* =\u003e State on a component basis.\n`git checkout chapter-2/step-2`\n\n*Chapter 2 Step 3* =\u003e How do we allow for multiple states per component?\n`git checkout chapter-2/step-3`\n\n#### Chapter 3\nBy the end of this chapter your version of React: will have Diffing and targeted DOM updates working correctly.\n\n*Chapter 3 Step 1* =\u003e Let's handle node added and prop changes\n`git checkout chapter-3/step-1`\n\n*Chapter 3 Step 2* =\u003e Let's replace and delete nodes\n`git checkout chapter-3/step-2`\n\n#### Chapter 4\nBy the end of this chapter your version of React: will have the `useEffect` hook working correctly.\n\n```\n  useEffect(() =\u003e {\n    console.log('I update when titleIndex is changed');\n    console.log('Closed around titleIndex', titleIndex);\n    return () =\u003e console.log('titleIndex effect clean up');\n  }, [titleIndex]);\n```\n\n*Chapter 4 Step 1* =\u003e Create useEffect without clean-ups\n`git checkout chapter-4/step-1`\n\nIn order for the `useEffect` hook to function, we need to create a callback that is a combination of callbacks (all of the app's useEffects). This callback of callbacks then needs to be triggered later in time e.g on re-renders or when the dependencies of the `useEffect` change.\n\n\n*Chapter 4 Step 2* =\u003e Let's add clean-ups\n`git checkout chapter-4/step-2`\n\nThe useEffect cleanup is a function in the useEffect Hook that allows us to tidy up our code before our component unmounts. On every render the cleanup function  is also triggered if the dependencies.\n\nTherefore in this step, we need to ensure the cleanup function is called when the specific useEffect's dependencies change.\n\nIt is important that the clean up is triggered before the next effect is called.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbabbel%2Fbuild-your-own-react-workshop.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbabbel%2Fbuild-your-own-react-workshop.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbabbel%2Fbuild-your-own-react-workshop.js/lists"}