{"id":18538561,"url":"https://github.com/shaikahmadnawaz/learn-react","last_synced_at":"2026-04-30T20:33:18.534Z","repository":{"id":113666398,"uuid":"557943914","full_name":"shaikahmadnawaz/learn-react","owner":"shaikahmadnawaz","description":"React - A JavaScript library for building user interfaces","archived":false,"fork":false,"pushed_at":"2022-10-28T17:52:26.000Z","size":361,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-15T02:12:33.574Z","etag":null,"topics":["es6","frontend","javascript-library","jsx","react","reactjs","tutorial","ui"],"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/shaikahmadnawaz.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":"2022-10-26T15:42:19.000Z","updated_at":"2022-10-26T15:46:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"433f31ed-6b11-464c-9366-2f3fd9477ccc","html_url":"https://github.com/shaikahmadnawaz/learn-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shaikahmadnawaz/learn-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikahmadnawaz%2Flearn-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikahmadnawaz%2Flearn-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikahmadnawaz%2Flearn-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikahmadnawaz%2Flearn-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaikahmadnawaz","download_url":"https://codeload.github.com/shaikahmadnawaz/learn-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikahmadnawaz%2Flearn-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32476682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["es6","frontend","javascript-library","jsx","react","reactjs","tutorial","ui"],"created_at":"2024-11-06T19:44:26.117Z","updated_at":"2026-04-30T20:33:18.515Z","avatar_url":"https://github.com/shaikahmadnawaz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### React\n\nReact is a free and open-source front-end JavaScript library for building user interfaces based on UI components.\n\n## Getting started\n\nFirst, install Node.js. Then open your terminal and run this line to create a project:\n\n```\nnpx create-react-app my-app\n```\n\nNow you can run your app with:\n\n```\ncd my-app\nnpm start\n```\n\n## Your editor\n\nVS Code is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable!\n\n### Component\n\nReact apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. React component names must always start with a capital letter\n\n### JSX\n\nJSX is stricter than HTML.\nYou have to close tags like.\nYour component also can’t return multiple JSX tags.\nYou have to wrap them into a shared parent, like a `\u003cdiv\u003e...\u003c/div\u003e` or an empty \u003c\u003e...\u003c/\u003e wrapper\n\n```\nfunction AboutPage() {\n  return (\n    \u003c\u003e\n      \u003ch1\u003eAbout\u003c/h1\u003e\n      \u003cp\u003eHello there.\u003cbr /\u003eHow do you do?\u003c/p\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Conditional rendering\n\n```\n\u003cdiv\u003e\n  {isLoggedIn \u0026\u0026 \u003cAdminPanel /\u003e}\n\u003c/div\u003e\n```\n\n### Rendering lists\n\nYou will rely on JavaScript features like `for loop` and the array `map()` function to render lists of components.\n\nInside your component, use the `map()` function to transform an array of products into an array of `\u003cli\u003e` items:\n\n```\nimport React from \"react\";\nconst RenderingLists = () =\u003e {\n  const names = [\n    {\n      name: \"Nawaz\",\n      id: 1,\n    },\n    {\n      name: \"Shaik\",\n      id: 2,\n    },\n  ];\n\n  return (\n    \u003cdiv\u003e\n      \u003cul\u003e\n        {names.map((val, key) =\u003e {\n          return (\n            \u003cli key={key}\u003e\n              \u003cdiv\u003e{val.name}\u003c/div\u003e\n            \u003c/li\u003e\n          );\n        })}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default RenderingLists;\n\n```\n\n### Responding to events\n\nYou can respond to events by declaring event handler functions inside your components:\n\n```\nfunction MyButton() {\n  function handleClick() {\n    alert('You clicked me!');\n  }\n\n  return (\n    \u003cbutton onClick={handleClick}\u003e\n      Click me\n    \u003c/button\u003e\n  );\n}\n```\n\n**Notice how `onClick={handleClick}` has no parentheses at the end!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaikahmadnawaz%2Flearn-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaikahmadnawaz%2Flearn-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaikahmadnawaz%2Flearn-react/lists"}