diegobaena89
3 years ago
parent
cdc9cb5289
commit
88dacd93b1
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>States</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "states",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.0.0",
|
||||||
|
"react-dom": "^18.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.0.0",
|
||||||
|
"@types/react-dom": "^18.0.0",
|
||||||
|
"@vitejs/plugin-react": "^1.3.0",
|
||||||
|
"vite": "^2.9.9"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: calc(10px + 2vmin);
|
||||||
|
}
|
||||||
@ -0,0 +1,255 @@
|
|||||||
|
// index.js
|
||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
import asabenehImage from './images/asabeneh.jpg'
|
||||||
|
|
||||||
|
// Fuction to show month date year
|
||||||
|
|
||||||
|
const showDate = (time) => {
|
||||||
|
const months = [
|
||||||
|
'January',
|
||||||
|
'February',
|
||||||
|
'March',
|
||||||
|
'April',
|
||||||
|
'May',
|
||||||
|
'June',
|
||||||
|
'July',
|
||||||
|
'August',
|
||||||
|
'September',
|
||||||
|
'October',
|
||||||
|
'November',
|
||||||
|
'December',
|
||||||
|
]
|
||||||
|
|
||||||
|
const month = months[time.getMonth()].slice(0, 3)
|
||||||
|
const year = time.getFullYear()
|
||||||
|
const date = time.getDate()
|
||||||
|
return ` ${month} ${date}, ${year}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// User Card Component
|
||||||
|
const UserCard = ({ user: { firstName, lastName, image } }) => (
|
||||||
|
<div className='user-card'>
|
||||||
|
<img src={image} alt={firstName} />
|
||||||
|
<h2>
|
||||||
|
{firstName}
|
||||||
|
{lastName}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
// A button component
|
||||||
|
const Button = ({ text, onClick, style }) => (
|
||||||
|
<button style={style} onClick={onClick}>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
|
||||||
|
// CSS styles in JavaScript Object
|
||||||
|
const buttonStyles = {
|
||||||
|
backgroundColor: '#61dbfb',
|
||||||
|
padding: 10,
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: 5,
|
||||||
|
margin: 3,
|
||||||
|
cursor: 'pointer',
|
||||||
|
fontSize: 18,
|
||||||
|
color: 'white',
|
||||||
|
}
|
||||||
|
|
||||||
|
// class based component
|
||||||
|
class Header extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
// the code inside the constructor run before any other code
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
console.log(this.props.data)
|
||||||
|
const {
|
||||||
|
welcome,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
author: { firstName, lastName },
|
||||||
|
date,
|
||||||
|
} = this.props.data
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header style={this.props.styles}>
|
||||||
|
<div className='header-wrapper'>
|
||||||
|
<h1>{welcome}</h1>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
<h3>{subtitle}</h3>
|
||||||
|
<p>
|
||||||
|
{firstName} {lastName}
|
||||||
|
</p>
|
||||||
|
<small>{date}</small>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const Count = ({ count, addOne, minusOne }) => (
|
||||||
|
<div>
|
||||||
|
<h1>{count} </h1>
|
||||||
|
<div>
|
||||||
|
<Button text='+1' onClick={addOne} style={buttonStyles} />
|
||||||
|
<Button text='-1' onClick={minusOne} style={buttonStyles} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
// TechList Component
|
||||||
|
// class base component
|
||||||
|
class TechList extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { techs } = this.props
|
||||||
|
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
||||||
|
return techsFormatted
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main Component
|
||||||
|
// Class Component
|
||||||
|
class Main extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
techs,
|
||||||
|
user,
|
||||||
|
greetPeople,
|
||||||
|
handleTime,
|
||||||
|
changeBackground,
|
||||||
|
count,
|
||||||
|
addOne,
|
||||||
|
minusOne,
|
||||||
|
} = this.props
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div className='main-wrapper'>
|
||||||
|
<p>Prerequisite to get started react.js:</p>
|
||||||
|
<ul>
|
||||||
|
<TechList techs={techs} />
|
||||||
|
</ul>
|
||||||
|
<UserCard user={user} />
|
||||||
|
<Button
|
||||||
|
text='Greet People'
|
||||||
|
onClick={greetPeople}
|
||||||
|
style={buttonStyles}
|
||||||
|
/>
|
||||||
|
<Button text='Show Time' onClick={handleTime} style={buttonStyles} />
|
||||||
|
<Button
|
||||||
|
text='Change Background'
|
||||||
|
onClick={changeBackground}
|
||||||
|
style={buttonStyles}
|
||||||
|
/>
|
||||||
|
<Count count={count} addOne={addOne} minusOne={minusOne} />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer Component
|
||||||
|
// Class component
|
||||||
|
class Footer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<div className='footer-wrapper'>
|
||||||
|
<p>Copyright {this.props.date.getFullYear()}</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
state = {
|
||||||
|
count: 0,
|
||||||
|
styles: {
|
||||||
|
backgroundColor: '',
|
||||||
|
color: '',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
showDate = (time) => {
|
||||||
|
const months = [
|
||||||
|
'January',
|
||||||
|
'February',
|
||||||
|
'March',
|
||||||
|
'April',
|
||||||
|
'May',
|
||||||
|
'June',
|
||||||
|
'July',
|
||||||
|
'August',
|
||||||
|
'September',
|
||||||
|
'October',
|
||||||
|
'November',
|
||||||
|
'December',
|
||||||
|
]
|
||||||
|
|
||||||
|
const month = months[time.getMonth()].slice(0, 3)
|
||||||
|
const year = time.getFullYear()
|
||||||
|
const date = time.getDate()
|
||||||
|
return ` ${month} ${date}, ${year}`
|
||||||
|
}
|
||||||
|
addOne = () => {
|
||||||
|
this.setState({ count: this.state.count + 1 })
|
||||||
|
}
|
||||||
|
|
||||||
|
// method which subtract one to the state
|
||||||
|
minusOne = () => {
|
||||||
|
this.setState({ count: this.state.count - 1 })
|
||||||
|
}
|
||||||
|
handleTime = () => {
|
||||||
|
alert(this.showDate(new Date()))
|
||||||
|
}
|
||||||
|
greetPeople = () => {
|
||||||
|
alert('Welcome to 30 Days Of React Challenge, 2020')
|
||||||
|
}
|
||||||
|
changeBackground = () => {}
|
||||||
|
render() {
|
||||||
|
const data = {
|
||||||
|
welcome: 'Welcome to 30 Days Of React',
|
||||||
|
title: 'Getting Started React',
|
||||||
|
subtitle: 'JavaScript Library',
|
||||||
|
author: {
|
||||||
|
firstName: 'Asabeneh',
|
||||||
|
lastName: 'Yetayeh',
|
||||||
|
},
|
||||||
|
date: 'Oct 7, 2020',
|
||||||
|
}
|
||||||
|
const techs = ['HTML', 'CSS', 'JavaScript']
|
||||||
|
const date = new Date()
|
||||||
|
// copying the author from data object to user variable using spread operator
|
||||||
|
const user = { ...data.author, image: asabenehImage }
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='app'>
|
||||||
|
{this.state.backgroundColor}
|
||||||
|
<Header data={data} />
|
||||||
|
<Main
|
||||||
|
user={user}
|
||||||
|
techs={techs}
|
||||||
|
handleTime={this.handleTime}
|
||||||
|
greetPeople={this.greetPeople}
|
||||||
|
changeBackground={this.changeBackground}
|
||||||
|
addOne={this.addOne}
|
||||||
|
minusOne={this.minusOne}
|
||||||
|
count={this.state.count}
|
||||||
|
/>
|
||||||
|
<Footer date={new Date()} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,13 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,10 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
)
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()]
|
||||||
|
})
|
||||||
Loading…
Reference in new issue