{"id":19093912,"url":"https://github.com/bekcodingaddict/reactjs-practices","last_synced_at":"2026-05-05T10:37:27.600Z","repository":{"id":213484645,"uuid":"732655881","full_name":"BekCodingAddict/ReactJS-Practices","owner":"BekCodingAddict","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-12T16:16:08.000Z","size":1487,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-02T23:32:03.095Z","etag":null,"topics":["css3","front-end","html5","javascript","react","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/BekCodingAddict.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":"2023-12-17T12:17:14.000Z","updated_at":"2024-10-12T16:16:12.000Z","dependencies_parsed_at":"2023-12-21T09:55:29.561Z","dependency_job_id":"602e512f-163a-4c90-ad1d-cac9e8413f3d","html_url":"https://github.com/BekCodingAddict/ReactJS-Practices","commit_stats":null,"previous_names":["bekcodingaddict/reactjs-beginner","bekcodingaddict/reactjs-practices"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FReactJS-Practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FReactJS-Practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FReactJS-Practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FReactJS-Practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BekCodingAddict","download_url":"https://codeload.github.com/BekCodingAddict/ReactJS-Practices/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240142923,"owners_count":19754646,"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":["css3","front-end","html5","javascript","react","reactjs"],"created_at":"2024-11-09T03:26:42.871Z","updated_at":"2026-05-05T10:37:22.572Z","avatar_url":"https://github.com/BekCodingAddict.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About ReactJS\n\n\n## npx \n - [x] npx create-react-app \u003cproject_name\u003e \n\n## npm \n - [x] npm install create-react-app -g - install pacages for globally\n   - create-react-app \u003cproject-name\u003e \n\n## Component\n - [x] Components describe a part of the user interface.They are re-usable and can be nested inside othe components.\n - ### Component Types \n - [x] Stateless Functional Component:\n   - JavaScript Function:\n   ~~~\n   function Welcome(props){\n    return \u003ch1\u003eHello, {props.name}\u003c/h1\u003e;\n   }\n   ~~~\n - [x] Stateful Class Component\n   - Class extending Component class \n   - Render method returning HTML\n   ~~~\n   class Welcome extends React.Component{\n    render(){\n      return \u003ch1\u003eHello, {this.props.name}\u003c/h1\u003e;\n    }\n   }\n   ~~~\n - [x] Functional and Class Components Comparision:\n   - [x] \u003cb\u003eFunctional\u003c/b\u003e\n    - Use Func components as much as possible\n    - Absence of 'this' keyword'\n    - Solution without using state\n    - Mainly responsible for the UI\n    - Stateless/Dump/Presentational\n   - [x] \u003cb\u003eClass\u003c/b\u003e\n    - More feature rich\n    - Maintain their own private data -state\n    - Complex UI logic\n    - Provide lifecycle hooks\n    - Stateful/Smart/Container\n\n## Hooks\n - [x] Hooks are  a new feature proposal that lets you use state and other React features without a class.\n   - No breacking changes.\n   - Completely opt-on \u0026 100% backwards-compatible.\n   - What ever we've learned so far in this series still hold good.\n   - Components types- Functional and Class components.\n   - Using state, life-cycle methods and 'this' binding.\n   - After understanding state,event binding and lifecycle hooks in class components.\n\n## JSX\n - JavaScript XML (JSX) - Extension to the JavaScript language syntax.\n - Write XML-like code for elements and components.\n - JSX tags have a tag name, attributes,and children.\n - JSX is not a necessity to write React application.\n - JSX makes your react code simpler and elegant.\n - JSX ultimately transpiles to pure JavaScript which is understood by the browsers.\n   - [x] JSX difrences\n    - class -\u003e className\n    - for -\u003e htmlFor\n    - [x] camelCase property naming convention.\n      - onclick -\u003e onClick\n      - tabindex -\u003etabIndex\n\n## props vs state\n - [x] props:\n   - props get passed to the component\n   - Function parameters\n   - props are immutable\n   - props - Function Components\n   - this.props- Class Components\n- [x] state\n  - state is managed within the component\n  - Variables declared in the function body\n  - state can be changed\n  - useState Hook - Functional Components \n  - this.state - Class Components\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Freactjs-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbekcodingaddict%2Freactjs-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Freactjs-practices/lists"}