https://github.com/ryomendev/react-ts-base
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.
https://github.com/ryomendev/react-ts-base
context-api hooks learning-by-doing props react-hooks reacttsx tailwind type-assertion typescript usecontext usereducer usestate
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ryomendev/react-ts-base
- Owner: RyomenDev
- Created: 2025-01-06T12:10:38.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-12T13:18:48.000Z (9 months ago)
- Last Synced: 2025-03-17T05:32:48.568Z (7 months ago)
- Topics: context-api, hooks, learning-by-doing, props, react-hooks, reacttsx, tailwind, type-assertion, typescript, usecontext, usereducer, usestate
- Language: TypeScript
- Homepage:
- Size: 79.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readMe.md
Awesome Lists containing this project
README
# Learning TypeScript
This repository contains various examples and exercises to help you learn TypeScript, with a focus on React concepts and features. The following topics are covered:
- **Class Components**
- **Props and Component as Props**
- **React Hooks** (useState, useReducer, useRef)
- **Context API**
- **Custom Components**
- **Generics and Polymorphic Components**
- **Restricting Props**
- **Template Literals in TypeScript**
## Table of Contents
- [Class Components](#class-components)
- [Props and Component as Props](#props-and-component-as-props)
- [React Hooks](#react-hooks)
- [useState](#usestate)
- [useReducer](#usereducer)
- [useRef](#useref)
- [Context API](#context-api)
- [Custom Components](#custom-components)
- [Generics and Polymorphic Components](#generics-and-polymorphic-components)
- [Restricting Props](#restricting-props)
- [Template Literals](#template-literals)
## Class Components
Class components in React are ES6 classes that extend `React.Component`. Here is an example:
```tsx
import React, { Component } from 'react';
interface MyComponentProps {
message: string;
}
class MyComponent extends Component {
render() {
return
{this.props.message}
;
}
}
```
## Props and Component as Props
Props are used to pass data into a component. A component can also accept other components as props.
Example of passing data as props:
```tsx
interface MyComponentProps {
message: string;
}
const MyComponent = ({ message }: MyComponentProps) => {
return
{message}
;
};
```
Passing a component as a prop:
```tsx
interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC = ({ label, onClick }) => (
{label}
);
const Parent = () => {
return (
alert('Button clicked!')} />
);
};
```
## React Hooks
### `useState`
The `useState` hook allows you to add state to functional components.
```tsx
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
Count: {count}
setCount(count + 1)}>Increment
);
};
```
### `useReducer`
`useReducer` is similar to `useState` but gives you more control over state updates, ideal for complex state logic.
```tsx
import React, { useReducer } from 'react';
const reducer = (state: number, action: string): number => {
switch (action) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, 0);
return (
Count: {state}
dispatch('increment')}>Increment
dispatch('decrement')}>Decrement
);
};
```
### `useRef`
The `useRef` hook allows you to persist values between renders without triggering re-renders.
```tsx
import React, { useRef } from 'react';
const FocusInput = () => {
const inputRef = useRef(null);
const handleFocus = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
Focus the input
);
};
```
## Context API
The Context API allows you to share state across your component tree without passing props down manually.
```tsx
import React, { createContext, useContext, useState } from 'react';
const ThemeContext = createContext('light');
const App = () => {
const [theme, setTheme] = useState('light');
return (
setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
);
};
const ChildComponent = () => {
const theme = useContext(ThemeContext);
return
The current theme is {theme};
};
```
## Custom Components
Custom components are React components that you create to encapsulate specific logic or UI elements.
```tsx
interface CardProps {
title: string;
content: string;
}
const Card: React.FC = ({ title, content }) => (
{title}
{content}
);
const App = () => (
);
```
## Generics and Polymorphic Components
Generics allow you to define components that work with a variety of types.
```tsx
interface ButtonProps {
label: string;
onClick: (value: T) => void;
}
const Button = ({ label, onClick }: ButtonProps) => {
return onClick('clicked' as T)}>{label};
};
const App = () => {
const handleClick = (value: string) => alert(value);
return ;
};
```
## Restricting Props
You can restrict the values that a prop can accept using TypeScript types.
```tsx
interface ButtonProps {
type: 'button' | 'submit' | 'reset';
}
const Button = ({ type }: ButtonProps) => (
Click Me
);
```
## Template Literals
Template literals allow you to embed expressions within string literals.
```tsx
const name = 'John';
const greeting = `Hello, ${name}! Welcome to TypeScript.`;
console.log(greeting); // Output: Hello, John! Welcome to TypeScript.
```