react-udemy-course

function getTime() {
        return (new Date()).toLocaleTimeString()
    }
    
 new Date().getMonth()
 
 npm i --save faker
 
 import faker from 'faker';
 
 <img alt="avatar" src={faker.image.avatar()}
 
 
 index.js
 
 <ApprovalCard> 
  <CommentDetail 
      author= "Sam"
      timeAgo= "Today at 4.45PM"
      avatar= {faker.image.avatar()}
 </ApprovalCard>
 
 ApprovalCard.js
 
 <div>{props.children}</div>
 
 
 
 const App = () => {
        return (
            <div>
                <Segment> 
                    <div className="ui icon header">
                        <i className="pdf file outline icon"></i>
                        No documents are listed for this customer.
                    </div>
                    <div className="ui primary button">Add Document</div>
                </Segment>
                <Segment>
                    <h4 class="ui header">For Your Information</h4>
                    <p>
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                    </p>
                </Segment>
            </div>
        );
    }
    
    const Segment = (props) => {
        return(
            <div className="ui placeholder segment">
              {props.children}
            </div>
            )
    }
    
App has code to determine location + month
shows different text/icons based on props 

Updating state on a component causes the component to instantly rerender

inside render - multiline:

render() {
return(
  <div></div>
  )
}

do no put ; after a <div>! 

Component lifecycle methods:

constructor - a good place to do one-time setup, state initialization, it only happens one time! 
render - avoid anything besides returning JSX 
---content visible on the screen
componentDidMount => my component was rendered to the screen, a good place to do data-loading
---sit and waits for the updates
(render)
componentDidUpdate => my component just updated - it re-rendered, a good place to do more data-loading when state/props change, 
we want to make a network request when user clicks on the btn, enter text into an input 
---sit and wait until the component is not longer shown

center text on a page: 
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

<div> 
  <i>
  <h1>
  <i>
</div>


class Clock extends React.Component {
        state = {time: ''}
        
        componentDidMount() {
            setInterval(() => {
                this.setState({time:  new Date().toLocaleTimeString()    
            })}, 1000)
        }
        
        render() {
            return (
                <div className="time">
                    The time is: {this.state.time}
                </div>
            );
        }
    }
    
    
    
    https://api.unsplash.com/search/photos?query=myterm
    
    axios returns a promise 
    
    numbers.map(num => <div>{num}</div>)