From 6b7e00c3b99a6c9220c4be7a088673eb98d07209 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Thu, 9 Sep 2021 15:25:50 -0400 Subject: [PATCH] pages: copied from git@github.com:dancesWithCycles/grassroot-react-app.git --- pages/README.md | 2 +- pages/index.html | 2 +- pages/package.json | 7 ++++--- pages/src/index.js | 14 ++------------ pages/src/main.js | 21 +++++++++++++++++++++ pages/src/pages/about.js | 19 +++++++++++++++++++ pages/src/pages/contact.js | 14 ++++++++++++++ pages/src/pages/home.js | 34 ++++++++++++++++++++++++++++++++++ 8 files changed, 96 insertions(+), 17 deletions(-) create mode 100644 pages/src/main.js create mode 100644 pages/src/pages/about.js create mode 100644 pages/src/pages/contact.js create mode 100644 pages/src/pages/home.js diff --git a/pages/README.md b/pages/README.md index 211ffe9..01a0788 100644 --- a/pages/README.md +++ b/pages/README.md @@ -1 +1 @@ -[source](https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/) \ No newline at end of file +[source](git@github.com:dancesWithCycles/grassroot-react-app.git) \ No newline at end of file diff --git a/pages/index.html b/pages/index.html index 8de457a..bf34478 100644 --- a/pages/index.html +++ b/pages/index.html @@ -2,7 +2,7 @@ - react-config-tutorial + pages
diff --git a/pages/package.json b/pages/package.json index aeef8c8..5286744 100644 --- a/pages/package.json +++ b/pages/package.json @@ -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", diff --git a/pages/src/index.js b/pages/src/index.js index 76b0c2f..19ce550 100644 --- a/pages/src/index.js +++ b/pages/src/index.js @@ -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

react-config-tutorial

; - } -} -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(
, document.getElementById('root')); diff --git a/pages/src/main.js b/pages/src/main.js new file mode 100644 index 0000000..571a8b9 --- /dev/null +++ b/pages/src/main.js @@ -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 ( + <> + + + + + + + + + ); +}; +export default Main; diff --git a/pages/src/pages/about.js b/pages/src/pages/about.js new file mode 100644 index 0000000..27584f9 --- /dev/null +++ b/pages/src/pages/about.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const About = () => { + return ( + <> +

+ 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. +

+

+ Home +

+ + ); +}; + +export default About; diff --git a/pages/src/pages/contact.js b/pages/src/pages/contact.js new file mode 100644 index 0000000..65a2aca --- /dev/null +++ b/pages/src/pages/contact.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Contact = () => { + return ( + <> +

git@github.com:dancesWithCycles/react-sandbox.git

+

+ Home +

+ + ); +}; +export default Contact; diff --git a/pages/src/pages/home.js b/pages/src/pages/home.js new file mode 100644 index 0000000..1adcc99 --- /dev/null +++ b/pages/src/pages/home.js @@ -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 . +*/ + +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Home = () => { + return ( + <> +

I am home. I have arrived.

+

+ About +

+

+ Contact +

+ + ); +}; +export default Home;