Please enable JavaScript.

Coggle requires JavaScript to display documents.

Requirements (Components must act like pure functions), React (Components…

- - - - Allows reuse of components and elements reducing overall boilerplate
  - - - function Welcome(props) {
        return <h1>Hello, {props.name} </h1>;
        }
      - You can also use es6
        
        class Welcome extends React.Component {
        render() {
        return (<h1>Hello, {this.props.name}</h1>;
        }
        }
    - - DOM tags start with lowercase letters...
        By that convention components should be uppercase
      - Rendered components are in the "<" + compoennt + ">" format
      - Any expression within curly braces between ">" and "</" or "/>" are rendered as their component types.
    - - Component output can reference other components
        
        Allows component reuse for any abstraction level
        
        Typically react apps contain a single App component
      - Extracting components allows increases readability, conciseness, and allows split components into smaller components
        
        Child components do not need to know what is calling them to construct what
        
        Name props according to component
        This all promotes component resuability
  - - - Changes input, output is not predicable.
      - function withdraw(account, amount) {
        account.total -= amount;
        }
    - - Are read-only, must never alter its own props.
      - Is pure because they do not change inputs and always return same result for same input.
      - function sum(a, b) {
        return a + b;
        }
- - - - used by class components
        is an additional feature of classes
      - Similar to props but private and controlled by component
    - - With a self updating clock you create a class
        
        Within this class you maintain state
        
        maintaining state allows you to update the clock each second independent of the "App" component
    - - five steps
        
        Create es6 class that extends React.component
        
        Add single render() method
        
        Move body of function into render
        
        replace props with this.props
        
        delete empty function decleration
      - Replacing this.props with this.state
        
        replace this.props with this.state
        
        Add class constructor
        
        Always call constructor with super(props);
        
        Assign initial this.state
    - - Do not modify State Directly
        
        use: this.setState({[state]});
        
        Can accept functions instead of objects
        
        this.setState((state, props) => ({
        counter: state.counter + props.increment
        }));
      - Only place you reference this.state is the constructor
      - state updates merge
        
        Update to one variable does not alter other variables in react component "smart rendering"
      - Data flow
        
        Neither parent nor child knows whether a component is stateful or stateless
        
        Components choose wheter to pass state down as a prop or not.
        
        components can only affect what is "below" them in the ui structure
        Undirectional data flow
        
        <FormattedDate date={this.state.date} />
        
        User created component FormattedDate takes in this states date as a prop but does not know where it came from or what is is.
        Any state is always owned by a specific component but only affects components "below" that specific components
  - - - Runs after output has been rendered to the DOM
      - Good place to set up the timer for the clock component
      - componentDidMount() {
        this.timerID = setInterval(
        () => this.tick(),
        1000
        );
        }
        
        Runs tick method at specified interval
        
        tick() =>
    - - componentWillUnmount() {
        clearInterval(this.timerID);
        }
        
        Will clear intervals for this.timerID
        
        tick() =>