下記のサイトを参考にしながら、React×Typscriptでプロフィールサイトを作成しています。
Skills.tsx内の <Box display='flex' justifyContent='center' p={1} >
以下をコンポーネント化したく、Technic.tsxを作成し、色々調べて実装したのですが、エラー表示が出て、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。
スキル一覧(Skills)を作成 | React × TypeScriptで作ったポートフォリオサイトをGitHub Pagesで公開してみる
※下記のソースコードは引用テキストを雛形として参考にし、装飾等はサイトを検索して、カスタムをしています。
App.tsx
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;
Skills.tsx
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;
※ コンポーネント化 (Tecnic.tsx) したファイル
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;
Tecnic.tsx
でexport default Box;
されててconst Technic
は使用されてないようです。これに関してはexport default Technic;
に直せば良さそうな気がします。