ruidy/react_template
1
0
Fork 0
mirror of https://github.com/rjNemo/react_template synced 2026-06-06 07:36:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

introduce components folder and refactor

Browse source
This commit is contained in:
Ruidy 2020-10-22 14:50:57 +02:00
parent 93c909003f
commit 0aca319c24
5 changed files with 48 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/App.tsx
View file

@ -1,26 +1,13 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { Link } from 'react-router-dom';
import Router from './Router'; import Router from './Router';
import logo from './assets/logo.svg'; import { Header } from './components/Header';
const App: FC = () => ( const App: FC = () => (
<div> <>
<header> <Header />
<nav>
<img src={logo} alt="logo" width="50px" />
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
</header>
<Router /> <Router />
</div> </>
); );
export default App; export default App;

12
src/Router.tsx
View file

@ -1,20 +1,16 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import profileImg from './assets/about/profile.jpg'; import { Home } from './components/Home';
import { About } from './components/About';
const Router: FC = () => ( const Router: FC = () => (
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/">
<div>Hello</div> <Home />
</Route> </Route>
<Route exact path="/about"> <Route exact path="/about">
<div> <About />
<h1>About</h1>
<div>
<img src={profileImg} alt="profile" width="100%" />
</div>
</div>
</Route> </Route>
</Switch> </Switch>
); );

12
src/components/About.tsx Normal file
View file

@ -0,0 +1,12 @@
import React, { FC } from 'react';
import profileImg from '../assets/about/profile.jpg';
export const About: FC = () => (
<div>
<h1>About</h1>
<div>
<img src={profileImg} alt="profile" width="100%" />
</div>
</div>
);

20
src/components/Header.tsx Normal file
View file

@ -0,0 +1,20 @@
import React, { FC } from 'react';
import { Link } from 'react-router-dom';
import logo from '../assets/logo.svg';
export const Header: FC = () => (
<header>
<nav>
<img src={logo} alt="logo" width="50px" />
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
</header>
);

8
src/components/Home.tsx Normal file
View file

@ -0,0 +1,8 @@
import React, { FC } from 'react';
export const Home: FC = () => (
<div>
<h1>Hello</h1>
<p>Hi there!</p>
</div>
);