触って動く、検証済みの正解集。

import React, {FC} from 'react';

const Student : FC = () => {
    return (
        <div>

import React, {FC} from 'react';

const Teacher : FC = () => {
    return (
        <div>

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Student from "./Components/Student";
import Teacher from "./Components/Teacher";

type Props = {
    Name : string,
    Gakunen : number
}

type Props = {
    Name : string,
    Kyouka : string
}

import React, {FC} from 'react';

type Props = {
    Name : string,
    Gakunen : number

    <div className="App">
      <Student　Name={"鈴木"} Gakunen={3}/>
      <Teacher/>

const Teacher : FC<Props> = (props) => {
    return (
        <div>
            <h2>先生コンポーネント</h2>
            <p>名前：{props.Name}</p>

export type StudentType = {
    Name : string,
    Gakunen : number
}

type Props = {
    Data : TeacherType
}

const Teacher : FC<Props> = (props) => {

type Props = {
    Data : StudentType
}

const Student : FC<Props> = (props) => {

    <div className="App">
      <Student Data={{Name : "鈴木",Gakunen : 3}}/>
      <Teacher Data={{Name : "田中",Kyouka : "数学"}}/>

export type CommonProps<T> = {
    Data : T
}

const IncrementAction = 'inc' as const;
export const Increment = () => ({type : IncrementAction});

const DecrementAction = 'dec' as const;
export const Decrement = () => ({type : DecrementAction});

import React,{createContext, FC, useReducer} from "react";
import {CounterActions, CounterInitialState, CounterReducer} from "./CounterReducer";

type CounterContextState = {
    count : number,

type CounterContextState = {
    count : number,
    dispatch : React.Dispatch<CounterActions>
}

export const CounterContextProvider : FC = ({children}) => {
    const [state,dispatch] = useReducer<typeof CounterReducer>(CounterReducer,CounterInitialState);
    return(
        <CounterContext.Provider value={{
            count : state.count,

import React, {FC, useContext} from 'react';
import logo from './logo.svg';
import './App.css';
import {CounterContext, CounterContextProvider} from "./Contexts/CounterProvider";
import {Decrement, Increment, IncrementAction} from "./Reducers/CounterReducer";

const HogeComponent = () => {
  const AComponents = useMemo((): React.ReactNode[] => {
    return ['a', 'b', 'c'].map(v => <p>{v}</p>);
  }, [])

import {Action} from 'redux'

export enum	ActionNames{
	Increment = 'inc',
	Decrement = 'dec'

import {ActionNames, ActionType} from "../Actions/CounterAction";


export interface IState {
	num : number

import {combineReducers,createStore,Action} from 'redux'
import CounterReducer, {IState} from "../Reducers/CounterReducer";
import {ActionType} from "../Actions/CounterAction";

const rootReducer = combineReducers(

import {ReduxAction, ReduxState} from "../Store/store";
import {DecrementAmount, IncrementAmount} from "../Actions/CounterAction";
import {connect} from "react-redux";
import {Dispatch} from "react";
import Counter from "./Counter";

import React from "react";
import {IState} from "../Reducers/CounterReducer";
import {ActionDispather} from "./Container";

interface Props {

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import {Provider} from "react-redux";
import store from "./Store/store";

	render() {
		return (
			<div>
				{/*<p>CurrentCount:{this.props.value.num}</p>*/}
				{console.log(this.props)}

	render() {
		return (
			<div>
				{/*<p>CurrentCount:{this.props.value.num}</p>*/}
				{/*{console.log(this.props)}*/}

export default connect(
	(state : ReduxState) => {
		console.log(state);
		return {value : state.Counter}
},

export type ReduxState = {
	Counter : IState
};

export type ReduxState = {
	CounterReducer : IState
};