create simple hello world app
This commit is contained in:
@@ -1,80 +1,19 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
||||
import React, { Component } from 'react';
|
||||
import './App.css';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
import Home from './scenes/Home';
|
||||
import NotFound from './scenes/NotFound';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/">Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about">About</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/topics">Topics</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/about" component={About} />
|
||||
<Route path="/topics" component={Topics} />
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Home</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function About() {
|
||||
return (
|
||||
<div>
|
||||
<h2>About</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Topics({ match }) {
|
||||
return (
|
||||
<div>
|
||||
<h2>Topics</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={`${match.url}/components`}>Components</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Route path={`${match.path}/:topicId`} component={Topic} />
|
||||
<Route
|
||||
exact
|
||||
path={match.path}
|
||||
render={() => <h3>Please select a topic.</h3>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Topic({ match }) {
|
||||
return (
|
||||
<div>
|
||||
<h3>{match.params.topicId}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
9
client/src/scenes/Home/index.js
Normal file
9
client/src/scenes/Home/index.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function Home () {
|
||||
return (
|
||||
<div>
|
||||
<h3>Sima Space - CRM Integration</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
client/src/scenes/NotFound/index.js
Normal file
9
client/src/scenes/NotFound/index.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function NotFound () {
|
||||
return (
|
||||
<div>
|
||||
<h1>Page not found</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user