なんか下書きでずっと残ってたのですが
消すのももったいないので後で自分が引っ張れるように公開しておきます。
初の React カテゴリ記事
import React, { FC } from 'react';
import { Link } from 'react-router-dom';
import { List } from 'semantic-ui-react';
import './Home.css';
const companies = ['unity-technologies', 'UnitySamples'];
const Home: FC = () => (
<>
<List celled relaxed>
{companies.map(companyName => (
<List.Item className="list-item" key={companyName}>
<List.Icon name="users" size="large" verticalAlign="middle" />
<List.Content>
<Link to={`/${companyName}/members`}>{companyName}</Link>
</List.Content>
</List.Item>
))}
</List>
</>
);
export default Home;
import React, { FC } from 'react';
import { Redirect, Route, Switch } from 'react-router';
import { Grid, Menu, Container } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import './App.css';
import './styles/semantic.min.css';
interface MenuItem {
name: string;
linkto: string;
}
const title = 'SimplestarGame';
const menuItems = [
{ name: 'SimplestarGame', linkto: '/UnitySamples/members' },
{ name: 'Home', linkto: '' },
{ name: 'About', linkto: '/UnitySamples/members' },
{ name: 'Contact', linkto: '/unity-technologies/members' },
];
const App: FC = () => (
<>
<Grid padded className="tablet computer only">
<Menu borderless fluid inverted size="huge">
<Container>
{menuItems.map((item: MenuItem) => (
<Menu.Item header as={Link} to={item.linkto}>
{item.name}
</Menu.Item>
))}
</Container>
</Menu>
</Grid>
</>
);
export default App;
const useTimer = (limitSec: number): [number, () => void] => {
const [timeLeft, setTimeLeft] = useState(limitSec);
const reset = () => {
setTimeLeft(limitSec);
};
useEffect(() => {
const tick = () => {
setTimeLeft(prevTime => (prevTime === 0 ? limitSec : prevTime - 1));
};
const timerId = setInterval(tick, 1000);
return () => clearInterval(timerId);
}, [limitSec]);
return [timeLeft, reset];
};