pages: copied from git@github.com:dancesWithCycles/grassroot-react-app.git
This commit is contained in:
parent
6327b4fb6e
commit
6b7e00c3b9
|
@ -1 +1 @@
|
||||||
[source](https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/)
|
[source](git@github.com:dancesWithCycles/grassroot-react-app.git)
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>react-config-tutorial</title>
|
<title>pages</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "react-config-tutorial",
|
"name": "pages",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "react config tutorial",
|
"description": "pages example",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack-dev-server --mode development",
|
"start": "webpack-dev-server --mode development",
|
||||||
|
@ -14,7 +14,8 @@
|
||||||
"license": "GPL-3.0-or-later",
|
"license": "GPL-3.0-or-later",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2"
|
"react-dom": "^17.0.2",
|
||||||
|
"react-router-dom": "^5.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.15.5",
|
"@babel/core": "^7.15.5",
|
||||||
|
|
|
@ -1,15 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import './style/main.less';
|
import Main from './main';
|
||||||
|
|
||||||
/*
|
ReactDOM.render(<Main />, document.getElementById('root'));
|
||||||
*component Welcome
|
|
||||||
*using class syntax from ES6
|
|
||||||
*Webpack needs Babel to process ES6 into ES5 syntaxes in order for this class to work
|
|
||||||
*/
|
|
||||||
class Welcome extends React.Component {
|
|
||||||
render () {
|
|
||||||
return <h1>react-config-tutorial</h1>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ReactDOM.render(<Welcome />, document.getElementById('root'));
|
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
|
||||||
|
import About from './pages/about';
|
||||||
|
import Contact from './pages/contact';
|
||||||
|
import Home from './pages/home';
|
||||||
|
import './style/main.less';
|
||||||
|
|
||||||
|
const Main = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Router>
|
||||||
|
<Switch>
|
||||||
|
<Route exact path="/" component={Home} />
|
||||||
|
<Route path="/about" component={About} />
|
||||||
|
<Route path="/contact" component={Contact} />
|
||||||
|
</Switch>
|
||||||
|
</Router>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Main;
|
|
@ -0,0 +1,19 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
This grassroot app uses React.js, JSX and Webpack bundler to achieve a
|
||||||
|
development environment and to provide an example configuration to build
|
||||||
|
the app for production deployment.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Link to="/">Home</Link>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Contact = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>git@github.com:dancesWithCycles/react-sandbox.git</p>
|
||||||
|
<p>
|
||||||
|
<Link to="/">Home</Link>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Contact;
|
|
@ -0,0 +1,34 @@
|
||||||
|
/*
|
||||||
|
Copyright (C) 2021 Stefan Begerad
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License
|
||||||
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
const Home = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>I am home. I have arrived.</p>
|
||||||
|
<p>
|
||||||
|
<Link to="/About">About</Link>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<Link to="/Contact">Contact</Link>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Home;
|
Loading…
Reference in New Issue