Scribd
Upload
2 views

React app.js code

This document contains a React component named 'App' that renders a header with a logo, a message, and a link to learn React. It also includes CSS styles for the application, defining layout, colors, and animations for the logo. The logo is set to spin indefinitely unless reduced motion preferences are detected.

Uploaded by

nilimapawase14
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

React app.js code

This document contains a React component named 'App' that renders a header with a logo, a message, and a link to learn React. It also includes CSS styles for the application, defining layout, colors, and animations for the logo. The logo is set to spin indefinitely unless reduced motion preferences are detected.

Uploaded by

nilimapawase14
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import logo from './logo.

svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {


.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

You might also like