{"id":22349054,"url":"https://github.com/afsify/reactjs","last_synced_at":"2026-01-25T11:32:50.452Z","repository":{"id":225102003,"uuid":"748313638","full_name":"afsify/reactjs","owner":"afsify","description":"Refine your React.js skills with my dedicated GitHub repository, offering a collection of workouts and practice exercises. Enhancing your proficiency through hands on exercises.","archived":false,"fork":false,"pushed_at":"2024-11-07T14:51:04.000Z","size":185,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-30T06:45:50.696Z","etag":null,"topics":["front-end","notes","reactjs"],"latest_commit_sha":null,"homepage":"","language":null,"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/afsify.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,"zenodo":null}},"created_at":"2024-01-25T18:06:32.000Z","updated_at":"2024-11-07T14:51:10.000Z","dependencies_parsed_at":"2024-11-07T15:33:50.774Z","dependency_job_id":"493685b0-3f03-4017-85f9-a91c1813b350","html_url":"https://github.com/afsify/reactjs","commit_stats":null,"previous_names":["afsify/reactjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/afsify/reactjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Freactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Freactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Freactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Freactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afsify","download_url":"https://codeload.github.com/afsify/reactjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afsify%2Freactjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28752668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T10:25:12.305Z","status":"ssl_error","status_checked_at":"2026-01-25T10:25:11.933Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["front-end","notes","reactjs"],"created_at":"2024-12-04T11:07:13.742Z","updated_at":"2026-01-25T11:32:50.437Z","avatar_url":"https://github.com/afsify.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React.js\n\nReact.js is a popular JavaScript library for building user interfaces, particularly for single-page applications where you want to maintain a seamless user experience without frequent page reloads. React allows developers to create reusable UI components, manage the state of applications efficiently, and utilize a virtual DOM for performance optimization.\n\n## Key Concepts\n\n### Components\n\nComponents are the building blocks of a React application. Each component is a JavaScript function or class that optionally accepts inputs (called \"props\") and returns a React element that describes how a section of the UI should appear.\n\n```jsx\nimport React from 'react';\n\nfunction Welcome(props) {\n  return \u003ch1\u003eHello, {props.name}\u003c/h1\u003e;\n}\n```\n\n### JSX\n\nJSX is a syntax extension for JavaScript that looks similar to XML or HTML. It allows you to write HTML-like code within JavaScript, which React then transforms into JavaScript objects.\n\n```jsx\nconst element = \u003ch1\u003eHello, world!\u003c/h1\u003e;\n```\n\n### State and Lifecycle\n\nState is similar to props, but it is private and fully controlled by the component. Lifecycle methods are special methods that get called at different stages of a component's life.\n\n```jsx\nclass Clock extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {date: new Date()};\n  }\n\n  componentDidMount() {\n    this.timerID = setInterval(() =\u003e this.tick(), 1000);\n  }\n\n  componentWillUnmount() {\n    clearInterval(this.timerID);\n  }\n\n  tick() {\n    this.setState({\n      date: new Date()\n    });\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eHello, world!\u003c/h1\u003e\n        \u003ch2\u003eIt is {this.state.date.toLocaleTimeString()}.\u003c/h2\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Props\n\nProps are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes.\n\n```jsx\nfunction Welcome(props) {\n  return \u003ch1\u003eHello, {props.name}\u003c/h1\u003e;\n}\n```\n\n### Conditional Rendering\n\nYou can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.\n\n```jsx\nfunction Greeting(props) {\n  const isLoggedIn = props.isLoggedIn;\n  if (isLoggedIn) {\n    return \u003ch1\u003eWelcome back!\u003c/h1\u003e;\n  }\n  return \u003ch1\u003ePlease sign up.\u003c/h1\u003e;\n}\n```\n\n### Handling Events\n\nHandling events in React elements is very similar to handling events on DOM elements. There are some syntax differences, like camelCase naming and passing a function as the event handler.\n\n```jsx\nfunction ActionLink() {\n  function handleClick(e) {\n    e.preventDefault();\n    console.log('The link was clicked.');\n  }\n\n  return (\n    \u003ca href=\"#\" onClick={handleClick}\u003e\n      Click me\n    \u003c/a\u003e\n  );\n}\n```\n\n### Forms\n\nForms in React are similar to HTML forms. However, React provides more control over the form elements and data, using state to manage the form's input values.\n\n```jsx\nclass NameForm extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {value: ''};\n\n    this.handleChange = this.handleChange.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  handleChange(event) {\n    this.setState({value: event.target.value});\n  }\n\n  handleSubmit(event) {\n    alert('A name was submitted: ' + this.state.value);\n    event.preventDefault();\n  }\n\n  render() {\n    return (\n      \u003cform onSubmit={this.handleSubmit}\u003e\n        \u003clabel\u003e\n          Name:\n          \u003cinput type=\"text\" value={this.state.value} onChange={this.handleChange} /\u003e\n        \u003c/label\u003e\n        \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n```\n\n## Best Practices for React Coding\n\n### Use Functional Components and Hooks\n\nFunctional components are simpler and more concise than class components. Use hooks like useState and useEffect to manage state and lifecycle methods in functional components.\n\n```jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() =\u003e {\n    document.title = `You clicked ${count} times`;\n  }, [count]);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eYou clicked {count} times\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n        Click me\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Lift State Up\n\nTo manage shared state between components, lift the state up to the nearest common ancestor component.\n\n### Use PropTypes for Type Checking\n\nUse PropTypes to catch bugs by ensuring that components receive props of the correct type.\n\n```jsx\nimport PropTypes from 'prop-types';\n\nfunction Welcome(props) {\n  return \u003ch1\u003eHello, {props.name}\u003c/h1\u003e;\n}\n\nWelcome.propTypes = {\n  name: PropTypes.string.isRequired\n};\n```\n\n### Use Keys in Lists\n\nWhen rendering lists of elements, provide a unique key for each element to help React identify which items have changed.\n\n```jsx\nconst listItems = numbers.map((number) =\u003e\n  \u003cli key={number.toString()}\u003e\n    {number}\n  \u003c/li\u003e\n);\n```\n\n### Optimize Performance with React.memo\n\nUse React.memo to optimize functional components by memoizing the rendered output.\n\n```jsx\nconst MyComponent = React.memo(function MyComponent(props) {\n  /* render using props */\n});\n```\n\n## Clone the Repository\n\nIn the terminal, use the following command:\n\n```bash\ngit clone https://github.com/afsify/reactjs.git\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafsify%2Freactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafsify%2Freactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafsify%2Freactjs/lists"}