React

by gbos

HTML

<div id="app"></div>

CSS

html, body, div {

    height: 100%;  

}

body {
}

body div {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

h1 {
    text-align: center;
    height: 100%;
    width: 100%;
}

React

const {useState, useEffect} = React;

function getColor (width) {
	if (width < 300) return 'blue';
	if (width < 500) return 'pink';
	if (width < 800) return 'red';
	return 'white';
}

function App () {
	const [color, setColor] = useState('white');
	useEffect(() => {
    	const hdl = e => {
        	setColor(getColor(window.innerWidth));
        };
        window.addEventListener('resize', hdl);
        return () => window.removeEventListener('resize', hdl);
    }, []);

	return <h1 style={{backgroundColor: color}}>hello</h1>;

}


ReactDOM.render(<App />, document.querySelector("#app"))