{"id":13415462,"url":"https://github.com/tyroprogrammer/learn-react-app","last_synced_at":"2025-05-13T21:07:11.573Z","repository":{"id":34089439,"uuid":"166759411","full_name":"tyroprogrammer/learn-react-app","owner":"tyroprogrammer","description":"Application that will help you learn React fundamentals. Install this application locally - there's tutorial, code snippets and exercises. The main objective of this project is to help you get off the ground with React!","archived":false,"fork":false,"pushed_at":"2025-02-19T08:13:09.000Z","size":16218,"stargazers_count":3810,"open_issues_count":15,"forks_count":349,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-04-28T12:14:02.142Z","etag":null,"topics":["exercise","guided-exercises","javascript","learn","learn-react","learn-reactjs","react","react-fundamentals","reactjs","tutorial","tutorial-exercises"],"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/tyroprogrammer.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}},"created_at":"2019-01-21T06:23:40.000Z","updated_at":"2025-04-28T04:33:51.000Z","dependencies_parsed_at":"2024-09-20T17:41:11.814Z","dependency_job_id":"fae6eaa2-dc20-471d-9f1c-e86a81095d45","html_url":"https://github.com/tyroprogrammer/learn-react-app","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/tyroprogrammer%2Flearn-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyroprogrammer%2Flearn-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyroprogrammer%2Flearn-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyroprogrammer%2Flearn-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyroprogrammer","download_url":"https://codeload.github.com/tyroprogrammer/learn-react-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311332,"owners_count":21569009,"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":["exercise","guided-exercises","javascript","learn","learn-react","learn-reactjs","react","react-fundamentals","reactjs","tutorial","tutorial-exercises"],"created_at":"2024-07-30T21:00:49.280Z","updated_at":"2025-04-28T12:14:17.232Z","avatar_url":"https://github.com/tyroprogrammer.png","language":"JavaScript","readme":"\u003cdiv style=\"text-align:center\"\u003e\n    \u003ch1\u003eWelcome to Learn React App!\u003c/h1\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n[![MIT License][license-badge]][license]\n[![Last commit][github-last-commit-badge]][github-commit]\n\n[![Github Contributors][github-contributors-badge]][github-contributors]\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n\u003c!-- prettier-ignore-end --\u003e\n\u003c/div\u003e\n\n\u003chr/\u003e\n\nThe goal of this tutorial is to quickly get you off the ground with `React` concepts. This tutorial has hands-on exercises which I consider to be the most important part of this tutorial.\n\nThe way this tutorial works is that first, you have to checkout this project on your computer, and run the application locally. Then open the application on a browser and you can go through the tutorial as you like.\n\n![Learn React App](./public/Learn_React_App.gif \"Learn React App\")\n\n\n## Checkout\n\nCheckout the project to your computer using `git`:\n\n```\ngit clone https://github.com/tyroprogrammer/learn-react-app.git\n```\n\n## Environment Setup\n\nYou can either use `npm` or `yarn` to run this application. Please pick one and follow below instructions.\n\n*If you want to use `yarn` and don't have `yarn` installed on your local machine please execute below command to install `yarn`:*\n\n```\nnpm install -g yarn\n```\n\n### Installing Dependencies\n\nOn the root directory of the project please execute **either one** of the below commands to install all the project dependencies. You don't have to run both commands, just pick one.\n\n```\nyarn install\n```\n\n**OR**\n\n```\nnpm install\n```\n\n### Starting application\n\nOn the root directory of the project please execute either one of the below commands to start the tutorial application:\n\n```\nyarn start\n```\n\n**OR**\n```\nnpm start\n```\n\nAfter this is complete, the application will be deployed on port `3000`. Open a browser and navigate to `localhost:3000`.\n\n-----\n\n## Online Tutorial\n\nYou can also run this tutorial in Gitpod, a free online dev environment for GitHub:\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/tyroprogrammer/learn-react-app/blob/master/src/exercise/01-HelloWorld.js)\n\n-----\n\n## Following the tutorial\n\nTutorials on this application are fairly straightforward to follow. Each tutorial has one or more exercises. You'll see once you are in the tutorial.\n\nThe exercise panel has split view. The left-hand side of the screen has your solution rendered and the right-hand side of the screen has the target solution.\nRight above the exercise panel, you'll see the location of exercise files.\n\nPlease open the exercise file on your favorite editor (VS Code, Atom, Sublime, IntelliJ etc.) and start making changes by following the instructions. Exercise files are heavily commented. Read through the comments and you should be able to write up the solution. If you have any confusion you can refer to the solution file for that exercise. Every time you make changes to the exercise file and save it, the browser will reload automatically reflecting your changes.\n\n### Exercise Comment Guide\n\nMost comments in the exercise files start with one of the below signs. This is to help you understand what you should do to the code immediately following these comments.\n\n🏆 - **Trophy** - Describes the overall goal of the exercise. You can find this at the top of the exercise file.\n\n💡 - **Light Bulb** - General information regarding the code immediately following this comment. You might find it throughout the code. No action is required on your part, just read them.\n\n✏️   - **Pencil** - You are supposed to edit the code immediately following this comment. It is followed by a description of the change that you need to do.\n\n🧭  - **Compass** - When the description of change is not enough, the compass will give you more direction. You will find it alongside the pencil when more elaborate instruction is deemed necessary.\n\n🚨 - **Alarm** - This means danger. Read the comment carefully. Usually, it's used to say you shouldn't change the code immediately following this. It will create havoc.\n\n### FAQ\n\n\u003cdetails\u003e\n    \u003csummary\u003eDo I need to install `yarn` or can I use `npm`?\u003c/summary\u003e\n    \u003cp\u003eYou don't really need yarn. Just use npm if you like.\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eWhich browser should I use?\u003c/summary\u003e\n    \u003cp\u003eThis tutorial has been tested in Chrome only so I highly recommend you use Chrome.\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eWhich code editor should I use for exercise?\u003c/summary\u003e\n    \u003cp\u003eAnything really (Sublime, Atom, VS Code, IntelliJ) - its your preference.\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eI accidentally deleted something in an exercise that I shouldn't have. What should I do?\u003c/summary\u003e\n    \u003cp\u003eThe easiest way is to just revert back to the previous version on your editor. If you want to start anew, then just checkout that particular file from GitHub again using something like:\u003cpre\u003e\u003ccode\u003egit checkout HEAD --  exercise/01-helloWorld.js\u003c/code\u003e\u003c/pre\u003e\n    \u003c/p\u003e\n\u003c/details\u003e\n\n## Contribution\n\nIf you went through the exercise and saw some inconsistencies or if you have an idea to make the overall tutorial better please feel free to open a PR.\n\n\n\u003c!--LINKS --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n[license-badge]: https://img.shields.io/github/license/tyroprogrammer/learn-react-app.svg?style=flat\n[license]: https://github.com/tyroprogrammer/learn-react-app/blob/master/LICENSE\n[github-watch-badge]: https://img.shields.io/github/watchers/tyroprogrammer/learn-react-app.svg?style=social\n[github-watch]: https://github.com/tyroprogrammer/learn-react-app/watchers\n[github-star-badge]: https://img.shields.io/github/stars/tyroprogrammer/learn-react-app.svg?style=social\n[github-star]: https://github.com/tyroprogrammer/learn-react-app/stargazers\n[github-last-commit-badge]: https://img.shields.io/github/last-commit/tyroprogrammer/learn-react-app.svg?style=flat\n[github-commit]: https://github.com/tyroprogrammer/learn-react-app/commits/master\n[github-contributors-badge]: https://img.shields.io/github/contributors/tyroprogrammer/learn-react-app.svg?style=social\n[github-contributors]: https://github.com/tyroprogrammer/learn-react-app/graphs/contributors\n\u003c!-- prettier-ignore-end --\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyroprogrammer%2Flearn-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyroprogrammer%2Flearn-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyroprogrammer%2Flearn-react-app/lists"}