Creating and deploying a simple React Application with AWS Amplify

Let’s take a quick peek at what we are building…

Building the App…

npx create-react-app weatherapp
cd weatherapp
npm start
import "./App.css";function App() {return (<div className="App"><div className="AppContainer"><div className="PageTitle">Weather App</div></div>

<div className="Footer">Built with <a href="https://www.metaweather.com/">MetaWeather</a>
</div>
</div>);}export default App;
.AppContainer{margin:15% auto;display:flex;flex-direction: column;width: 300px;}.PageTitle{text-align: center;font-size:40px;}.Footer{text-align:center;font-size:15px;}
https://www.metaweather.com/api/location/search/?query=chicago
https://www.metaweather.com/api/location/2379574/
import "./LocationSearch.css";import Dropdown from "../Dropdown/Dropdown";
const LocationSearch = (props) => {return (<div className="LocationSearchContainer"><inputtype="text"placeholder="Search for a location"onChange={props.onChangeHandler}></input>{props.showDropdown && (<DropdownsearchResults={props.searchResults}onClickHandler={props.onClickHandler}/>)}</div>);};export default LocationSearch;
.LocationSearchContainer{display:flex;flex-direction: column;position: relative;margin-top:10px;}
import "./Dropdown.css";const Dropdown = (props) => {return (<div className="DropdownContainer">{props.searchResults.map((result, i) => (<div key={i} onClick={() => props.onClickHandler(result.woeid)}>{result.title}</div>))}</div>);};export default Dropdown;
.DropdownContainer{position: absolute;background-color: white;margin-top:21px;max-height: 100px;width:99.2%;overflow-y: scroll;border-bottom: 1px solid black;border-left: 1px solid black;border-right: 1px solid black;}.WeatherInfo{width:70%}.WeatherIcon{width: 25%}.WeatherIcon > img {width: 100%;margin-top:25%;}.Title{font-size: 40px;}.Temperature, .Description{font-size: 20px;}
import "./App.css";import { useState } from "react";import LocationSearch from "./components/LocationSearch/LocationSearch";function App() {const [searchResults, setSearchResults] = useState([]);const [showDropdown, setShowDropdown] = useState(false);const [locationWeather, setLocationWeather] = useState(null);const onChangeHandler = (evt) => {let locationSearchValue = evt.target.value;if (locationSearchValue === "") {setShowDropdown(false);setSearchResults([]);return;}let locationSearchQuery = `https://www.metaweather.com/api/location/search/?query=${locationSearchValue}`;fetch(locationSearchQuery).then((res) => res.json()).then((result) => {if (result.length > 0) {setShowDropdown(true);setSearchResults(result);}});};const onClickHandler = (id) => {let locationWeatherQuery = `https://www.metaweather.com/api/location/${id}/`;fetch(locationWeatherQuery).then((res) => res.json()).then((result) => {if (result.consolidated_weather.length > 0) {setLocationWeather({...result.consolidated_weather[0],title: result.title,});}});setShowDropdown(false);};return (<div className="App"><div className="AppContainer"><div className="PageTitle">Weather App</div><LocationSearchshowDropdown={showDropdown}searchResults={searchResults}onClickHandler={onClickHandler}onChangeHandler={onChangeHandler}/></div><div className="Footer">Built with <a href="https://www.metaweather.com/">MetaWeather</a></div></div>);}export default App;
import "./WeatherCard.css";const WeatherCard = (props) => {const c2f = (c) => c * (9 / 5) + 32;const locationWeather = props.locationWeather;return (<div className="WeatherCardContainer"><div className="WeatherInfo"><div className="Title">{locationWeather.title}</div><div className="Temperature">{c2f(locationWeather.the_temp).toFixed(1)}°F</div><div className="Description">{locationWeather.weather_state_name}</div></div><div className="WeatherIcon"><imgsrc={`https://www.metaweather.com/static/img/weather/png/64/${locationWeather.weather_state_abbr}.png`}alt="weather"></img></div></div>);};export default WeatherCard;
.WeatherCardContainer{display: flex;width:100%;flex-direction: row;justify-content: space-evenly;border-radius: 10px;padding: 10px 0;border: 1px solid black;margin-top:10px;}
import "./App.css";import { useState } from "react";import WeatherCard from "./components/WeatherCard/WeatherCard";import LocationSearch from "./components/LocationSearch/LocationSearch";function App() {const [searchResults, setSearchResults] = useState([]);const [showDropdown, setShowDropdown] = useState(false);const [locationWeather, setLocationWeather] = useState(null);
const onChangeHandler = (evt) => {let locationSearchValue = evt.target.value;if (locationSearchValue === "") {setShowDropdown(false);setSearchResults([]);return;}let locationSearchQuery = `https://www.metaweather.com/api/location/search/?query=${locationSearchValue}`;fetch(locationSearchQuery).then((res) => res.json()).then((result) => {if (result.length > 0) {setShowDropdown(true);setSearchResults(result);}});};const onClickHandler = (id) => {let locationWeatherQuery = `https://www.metaweather.com/api/location/${id}/`;fetch(locationWeatherQuery).then((res) => res.json()).then((result) => {if (result.consolidated_weather.length > 0) {setLocationWeather({...result.consolidated_weather[0],title: result.title,});}});setShowDropdown(false);};return (<div className="App"><div className="AppContainer"><div className="PageTitle">Weather App</div><LocationSearchshowDropdown={showDropdown}searchResults={searchResults}onClickHandler={onClickHandler}onChangeHandler={onChangeHandler}/>{locationWeather && <WeatherCard locationWeather={locationWeather} />}</div><div className="Footer">Built with <a href="https://www.metaweather.com/">MetaWeather</a></div></div>);}export default App;

Deploying our app…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store