Javascript Project - Beach Resort

1:01:27 - Finished App.js and Navbar.js

npx create-react-app resort
npm install react-icons
npm i react-router-dom --save
npm start

React Router DOM Documentation

 App.js

import React from "react";
import "./App.css";

import Home from "./pages/Home";
import Rooms from "./pages/Rooms";
import SingleRoom from "./pages/SingleRoom";
import Error from "./pages/Error";

import { Route, Switch } from "react-router-dom";

function App() {
return (
<>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/rooms/" component={Rooms} />
<Route exact path="/rooms/:slug" component={SingleRoom} />
<Route component={Error} />
</Switch>
</>
);
}

export default App;

Navbar.js

import React, { Component } from "react";
import logo from "../images/logo.svg";
import { FaAlignRight } from "react-icons/fa";
import { Link } from "react-router-dom";

export default class Navbar extends Component {
state = {
isOpen: false
};
handleToggle = () => {
this.setState({ isOpen: !this.state.isOpen });
};
render() {
return (
<nav className="navbar">
<div className="nav-center">
<div className="nav-header">
<Link to="/">
<img src={logo} alt="Beach Resort" />
</Link>
<button
type="button"
className="nav-btn"
onClick={this.handleToggle}
>
<FaAlignRight className="nav-icon" />
</button>
</div>
<ul
className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}
>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/rooms">Rooms</Link>
</li>
</ul>
</div>
</nav>
);
}
}

Banner.js

import React from "react";

export default function Banner({ children, title, subtitle }) {
return (
<div className="banner">
<h1>{title}</h1>
<div />
<p>{subtitle}</p>
{children}
</div>
);
}

 Hero.js

import React from "react";

export default function Hero({ children, hero }) {
return <header className={hero}>{children}</header>;
}

Hero.defaultProps = {
hero: "defaultHero"
};

 Loading.js

import React from "react";
import loadingGif from "../images/gif/loading-arrow.gif";
export default function Loading() {
return (
<div className="loading">
<h4>Getting data...</h4>
<img src={loadingGif} alt="" />
</div>
);
}

2:01:32 - Created Context.js
2:29:30 - Starting SingleRoom.js
2:51:44 - Creating StyledHero.js

Styled Components

npm install --save styled-components

www.styled-components.com

To test the installation, in Home.js:

import Button from "../components/StyledHero";

<Button>Hello</Button>

Create new file StyledHero.js:

import styled from "styled-components";
const orange = "#f15025";
const SimpleButton = styled.button`
color: ${orange};
background: green;
font-size: 3rem;
`;

export default SimpleButton;

If successful, orange button should appear at bottom of homepage: