{"id":18720592,"url":"https://github.com/nareshbhatia/react-learning-resources","last_synced_at":"2025-04-03T01:12:20.272Z","repository":{"id":45716628,"uuid":"400942884","full_name":"nareshbhatia/react-learning-resources","owner":"nareshbhatia","description":"A curated list of resources to learn React as fast as possible","archived":false,"fork":false,"pushed_at":"2024-08-14T00:55:57.000Z","size":151,"stargazers_count":179,"open_issues_count":0,"forks_count":31,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-24T07:57:03.982Z","etag":null,"topics":["ag-grid","cypress","git","graphql","highcharts","jest","mock-service-worker","react","react-hook-form","react-router","react-testing-library","storybook","typescript"],"latest_commit_sha":null,"homepage":"","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/nareshbhatia.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-29T03:39:12.000Z","updated_at":"2025-03-17T08:34:03.000Z","dependencies_parsed_at":"2024-08-14T02:57:06.581Z","dependency_job_id":"2d5e6b7f-e4f0-49a5-8ab4-17c2d3654e60","html_url":"https://github.com/nareshbhatia/react-learning-resources","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-learning-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-learning-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-learning-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshbhatia%2Freact-learning-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nareshbhatia","download_url":"https://codeload.github.com/nareshbhatia/react-learning-resources/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246916761,"owners_count":20854514,"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":["ag-grid","cypress","git","graphql","highcharts","jest","mock-service-worker","react","react-hook-form","react-router","react-testing-library","storybook","typescript"],"created_at":"2024-11-07T13:31:49.172Z","updated_at":"2025-04-03T01:12:20.246Z","avatar_url":"https://github.com/nareshbhatia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Learning Resources\n\nA curated list of resources to learn React and related web technologies as fast\nas possible. The goal is to help you create production quality React apps even\nif you are starting from scratch. Just bring plenty of motivation and\nperseverance :smile:\n\nIf you are curious, this is my preferred React stack:\n\n**Core**\n\n- [TypeScript](https://www.typescriptlang.org/docs/) for type safety\n- [React](https://reactjs.org/) - for building component-based UIs\n- [React Context](https://reactjs.org/docs/context.html) \u0026\n  [hooks](https://reactjs.org/docs/hooks-intro.html) for state management\n\n**Foundational libraries**\n\n- [React Router](https://reactrouter.com/) for navigation\n- [React Query](https://react-query.tanstack.com/) for fetching data using REST\n- [Apollo GraphQL](https://www.apollographql.com/docs/) for fetching data using\n  GraphQL\n- [React Hook Form](https://react-hook-form.com/get-started) for form handling\n- [ag-Grid](https://www.ag-grid.com) - a feature-packed JavaScript grid\n- [Highcharts](https://www.highcharts.com) for interactive charts\n\n**Essential tools**\n\n- [Storybook](https://storybook.js.org/) to develop UI components in isolation\n- [React Testing Library](https://testing-library.com/) for unit testing\n- [Cypress](https://www.cypress.io/) for end-to-end testing\n- [Mock Service Worker](https://mswjs.io/) to mock HTTP requests\n- [Prettier](https://prettier.io/) to format code consistently\n\nI have created the\n[React Accelerate template](https://github.com/PublicisSapient/cra-template-accelerate)\nto kick-start React apps using the above stack.\n\nP.S. If you find this content useful, please show your appreciation by starring\nthis repository.\n\n## Contents\n\n- [The React Crash Course](#the-react-crash-course)\n- [Developer Machine Setup](#developer-machine-setup)\n- [CSS](#css)\n- [TypeScript](#typescript)\n- [React](#react)\n- [React Router](#react-router)\n- [React Hook Form](#react-hook-form)\n- [GraphQL](#graphql)\n- [Highcharts](#highcharts)\n- [ag-Grid](#ag-grid)\n- [Testing Best Practices](#testing-best-practices)\n- [Jest](#jest)\n- [React Testing Library](#react-testing-library)\n- [Storybook](#storybook)\n- [Mock Service Worker](#mock-service-worker)\n- [Cypress](#cypress)\n- [Git and Code Reviews](#git-and-code-reviews)\n- [Visual Design](#visual-design)\n- [Domain-Driven Design](#domain-driven-design)\n\n## The React Crash Course\n\nThis crash course is designed to teach you React and related web technologies as\nfast as possible. Feel free to skip any topic that you already know. For video\ntutorials, I highly recommend to type along with the instructor to have it sink\nin faster.\n\n- [HTML Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=UB1O30fR-EE)\n  (1:00) by Brad Traversy\n- [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI)\n  (1:25) by Brad Traversy\n- [Flexbox CSS In 20 Minutes](https://www.youtube.com/watch?v=JJSoEo8JSnc)\n  (20:00) by Brad Traversy\n- [JavaScript Crash Course For Beginners](https://www.youtube.com/watch?v=hdI2bqOjy3c)\n  (1:40) by Brad Traversy\n- [TypeScript Crash Course](https://www.youtube.com/watch?v=BCg4U1FzODs) (0:53)\n  by Brad Traversy\n- [React Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) (1:49) by\n  Brad Traversy\n- [Jest Crash Course](https://www.youtube.com/watch?v=7r4xVDI2vho) (0:57) by\n  Brad Traversy (does not cover mocking, see below for mocking)\n- [Jest Crash Course](https://www.youtube.com/watch?v=ajiAl5UNzBU) (start at\n  0:50 for mocking) by Laith Harb\n- [Coding Conventions and Patterns](./docs/coding-conventions-and-patterns.md)\n  by Naresh Bhatia\n- [Recommended Folder Structure](./docs/folder-structure.md) by Naresh Bhatia\n- [Code Shaper](https://www.code-shaper.org/docs/getting-started/intro) (React\n  best practices using code generation) by Naresh Bhatia\n\nOnce done, you can test your understanding by taking\n[this practice exercise](https://github.com/nareshbhatia/react-takeout-exercise).\n\n## Developer Machine Setup\n\n- [MacOS setup](./docs/dev-machine-setup-macos.md)\n- [Windows setup](./docs/dev-machine-setup-windows.md)\n\n## CSS\n\n- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [Pixels vs. Relative Units in CSS](https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/)\n- [When to Use Em vs. Rem](https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984)\n- [EM vs REM vs PX – Why you shouldn't “just use pixels”](https://engageinteractive.co.uk/blog/em-vs-rem-vs-px)\n- [Learn CSS Variables in 5 minutes](https://www.freecodecamp.org/news/learn-css-variables-in-5-minutes-80cf63b4025d/)\n- [Difference between CSS variables and preprocessor variables](https://css-tricks.com/difference-between-types-of-css-variables/)\n- [CSS Variables - Lea Verou](https://www.youtube.com/watch?v=2an6-WVPuJU)\n- [MindBEMding – getting your head ’round BEM syntax](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)\n- [Get BEM - Naming](http://getbem.com/naming/)\n\n## TypeScript\n\n- [Official TypeScript documentation](https://www.typescriptlang.org/docs/)\n- [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/getting-started)\n- [Understanding TypeScript - Udemy](https://www.udemy.com/course/understanding-typescript/)\n\n## React\n\n- [React documentation](https://reactjs.org/docs/getting-started.html)\n- [Coding Conventions and Patterns](./docs/coding-conventions-and-patterns.md)\n- [Recommended Folder Structure](./docs/folder-structure.md)\n- [Code Shaper](https://www.code-shaper.org/docs/getting-started/intro) - React\n  best practices using code generation\n- [Epic React by Kent C. Dodds](https://epicreact.dev/) - detailed hands-on\n  training in React\n- [React - The Complete Guide - Udemy](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)\n- [React and Typescript - Udemy](https://www.udemy.com/course/react-and-typescript-build-a-portfolio-project/)\n- [Dan Abramov's Blog](https://overreacted.io/)\n  - [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)\n  - [Writing Resilient Components](https://overreacted.io/writing-resilient-components/)\n- [Kent C. Dodd's Blog](https://kentcdodds.com/)\n  - [State Colocation - Where to Put State](https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster) -\n    explains when to lift state up (so that multiple components can access it)\n    vs. push it down, i.e. colocate it (because only one component needs it)\n  - [Application State Management with React](https://kentcdodds.com/blog/application-state-management-with-react) -\n    makes a case for using React Context and Hooks to manage state vs. external\n    libraries like Redux\n  - [How to use React Context effectively](https://kentcdodds.com/blog/how-to-use-react-context-effectively) -\n    describes a nice pattern for using React Context\n  - [Should I useState or useReducer?](https://kentcdodds.com/blog/should-i-usestate-or-usereducer) -\n    both can be used for most state management scenarios, however depending on\n    the scenario, one may be cleaner than the other\n  - [useState lazy initialization and function updates](https://kentcdodds.com/blog/use-state-lazy-initialization-and-function-updates) -\n    talks about a subtle bug that can occur when using `useState` and how to fix\n    it by doing a _function update_\n- [React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react)\n\n## React Router\n\n- [React Router docs](https://reactrouter.com/docs/en/v6)\n\n## React Hook Form\n\n- [React Hook Form documentation](https://react-hook-form.com/get-started)\n- [React Hook Form example with Yup validation](https://react-hook-form.com/get-started/#SchemaValidation)\n- [Complex form example](https://github.com/nareshbhatia/form-examples)\n\n## GraphQL\n\n- [GraphQL concepts I wish someone explained to me a year ago](https://medium.com/naresh-bhatia/graphql-concepts-i-wish-someone-explained-to-me-a-year-ago-514d5b3c0eab)\n- [Introduction to GraphQL](https://graphql.org/learn/)\n- [Apollo GraphQL Tutorial](https://odyssey.apollographql.com/)\n- [Apollo Documentation](https://www.apollographql.com/docs/)\n- [GraphQL Schema Design](https://blog.apollographql.com/graphql-schema-design-building-evolvable-schemas-1501f3c59ed5)\n- [GraphQL Code Generator](https://www.graphql-code-generator.com/)\n- [GraphQL Scalars](https://www.graphql-scalars.dev/docs/introduction/)\n- [Apollo Link Scalars](https://github.com/eturino/apollo-link-scalars)\n- [AWS AppSync](https://aws.amazon.com/appsync/)\n\n## Highcharts\n\n- [Documentation](https://www.highcharts.com/docs/index)\n- [API](https://api.highcharts.com/highcharts/)\n- [Examples](https://www.highcharts.com/demo)\n- [Pie chart with drilldown](https://www.highcharts.com/demo/pie-drilldown)\n\n## ag-Grid\n\nag-Grid supports multiple frameworks. We use the React version of ag-Grid along\nwith some concepts (like `columnDefs`) from the JavaScript version.\n\n- [JavaScript Grid Documentation](https://www.ag-grid.com/javascript-grid/)\n- [React Grid Documentation](https://www.ag-grid.com/react-grid/)\n\n## Testing Best Practices\n\n- [React Testing Techniques](https://github.com/nareshbhatia/react-testing-techniques)\n- [How to know what to test](https://kentcdodds.com/blog/how-to-know-what-to-test)\n- [Write tests. Not too many. Mostly integration.](https://kentcdodds.com/blog/write-tests)\n- [Write fewer, longer tests](https://kentcdodds.com/blog/write-fewer-longer-tests)\n- [Making your UI tests resilient to change](https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change)\n- [Testing Implementation Details](https://kentcdodds.com/blog/testing-implementation-details)\n\n## Jest\n\n- [Documentation](https://jestjs.io/docs/getting-started)\n\n## React Testing Library\n\n- [Introduction](https://testing-library.com/docs/)\n- [Guiding Principles](https://testing-library.com/docs/guiding-principles)\n- [Example](https://testing-library.com/docs/react-testing-library/example-intro)\n- [Cheatsheet](https://testing-library.com/docs/react-testing-library/cheatsheet)\n- [Query Priority Guidelines](https://testing-library.com/docs/queries/about/#priority)\n- [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)\n\n## Storybook\n\n- [Introduction to Storybook](https://storybook.js.org/docs/react/get-started/introduction)\n\n## Mock Service Worker\n\n- [Documentation](https://mswjs.io/docs/)\n\n## Cypress\n\n- [Documentation](https://docs.cypress.io/guides/overview/why-cypress)\n\n### Git and Code Reviews\n\n- [How to Make Your Code Reviewer Fall in Love with You](https://mtlynch.io/code-review-love/) -\n  Must read! Shows how to raise good PRs.\n- [Creating Effective Pull Requests](./docs/creating-effective-pull-requests.md) -\n  A short summary of the above article.\n- [git - the simple guide](https://rogerdudler.github.io/git-guide/)\n- [Trunk Based Development](https://trunkbaseddevelopment.com/)\n- [Trunk-based Development vs. Git Flow](https://www.toptal.com/software/trunk-based-development-git-flow)\n- [OneFlow – a Git branching model and workflow](https://www.endoflineblog.com/oneflow-a-git-branching-model-and-workflow) -\n  OneFlow is just another name for Trunk-based Development.\n\n## Visual Design\n\n- [Refactoring UI](https://www.refactoringui.com/) (written by the authors of\n  Tailwind CSS)\n- [Foundations of Design Systems - Emma Wedekind](https://www.youtube.com/watch?v=pXb2jA43A6k)\n\n## Domain-Driven Design\n\n- [Naresh Bhatia's Blog](https://archfirst.org/domain-driven-design/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnareshbhatia%2Freact-learning-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnareshbhatia%2Freact-learning-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnareshbhatia%2Freact-learning-resources/lists"}