React SPA Example page

index.html

<div id="wrapper"></div>

react-spa-example-page.markdown

React SPA Example page

Simple React SPA example.

A Pen by Alex Theobold on CodePen.

License.

script.babel

// select wrapper
const wrapper = document.getElementById('wrapper');

// import from react-router-dom
const { BrowserRouter, NavLink, Route } = ReactRouterDOM; 

// app component
class App extends React.Component {
	render() {
		return (
			<BrowserRouter>
				<Page />
			</BrowserRouter>	
		);
	}
}

// page component
class Page extends React.Component {
	render() {
		return (
			<div id="page">
				<nav className="navbar navbar-expand-lg navbar-dark bg-dark header">
					<div className="container-fluid">
						<ul className="navbar-nav mr-auto container">
							<NavLink className="nav-link" exact to="/">Home</NavLink>
							<NavLink className="nav-link" exact to="/about">About</NavLink>
							<NavLink  className="nav-link" exact to="/services">Services</NavLink>
							<NavLink className="nav-link" exact to="/contact">Contact</NavLink>
						</ul>
					</div>
				</nav>
				<div id="content" className="container pt-4">
					<Route exact path="/" component={Home} />
					<Route exact path="/about" component={About} />
					<Route exact path="/services" component={Services} />
					<Route exact path="/contact" component={Contact} />
				</div>
				<div id="footer">
					<Route component={Footer} />
				</div>
			</div>
		)
	}
};

// footer component
class Footer extends React.Component{
	render() {
		return (
			<nav className="navbar navbar-expand-lg navbar-dark bg-dark footer">
				<div className="container-fluid">
					<ul className="navbar-nav mr-auto container">
						<li className="nav-item"><a href="https://www.alextheobold.com" target="blank" className="nav-link">Design by Alex Theobold</a></li>
					</ul>
				</div>
			</nav>	
		)
	}
};

// panel classes
class Home extends React.Component {
	render() {
		return (
			<div>
				<h1>Hello World! You're on the home page</h1>
				<p>This is a paragraph of text on the homepage.</p>
			</div>
		)
	}
}

class About extends React.Component {
	render() {
		return (
			<div>
				<h1>This is the About Panel</h1>
				<p>Here is some more text. This paragraph tells you how cool and unique our company is.</p>
			</div>
		)
	}
}

class Services extends React.Component {
	render() {
		return (
			<div>
				<h1>This is the Services Panel</h1>
				<p>Here we will give a vague, buzzword filled soliloqy about why our customers choose us! But we will not tell you exactly what we do.</p>
			</div>
		)
	}
}

class Contact extends React.Component {
	render() {
		return (
			<div>
				<h1>This is the Contact Panel</h1>
				<form>
					<div className="form-group">
						<input type="text" placeholder="Your Name"></input>
					</div>
					<div className="form-group">
						<input type="email" placeholder="Enter email"></input>
						<small id="emailHelp" class="form-text text-muted">We will only share your email with a select group of Russian hackers.</small>
					</div>
					<div class="form-group form-check">
						<input type="checkbox" class="form-check-input" id="exampleCheck1"></input>
    					<label class="form-check-label" for="exampleCheck1">If the answer to whether this box is checked is <strong>!(!true && 5 > 6) && !(10 == "10" || false && !true)</strong> we will pass your details to third parties.</label>
 					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
			</div>
		)
	}
}


// render app to dom
ReactDOM.render(<App />, wrapper);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script>

style.css

#footer {
	position: fixed;
	bottom: 0;
	width: 100vw;
}

.header {
	box-shadow: 0 0 5px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />