Please enable JavaScript.

Coggle requires JavaScript to display documents.

React (JSX (javascript extended, write JSX to describe what your UI should…

- - - - We call ReactDOM.render() with the <Welcome name="Sara" /> element.
      - React calls the Welcome component with {name: 'Sara'} as the props.
      - Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
      - React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.
- - - - this.state = {name: 'rajat'}
    - - this feature is only available to classes
      - allow components to update themselves
      - State is similar to props, but it is private and fully controlled by the component.
      - How to change a functional component to a class one
        
        Add a single empty method to it called render().
        
        Move the body of the function into the render() method.
        
        Replace props with this.props in the render() body.
        
        Delete the remaining empty function declaration.
      - }
        
        setState()
        
        don't try to modify state directly
        
        incorrect:
        this.state.comment = 'Hello';
        
        correct:
        this.setState({comment: 'Hello'});
        
        The only place where you can assign this.state is the constructor
        
        Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state
        
        Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state
        
        this may fail to update to the correct state:
        this.setState({
        counter: this.state.counter + this.props.increment,
        });
        
        To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
        this.setState((state, props) => ({
        counter: state.counter + props.increment
        }));
        
        When you call setState(), React merges the object you provide into the current state.
        
        The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments
      - changing props to state in a class
        
        For example, date.
        
        Replace this.props.date with this.state.date in the render() method:
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        
        Add a class constructor that assigns the initial this.state and passes props to the bass constructor:
        
        constructor(props) {
        super(props);
        this.state = {date: new Date()};
        }
        
        Remove the date prop from the <Clock /> element:
        
        ReactDOM.render(<Clock />,
        document.getElementById('root')
        );
      - state is not accessible to any component other than the one that owns and sets it
        
        A component may choose to pass its state down as props to its child component. If you imagine a component tree as a waterfall of props, each component’s state is like an additional water source that joins it at an arbitrary point but also flows down.
        
        This is commonly called a “top-down” or “unidirectional” data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree
  - - - function Welcome(props) {return <h1>Hello, {props.name}</h1>;}