├── public ├── robots.txt ├── favicon.ico └── index.html ├── src ├── setupTests.js ├── components │ ├── blog │ │ ├── Blog.jsx │ │ ├── Posts.jsx │ │ └── Post.jsx │ ├── index.js │ ├── Footer.jsx │ ├── About.jsx │ ├── Home.jsx │ ├── Contact.jsx │ └── Navigation.jsx ├── index.css ├── index.js └── serviceWorker.js ├── .gitignore ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeariv/ReactMultiPageWebsite/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/components/blog/Blog.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | 4 | function Blog() { 5 | return ( 6 |
7 |
8 |

Blog page

9 | 10 |
11 |
12 | ); 13 | } 14 | 15 | export default Blog; 16 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Navigation } from "./Navigation"; 2 | export { default as Footer } from "./Footer"; 3 | export { default as Home } from "./Home"; 4 | export { default as About } from "./About"; 5 | export { default as Contact } from "./Contact"; 6 | export { default as Blog } from "./blog/Blog"; 7 | export { default as Posts } from "./blog/Posts"; 8 | export { default as Post } from "./blog/Post"; 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Footer() { 4 | return ( 5 |
6 | 13 |
14 | ); 15 | } 16 | 17 | export default Footer; 18 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | a { 15 | text-decoration: none; 16 | color: black; 17 | } 18 | a:hover { 19 | text-decoration: none; 20 | color: rgba(0, 0, 0, 0.349); 21 | } 22 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 16 | React App 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import * as serviceWorker from "./serviceWorker"; 5 | import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 6 | import { 7 | Navigation, 8 | Footer, 9 | Home, 10 | About, 11 | Contact, 12 | Blog, 13 | Posts, 14 | Post, 15 | } from "./components"; 16 | 17 | ReactDOM.render( 18 | 19 | 20 | 21 | } /> 22 | } /> 23 | } /> 24 | }> 25 | } /> 26 | } /> 27 | 28 | 29 |