{"id":13630789,"url":"https://github.com/benmvp/react-workshop","last_synced_at":"2025-04-17T17:31:45.745Z","repository":{"id":151018866,"uuid":"55824203","full_name":"benmvp/react-workshop","owner":"benmvp","description":"A step-by-step workshop for learning React fundamentals while building an app","archived":false,"fork":false,"pushed_at":"2020-06-26T15:49:52.000Z","size":1526,"stargazers_count":180,"open_issues_count":2,"forks_count":148,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-05T07:02:32.385Z","etag":null,"topics":["benmvp-edu","fundamentals","react","workshop"],"latest_commit_sha":null,"homepage":"react-workshop-sigma.vercel.app","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/benmvp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2016-04-09T03:32:53.000Z","updated_at":"2024-06-05T09:49:40.000Z","dependencies_parsed_at":"2023-06-30T07:30:44.382Z","dependency_job_id":null,"html_url":"https://github.com/benmvp/react-workshop","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmvp%2Freact-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmvp%2Freact-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmvp%2Freact-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmvp%2Freact-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benmvp","download_url":"https://codeload.github.com/benmvp/react-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249360008,"owners_count":21257149,"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":["benmvp-edu","fundamentals","react","workshop"],"created_at":"2024-08-01T22:01:59.415Z","updated_at":"2025-04-17T17:31:45.471Z","avatar_url":"https://github.com/benmvp.png","language":"JavaScript","readme":"# React FUNdamentals Workshop with Ben Ilegbodu\n\n[![Maintenance Status](https://img.shields.io/badge/status-maintained-brightgreen.svg)](https://github.com/benmvp/react-workshop/pulse)\n[![Build Status](https://github.com/benmvp/react-workshop/workflows/CI/badge.svg)](https://github.com/benmvp/react-workshop/actions)\n[![license](https://img.shields.io/badge/license-GPL%20v3-blue)](#license)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\n[![Watch on GitHub](https://img.shields.io/github/watchers/benmvp/react-workshop.svg?style=social)](https://github.com/benmvp/react-workshop/watchers)\n[![Star on GitHub](https://img.shields.io/github/stars/benmvp/react-workshop.svg?style=social)](https://github.com/benmvp/react-workshop/stargazers)\n[![Tweet](https://img.shields.io/twitter/url/https/github.com/benmvp/react-workshop.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20React%20Fundamentals%20Workshop%20by%20%40benmvp!%0A%0Ahttps%3A%2F%2Fgithub.com%2Fbenmvp%2Freact-workshop)\n\nA step-by-step workshop to build a React application, all while learning React fundamentals. Best if accompanied with live facilitation by me 🙂.\n\n## Pre-Workshop Instructions\n\nIn order to maximize our time _during_ the workshop, please complete the following tasks in advance:\n\n- [ ] Set up the project (follow [setup instructions](#system-requirements) below)\n- [ ] Install and run [Zoom](https://zoom.us/) on the computer you'll be developing with (for remote workshops)\n- [ ] Set up dual monitors for live coding, if possible (for remote workshops)\n- [ ] Install React Developer Tools for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) (recommended) or [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)\n- [ ] Install a JSX-friendly code editor, such as [Visual Studio Code](https://code.visualstudio.com/)\n- [ ] Brush up on modern [ES.next](http://www.benmvp.com/learning-es6-series/) features, if they are unfamiliar to you\n- [ ] Have experience building websites with HTML, CSS, and JavaScript DOM APIs\n\nThe more prepared you are for the workshop, the better it will go for you! 👍🏾\n\n## System Requirements\n\n- [git](https://git-scm.com/) v2 or higher\n- [Node.js](https://nodejs.org/en/) v10 or higher\n- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) v6 or higher\n\nAll of these must also be available in your `PATH` in order to be run globally. To verify things are set up properly, run:\n\n```sh\ngit --version\nnode --version\nnpm --version\n```\n\nIf your node version is version 9 or lower, you can [install `nvm`](https://github.com/creationix/nvm#install-script) to manage multiple versions of node.\n\nIf you have trouble with any of these, learn more about the `PATH` environment variable and how to fix it here for [Windows](https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/) or [Mac/Linux](http://stackoverflow.com/a/24322978/971592).\n\n## Setup\n\nAfter you have verified that you have the proper tools installed (and at the proper versions), getting setup _should_ be a breeze. Run the following commands:\n\n```sh\ngit clone https://github.com/benmvp/react-workshop.git\ncd react-workshop\nnpm run setup\n```\n\nThis will likely take a **few minutes** to run. It will clone the repo, install all of the JavaScript dependencies needed to build our app, and setup our workshop dev directory.\n\nIf it fails, please read through the error logs and see if you can figure out what the problem is. Double check that you have the proper [system requirements](#system-requirements) installed. If you are unable to figure out the problem on your own, please feel free to [file an issue](https://github.com/benmvp/react-workshop/issues/new) with _everything_ (and I mean everything) from the output of the commands you ran.\n\n## Running the app\n\nWe will be build a Giphy search app step-by-step in this workshop. To get started and verify that everything has been installed correctly, run:\n\n```sh\nnpm start\n```\n\nThe app should pop up in your default browser running at http://localhost:3000/. The app should be **completely blank** because we haven't built anything yet! But you can check out the app [deployed online](https://react-workshop.benmvp.com/) to see what the final state will look like.\n\nFor those interested, the app is a standard app bootstrapped by [Create React App](https://create-react-app.dev/).\n\n## Workshop Outline\n\nLet's learn the React fundamentals! ⚛️\n\n### 🧔🏾 About Me\n\nHiya! 👋🏾 My name is Ben Ilegbodu. 😄\n\n- Christian, Husband, Father of 👌🏾\n- Pittsburg, California\n- Principal Frontend Engineer at [Stitch Fix](https://www.stitchfix.com/) (and yes [we're hiring](https://www.stitchfix.com/careers/jobs)!)\n- [@benmvp](https://twitter.com/benmvp)\n- www.benmvp.com\n- Go Rockets! 🚀🏀\n\n### 🕘 Schedule\n\nEach step in the workshop builds on top of the previous one. If at any point you get stuck, you can find the answers in the source code of the current step. Any step can be used as a starting point to continue on to the remaining steps.\n\n- Setup / Logistics / Intro\n- [Step 1 - JSX](src/01-jsx/)\n- [Step 2 - Query Field](src/02-query-field/)\n- [Step 3 - API](src/03-api/)\n- 😴 15 minutes\n- [Step 4 - Lists](src/04-lists/)\n- [Step 5 - Form Submit](src/05-form-submit/)\n- 🍕 45 minutes\n- [Step 6 - Components](src/06-components/)\n- [Step 7 - Prop Types](src/07-prop-types/)\n- [Step 8 - Search Focus](src/08-search-focus/)\n- 😴 15 minutes\n- [Step 9 - Custom Hook](src/09-custom-hook/)\n- [Step 10 - Loading States](src/10-loading-states/)\n- 😴 15 minutes\n- ❓ Q \u0026 A\n- [Final Quiz!](src/quiz/)\n- 👋🏾 Goodbye!\n\n### ❓ Asking Questions\n\n- Please **interrupt me** and ask questions! Others likely will have the same question.\n- However, unrelated questions are better sent to [Twitter](https://twitter.com/benmvp) or [my AMA](http://www.benmvp.com/ama).\n\n### 🖥️ Zoom Hygiene (for remote workshops)\n\n- Keep your **video on** (if possible) to make it feel more human and lively\n- Keep your **microphone muted** unless your talking to avoid background noise distractions\n- Answer each other's questions in the chat\n- Use breakout rooms to help each other\n\n### ⭐ FUNdamental Concepts\n\nHere is what you'll come away knowing at the end of the workshop...\n\n- Using JSX syntax ([Step 1](src/01-jsx/))\n- Maintaining component state with `useState` hook ([Step 2](src/02-query-field/))\n- Handling user interaction ([Step 2](src/02-query-field/))\n- Making API calls with `useEffect` hook ([Step 3](src/03-api/))\n- Rendering dynamic lists of data ([Step 4](src/04-lists/))\n- Conditionally rendering components ([Step 4](src/04-lists/))\n- Handling HTML forms \u0026 form elements ([Step 5](src/05-form-submit/))\n- Writing readable, reusable and composable components ([Step 6](src/06-components/))\n- Type-checking props ([Step 7](src/07-prop-types/))\n- Interacting with the DOM directly with `useRef` hook ([Step 8](src/08-search-focus/))\n- Factoring out logic from components into custom hooks ([Step 9](src/09-custom-hook/))\n- Leveraging ES6+ to maintain application state with `useReducer` hook ([Step 10](src/10-loading-states/))\n- Applying component styling with CSS classes (throughout)\n\n## 🧠 Elaboration \u0026 Feedback\n\nEach step has an Elaboration \u0026 Feedback form link at the end. After you're done with the exercise and before jumping to the next step, please take a few minutes to fill that out to solidify your learning.\n\nAt the end of the workshop, I would greatly appreciate your overall feedback. [Share your workshop feedback](https://bit.ly/react-fun-ws-feedbck).\n\n### 🤝 Code of Conduct\n\nAll attendees, speakers, sponsors and volunteers at this workshop are required to agree with the [code of conduct](CODE_OF_CONDUCT.md). Organizers will enforce this code throughout the event. We expect cooperation from all participants to help ensure a safe environment for everybody.\n\n### 👉🏾 First Step\n\nGo to [Step 0 - Begin](src/00-begin/).\n\n## License\n\nAll of the workshop material is available for **private, non-commercial use** under the [GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html) license. If you would like to use this workshop to conduct your own workshop, please contact me first at ben@benmvp.com.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenmvp%2Freact-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenmvp%2Freact-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenmvp%2Freact-workshop/lists"}