{"id":24569091,"url":"https://github.com/ryomendev/react-ts-base","last_synced_at":"2026-04-16T07:30:57.001Z","repository":{"id":271243813,"uuid":"912795145","full_name":"RyomenDev/react-ts-base","owner":"RyomenDev","description":"A beginner-friendly repository to learn React with TypeScript, featuring clean code, reusable components, and TypeScript best practices. Perfect for building scalable, type-safe React applications while mastering essential development concepts.","archived":false,"fork":false,"pushed_at":"2025-01-12T13:18:48.000Z","size":81,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-10T09:18:38.786Z","etag":null,"topics":["context-api","hooks","learning-by-doing","props","react-hooks","reacttsx","tailwind","type-assertion","typescript","usecontext","usereducer","usestate"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/RyomenDev.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":"2025-01-06T12:10:38.000Z","updated_at":"2025-01-12T13:18:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"001e282a-5c39-4250-b778-5e81f2b78a59","html_url":"https://github.com/RyomenDev/react-ts-base","commit_stats":null,"previous_names":["ryomendev/react-ts-base"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RyomenDev/react-ts-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2Freact-ts-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2Freact-ts-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2Freact-ts-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2Freact-ts-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyomenDev","download_url":"https://codeload.github.com/RyomenDev/react-ts-base/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyomenDev%2Freact-ts-base/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31876259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"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":["context-api","hooks","learning-by-doing","props","react-hooks","reacttsx","tailwind","type-assertion","typescript","usecontext","usereducer","usestate"],"created_at":"2025-01-23T14:56:14.703Z","updated_at":"2026-04-16T07:30:56.981Z","avatar_url":"https://github.com/RyomenDev.png","language":"TypeScript","readme":"\n# Learning TypeScript\n\nThis repository contains various examples and exercises to help you learn TypeScript, with a focus on React concepts and features. The following topics are covered:\n\n- **Class Components**\n- **Props and Component as Props**\n- **React Hooks** (useState, useReducer, useRef)\n- **Context API**\n- **Custom Components**\n- **Generics and Polymorphic Components**\n- **Restricting Props**\n- **Template Literals in TypeScript**\n\n## Table of Contents\n\n- [Class Components](#class-components)\n- [Props and Component as Props](#props-and-component-as-props)\n- [React Hooks](#react-hooks)\n  - [useState](#usestate)\n  - [useReducer](#usereducer)\n  - [useRef](#useref)\n- [Context API](#context-api)\n- [Custom Components](#custom-components)\n- [Generics and Polymorphic Components](#generics-and-polymorphic-components)\n- [Restricting Props](#restricting-props)\n- [Template Literals](#template-literals)\n\n## Class Components\n\nClass components in React are ES6 classes that extend `React.Component`. Here is an example:\n\n```tsx\nimport React, { Component } from 'react';\n\ninterface MyComponentProps {\n  message: string;\n}\n\nclass MyComponent extends Component\u003cMyComponentProps\u003e {\n  render() {\n    return \u003ch1\u003e{this.props.message}\u003c/h1\u003e;\n  }\n}\n```\n\n## Props and Component as Props\n\nProps are used to pass data into a component. A component can also accept other components as props.\n\nExample of passing data as props:\n\n```tsx\ninterface MyComponentProps {\n  message: string;\n}\n\nconst MyComponent = ({ message }: MyComponentProps) =\u003e {\n  return \u003ch1\u003e{message}\u003c/h1\u003e;\n};\n```\n\nPassing a component as a prop:\n\n```tsx\ninterface ButtonProps {\n  label: string;\n  onClick: () =\u003e void;\n}\n\nconst Button: React.FC\u003cButtonProps\u003e = ({ label, onClick }) =\u003e (\n  \u003cbutton onClick={onClick}\u003e{label}\u003c/button\u003e\n);\n\nconst Parent = () =\u003e {\n  return (\n    \u003cButton label=\"Click Me\" onClick={() =\u003e alert('Button clicked!')} /\u003e\n  );\n};\n```\n\n## React Hooks\n\n### `useState`\n\nThe `useState` hook allows you to add state to functional components.\n\n```tsx\nimport React, { useState } from 'react';\n\nconst Counter = () =\u003e {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCount: {count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### `useReducer`\n\n`useReducer` is similar to `useState` but gives you more control over state updates, ideal for complex state logic.\n\n```tsx\nimport React, { useReducer } from 'react';\n\nconst reducer = (state: number, action: string): number =\u003e {\n  switch (action) {\n    case 'increment':\n      return state + 1;\n    case 'decrement':\n      return state - 1;\n    default:\n      return state;\n  }\n};\n\nconst Counter = () =\u003e {\n  const [state, dispatch] = useReducer(reducer, 0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCount: {state}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e dispatch('increment')}\u003eIncrement\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch('decrement')}\u003eDecrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### `useRef`\n\nThe `useRef` hook allows you to persist values between renders without triggering re-renders.\n\n```tsx\nimport React, { useRef } from 'react';\n\nconst FocusInput = () =\u003e {\n  const inputRef = useRef\u003cHTMLInputElement\u003e(null);\n\n  const handleFocus = () =\u003e {\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput ref={inputRef} /\u003e\n      \u003cbutton onClick={handleFocus}\u003eFocus the input\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Context API\n\nThe Context API allows you to share state across your component tree without passing props down manually.\n\n```tsx\nimport React, { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext('light');\n\nconst App = () =\u003e {\n  const [theme, setTheme] = useState('light');\n\n  return (\n    \u003cThemeContext.Provider value={theme}\u003e\n      \u003cbutton onClick={() =\u003e setTheme(theme === 'light' ? 'dark' : 'light')}\u003e\n        Toggle Theme\n      \u003c/button\u003e\n      \u003cChildComponent /\u003e\n    \u003c/ThemeContext.Provider\u003e\n  );\n};\n\nconst ChildComponent = () =\u003e {\n  const theme = useContext(ThemeContext);\n  return \u003cdiv\u003eThe current theme is {theme}\u003c/div\u003e;\n};\n```\n\n## Custom Components\n\nCustom components are React components that you create to encapsulate specific logic or UI elements.\n\n```tsx\ninterface CardProps {\n  title: string;\n  content: string;\n}\n\nconst Card: React.FC\u003cCardProps\u003e = ({ title, content }) =\u003e (\n  \u003cdiv\u003e\n    \u003ch3\u003e{title}\u003c/h3\u003e\n    \u003cp\u003e{content}\u003c/p\u003e\n  \u003c/div\u003e\n);\n\nconst App = () =\u003e (\n  \u003cCard title=\"Card Title\" content=\"This is the content of the card.\" /\u003e\n);\n```\n\n## Generics and Polymorphic Components\n\nGenerics allow you to define components that work with a variety of types.\n\n```tsx\ninterface ButtonProps\u003cT\u003e {\n  label: string;\n  onClick: (value: T) =\u003e void;\n}\n\nconst Button = \u003cT,\u003e({ label, onClick }: ButtonProps\u003cT\u003e) =\u003e {\n  return \u003cbutton onClick={() =\u003e onClick('clicked' as T)}\u003e{label}\u003c/button\u003e;\n};\n\nconst App = () =\u003e {\n  const handleClick = (value: string) =\u003e alert(value);\n  return \u003cButton label=\"Click Me\" onClick={handleClick} /\u003e;\n};\n```\n\n## Restricting Props\n\nYou can restrict the values that a prop can accept using TypeScript types.\n\n```tsx\ninterface ButtonProps {\n  type: 'button' | 'submit' | 'reset';\n}\n\nconst Button = ({ type }: ButtonProps) =\u003e (\n  \u003cbutton type={type}\u003eClick Me\u003c/button\u003e\n);\n```\n\n## Template Literals\n\nTemplate literals allow you to embed expressions within string literals.\n\n```tsx\nconst name = 'John';\nconst greeting = `Hello, ${name}! Welcome to TypeScript.`;\n\nconsole.log(greeting); // Output: Hello, John! Welcome to TypeScript.\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryomendev%2Freact-ts-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryomendev%2Freact-ts-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryomendev%2Freact-ts-base/lists"}