Creating an Animated Bad Apple using React.js in the Browser

Posted by

Bad Apple Animation with React.js

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
#app {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
video {
max-width: 100%;
}

Bad Apple Animation with React.js

class BadApple extends React.Component {
render() {
return (

Watch the Bad Apple animation below:

Your browser does not support the video tag.

);
}
}

ReactDOM.render(, document.getElementById(‘app’));