{"id":15549013,"url":"https://github.com/lohanidamodar/react_lessons","last_synced_at":"2025-08-13T01:33:01.814Z","repository":{"id":97178198,"uuid":"171189934","full_name":"lohanidamodar/react_lessons","owner":"lohanidamodar","description":"Learning the basics of React JS","archived":false,"fork":false,"pushed_at":"2019-04-01T03:15:17.000Z","size":855,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T01:27:12.957Z","etag":null,"topics":["react","react-examples","react16","reactjs"],"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/lohanidamodar.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":"2019-02-18T00:42:40.000Z","updated_at":"2023-12-12T13:29:10.000Z","dependencies_parsed_at":"2023-05-01T22:47:57.329Z","dependency_job_id":null,"html_url":"https://github.com/lohanidamodar/react_lessons","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"9776f67bc9778d7f66b0b0659d4d52bb74f14e9c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lohanidamodar/react_lessons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lohanidamodar%2Freact_lessons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lohanidamodar%2Freact_lessons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lohanidamodar%2Freact_lessons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lohanidamodar%2Freact_lessons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lohanidamodar","download_url":"https://codeload.github.com/lohanidamodar/react_lessons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lohanidamodar%2Freact_lessons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270165029,"owners_count":24538426,"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-08-12T02:00:09.011Z","response_time":80,"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":["react","react-examples","react16","reactjs"],"created_at":"2024-10-02T13:26:00.860Z","updated_at":"2025-08-13T01:33:01.363Z","avatar_url":"https://github.com/lohanidamodar.png","language":"JavaScript","readme":"# React Lessons\n\n## What you need to know\n- HTML\n- Javascript\n- Unfraid of using command line\n\n## Outline\n1. Introduction\n    \n    - React is a javascript framework for creating user interfaces\n        - Full single page applications\n        - Only a part of a webpage (search form)\n        - Component based\n        - Very fast (due to virtual DOM)\n2. Installing/Setup\n    - Install NodeJs\n    - Install Create React App\n    - VS Code\n3. Understanding Components\n\n    - JSX (Javascript and XML) let's us write HTML in javascript.\n4. Understanding Props and State\n    \n    - State of the component describes the current state of the component (data or ui-state)\n    - State can be updated over time\n6. Events\n7. Routing\n\n\n## Lessons\n1. Lesson 1 (Basic Component in React.)\n\n    In this lesson you will\n    - Learn to setup react development with all dependencies loaded from CDN in your browser.\n    - Create your first react component (Class based component)\n    - Render you component to the DOM\n    - Learn to write JSX\n    - Learn to write dynamic javascript expression inside JSX\n2. Lesson 2 (Component State)\n\n    In this lesson you will learn to\n    - Use state\n    - Update state based on user interaction\n    - Display or remove ui element from dom based on state property\n    - Display values from state in the UI\n\n3. Lesson 3 (Forms)\n\n    In this lesson you will learn to\n    - Handle form inputs\n    - Use form inputs in real time\n    - Handle form submit events\n\n4. Lesson 4 (Props)\n\n    In this lesson you will\n    - Understand what props is\n    - Learn to use props\n    - Display props in the UI\n    - Pass props while loading component\n\n5. Lesson 5 (Cycling through data)\n\n    In this lesson you will learn to\n    - Cycle through data in an array\n    - Transform data in array using map\n    - Transform and render data in array using map\n\n6. Lesson 6 (create-react-app)\n    \n    In this lesson you will learn to\n    - Install npm package globally (`npm install -g create-react-app`)\n    - Use create-react-app to create new react project (`create-react-app first_react_app`)\n    - Run your react app created using create-react-app (`npm start`)\n    - Understand the basic structure of react app created using create-react-app\n\n7. Lesson 7 (Conditional rendering)\n\n    In this lesson you will learn to\n    - render or hide an item based on conditions\n    - use two kinds of ternary operator to conditionally render items in components\n    \n8. Lesson 8 (Forms and Functions as Props)\n\n    In this lesson you will learn to\n    - Create form and save form data to local state\n    - Handle form submit action to log form data\n    - Pass function as props\n    - Call a function in parent component from child component\n    - Update parent state from child component \n\n9. Lesson 9 (Lifecycle methods)\n\n    In this lesson you will learn to use lifecycle methods of class based components\n    \n    [Review this diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)\n\n    - ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flohanidamodar%2Freact_lessons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flohanidamodar%2Freact_lessons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flohanidamodar%2Freact_lessons/lists"}