dancingCycle
/
sandbox-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pages: copied from git@github.com:dancesWithCycles/grassroot-react-app.git

This commit is contained in:
Begerad, Stefan 2021-09-09 15:25:50 -04:00 committed by Begerad, Stefan
parent 6327b4fb6e
commit 6b7e00c3b9
8 changed files with 96 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/README.md
View File

@ -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
pages/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8" />
<title>react-config-tutorial</title>
<title>pages</title>
</head>
<body>
<div id="root"></div>

7
pages/package.json
View File

@ -1,7 +1,7 @@
{
"name": "react-config-tutorial",
"name": "pages",
"version": "1.0.0",
"description": "react config tutorial",
"description": "pages example",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development",
@ -14,7 +14,8 @@
"license": "GPL-3.0-or-later",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0"
},
"devDependencies": {
"@babel/core": "^7.15.5",

14
pages/src/index.js
View File

@ -1,15 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './style/main.less';
import Main from './main';
/*
*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'));
ReactDOM.render(<Main />, document.getElementById('root'));

21
pages/src/main.js Normal file
View File

@ -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;

19
pages/src/pages/about.js Normal file
View File

@ -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;

14
pages/src/pages/contact.js Normal file
View File

@ -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;

34
pages/src/pages/home.js Normal file
View File

@ -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;