React Hooks I

INFO 253A: Frontend Web Architecture

Kay Ashaolu

React Hooks I INFO 253A: Frontend Web Architecture Kay Ashaolu

By kayashaolu

React Hooks I - Frontend Webarch

	import React, { useState } from 'react';

	function Example() {
	// Declare a new state variable, which we'll call "count"
	const [count, setCount] = useState(0);

	return (
	<div>
	<p>You clicked {count} times</p>
	<button onClick={() => setCount(count + 1)}>
	Click me
	</button>
	</div>
	);
	}

	import React, { useState } from 'react';

	function Example() {
	// Declare a new state variable, which we'll call "count"
	const [count, setCount] = useState(0);

	return (
	<div>
	<p>You clicked {count} times</p>
	<button onClick={() => setCount(count + 1)}>
	Click me
	</button>
	</div>
	);
	}

	useEffect(() => {
	const subscription = props.source.subscribe();
	return () => {
	// Clean up the subscription
	subscription.unsubscribe();
	};
	});

	import React, { useState, useEffect } from 'react';
	import ReactDOM from 'react-dom';

	function Weather(props) {

	const [temp, setTemp] = useState(0);

	let getWeatherData = async () => {
	let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.location}&appid=af578739923ac7f173a6054b24c606ea`);

	if (!response.ok) {
	throw new Error(`HTTP error! status: ${response.status}`);
	} else {
	return response.json();
	}

	}

	useEffect(() => {

	getWeatherData().then((response) => {
	setTemp(response.main.temp);
	}).catch(e => console.log(e));;
	})

	return (
	<div>
	<strong>The temperature of {props.location} is {temp}</strong>
	</div>
	);

	}

	function App(props) {
	return (
	<div>
	<Weather location="Berkeley,ca" />
	<Weather location="Concord,ca" />
	</div>
	);
	}

	ReactDOM.render(
	<App />,
	document.getElementById('root')
	);