|
|
|
@ -34,7 +34,6 @@ import ReactDOM from 'react-dom'
|
|
|
|
|
// class based component
|
|
|
|
|
class Header extends React.Component {
|
|
|
|
|
render() {
|
|
|
|
|
console.log(this.props.data)
|
|
|
|
|
const {
|
|
|
|
|
welcome,
|
|
|
|
|
title,
|
|
|
|
@ -44,7 +43,7 @@ class Header extends React.Component {
|
|
|
|
|
} = this.props.data
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<header style={this.props.styles}>
|
|
|
|
|
<header>
|
|
|
|
|
<div className='header-wrapper'>
|
|
|
|
|
<h1>{welcome}</h1>
|
|
|
|
|
<h2>{title}</h2>
|
|
|
|
@ -74,7 +73,7 @@ class App extends React.Component {
|
|
|
|
|
firstName: 'Asabeneh',
|
|
|
|
|
lastName: 'Yetayeh',
|
|
|
|
|
},
|
|
|
|
|
date: 'Oct 7, 2020',
|
|
|
|
|
date: 'Oct 9, 2020',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// conditional rendering using if and else statement
|
|
|
|
@ -140,7 +139,7 @@ class Header extends React.Component {
|
|
|
|
|
} = this.props.data
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<header style={this.props.styles}>
|
|
|
|
|
<header>
|
|
|
|
|
<div className='header-wrapper'>
|
|
|
|
|
<h1>{welcome}</h1>
|
|
|
|
|
<h2>{title}</h2>
|
|
|
|
@ -236,7 +235,6 @@ const buttonStyles = {
|
|
|
|
|
// class based component
|
|
|
|
|
class Header extends React.Component {
|
|
|
|
|
render() {
|
|
|
|
|
console.log(this.props.data)
|
|
|
|
|
const {
|
|
|
|
|
welcome,
|
|
|
|
|
title,
|
|
|
|
@ -246,7 +244,7 @@ class Header extends React.Component {
|
|
|
|
|
} = this.props.data
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<header style={this.props.styles}>
|
|
|
|
|
<header>
|
|
|
|
|
<div className='header-wrapper'>
|
|
|
|
|
<h1>{welcome}</h1>
|
|
|
|
|
<h2>{title}</h2>
|
|
|
|
@ -337,7 +335,6 @@ const buttonStyles = {
|
|
|
|
|
// class based component
|
|
|
|
|
class Header extends React.Component {
|
|
|
|
|
render() {
|
|
|
|
|
console.log(this.props.data)
|
|
|
|
|
const {
|
|
|
|
|
welcome,
|
|
|
|
|
title,
|
|
|
|
@ -347,7 +344,7 @@ class Header extends React.Component {
|
|
|
|
|
} = this.props.data
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<header style={this.props.styles}>
|
|
|
|
|
<header>
|
|
|
|
|
<div className='header-wrapper'>
|
|
|
|
|
<h1>{welcome}</h1>
|
|
|
|
|
<h2>{title}</h2>
|
|
|
|
@ -505,21 +502,25 @@ class App extends React.Component {
|
|
|
|
|
date: 'Oct 9, 2020',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const status = this.state.loggedIn ? <Welcome /> : <Login />
|
|
|
|
|
// We can destructure state
|
|
|
|
|
|
|
|
|
|
const { loggedIn, techs } = this.state
|
|
|
|
|
|
|
|
|
|
const status = loggedIn ? <Welcome /> : <Login />
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='app'>
|
|
|
|
|
<Header data={data} />
|
|
|
|
|
{status}
|
|
|
|
|
<Button
|
|
|
|
|
text={this.state.loggedIn ? 'Logout' : 'Login'}
|
|
|
|
|
text={loggedIn ? 'Logout' : 'Login'}
|
|
|
|
|
style={buttonStyles}
|
|
|
|
|
onClick={this.handleLogin}
|
|
|
|
|
/>
|
|
|
|
|
{this.state.techs.length === 3 && (
|
|
|
|
|
{techs.length === 3 && (
|
|
|
|
|
<p>You have all the prerequisite courses to get started React</p>
|
|
|
|
|
)}
|
|
|
|
|
{!this.state.loggedIn && (
|
|
|
|
|
{!loggedIn && (
|
|
|
|
|
<p>
|
|
|
|
|
Please login to access more information about 30 Days Of React
|
|
|
|
|
challenge
|
|
|
|
@ -738,7 +739,6 @@ class App extends React.Component {
|
|
|
|
|
},
|
|
|
|
|
date: 'Oct 9, 2020',
|
|
|
|
|
}
|
|
|
|
|
const techs = ['HTML', 'CSS', 'JavaScript']
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='app'>
|
|
|
|
@ -776,7 +776,6 @@ ReactDOM.render(<App />, rootElement)
|
|
|
|
|
1. Make a single page application which changes the body of the background based on the time of the day(Autumn, Winter, Spring, Summer)
|
|
|
|
|
2. Make a single page application which change the body of the background based on the time of the day(Morning, Noon, Evening, Night)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Exercises: Level 3
|
|
|
|
|
|
|
|
|
|
Coming
|
|
|
|
|