

下記のサイトを参考にしながら、React×Typscriptでプロフィールサイトを作成しています。  
Skills.tsx内の `<Box display='flex' justifyContent='center' p={1} >`
以下をコンポーネント化したく、Technic．tsxを作成し、色々調べて実装したのですが、エラー表示が出て、これ以上積んでわからない状態です。  
何方かアドバイスをお願いします。

[スキル一覧（Skills）を作成 | React × TypeScriptで作ったポートフォリオサイトをGitHub
Pagesで公開してみる](https://qiita.com/kazama1209/items/868c09393007cc9b234f#%E3%82%B9%E3%82%AD%E3%83%AB%E4%B8%80%E8%A6%A7skills%E3%82%92%E4%BD%9C%E6%88%90)

* * *

※下記のソースコードは引用テキストを雛形として参考にし、装飾等はサイトを検索して、カスタムをしています。

**App.tsx**

[code]

    import React from 'react';
    import Navbar from './components/Navbar';
    import MyAvatar from './components/MyAvatar';
    import About from './components/About';
    import Skills from './components/Skills';
    import Technic from './components/Technic';
    ※エラー文'./components/Technic' またはそれに対応する型宣言が見つかりません。
    
    const App: React.FC = () =>  {
      return (
        <>
        <section>
        <Navbar/>
        </section>
        <section>
        <MyAvatar />
        </section>
        <section id='about'>
        <About />
        </section>
        <section id='skills'>
        <Skills />
        </section>
        <section id='Technic'>
        <Technic />
        </section>
        </>
      );
    }
    
    export default App;
    
[/code]

**Skills.tsx**

[code]

    import React from "react";
    import Box from '@material-ui/core/Box';
    import { makeStyles } from "@material-ui/core/styles";
    // import Card from '@material-ui/core/Card';
    // import CardContent from "@material-ui/core/CardContent";
    import Typography from "@material-ui/core/Typography";
    import './Skills.module.scss';
    
    const useStyles = makeStyles({
      root: {
        width: 730,
        maxWidth: '100%',  
      },
    });
    
    const Skills: React.FC = () => {
    
      const classes = useStyles();
    
      return (
        　<>
        <Box p={2}>
          <Box display='flex' justifyContent='center' p={1} >
            <Typography variant='h5' >
              Skills
            </Typography>
          </Box>
    
    
    ※　コンポーネント化（Tecnic.tsx)したい箇所
     {/* <Box display='flex' justifyContent='center' p={1} >
            <Card className={classes.root}>
              <CardContent>
                <Typography variant="h6">
                Programming language
                </Typography>
                <Typography color="textSecondary">
                  Ruby / JavaScript / TypeScript
                </Typography>
              </CardContent>
            </Card>
          </Box>
          <Box display='flex' justifyContent='center' p={1} >
            <Card className={classes.root}>
              <CardContent>
                <Typography variant="h6">
                Framework　
                </Typography>
                <Typography color="textSecondary">
                  Ruby on Rails  / React
                </Typography>
              </CardContent>
            </Card>
          </Box>
          <Box display='flex' justifyContent='center' p={1} >
            <Card className={classes.root}>
              <CardContent>
                <Typography variant="h6">
                Database
                  </Typography>
                  <Typography color="textSecondary">
                    MySQL / PostgreSQL
                  </Typography>
                </CardContent>
              </Card>
            </Box>
            <Box display='flex' justifyContent='center' p={1} >
              <Card className={classes.root}>
                <CardContent>
                  <Typography variant="h6">
                    AWS
                  </Typography>
                  <Typography color="textSecondary">
                    EC2 / ECS / ECR / Lambda / SQS / SNS / Elastic Beanstalk / S3 / Cloud9 / CloudWatch / CloudFormation / RDS / Route53
                  </Typography>
                </CardContent>
              </Card>
            </Box> */}
    ※　コンポーネント化（Tecnic.tsx)したい箇所（ここまで）
    
          </Box>
        </>
      );
    }
    
    export default Skills;
    
[/code]

**※ コンポーネント化 (Tecnic.tsx) したファイル**

[code]

    import React from "react";
    import Box from '@material-ui/core/Box';
    import { makeStyles } from "@material-ui/core/styles";
    import Card from '@material-ui/core/Card';
    import CardContent from "@material-ui/core/CardContent";
    import Typography from "@material-ui/core/Typography";
    
    const useStyles = makeStyles({
        root: {
          width: 730,
          maxWidth: '100%',  
        },
      });
    
      const Technic: React.FC = () => {
    　　　　　※エラー文　：　'Technic' が宣言されていますが、その値が読み取られることはありません。
        const classes = useStyles();
    
        return (
            <>
        <Box p={2}>
    <      Box display='flex' justifyContent='center' p={1} >
            <Card className={classes.root}>
              <CardContent>
                <Typography variant="h6">
                Programming language
                </Typography>
                <Typography color="textSecondary">
                  Ruby / JavaScript / TypeScript
                </Typography>
              </CardContent>
            </Card>
          </Box>
          <Box display='flex' justifyContent='center' p={1} >
            <Card className={classes.root}>
              <CardContent>
                <Typography variant="h6">
                Framework　
                </Typography>
                <Typography color="textSecondary">
                  Ruby on Rails  / React
                </Typography>
              </CardContent>
            </Card>
          </Box>
          <Box display='flex' justifyContent='center' p={1} >
            <Card className={classes.root}>
              <CardContent>
                <Typography variant="h6">
                Database
                  </Typography>
                  <Typography color="textSecondary">
                    MySQL / PostgreSQL
                  </Typography>
                </CardContent>
              </Card>
            </Box>
            <Box display='flex' justifyContent='center' p={1} >
              <Card className={classes.root}>
                <CardContent>
                  <Typography variant="h6">
                    AWS
                  </Typography>
                  <Typography color="textSecondary">
                    EC2 / ECS / ECR / Lambda / SQS / SNS / Elastic Beanstalk / S3 / Cloud9 / CloudWatch / CloudFormation / RDS / Route53
                  </Typography>
                </CardContent>
              </Card>
            </Box>
        </Box>
    
          </>
      );
    }
    
    export default Box;
    
[/code]


CC BY-SA 4.0
2021-06-29T23:51:28.610
77868
2021-07-01T00:35:42.750
2021-07-01T00:35:42.750
3060
43770
question
reactjs
コンポーネント化しようとするとエラーが発生する