Simple code

Class Component - Containers, Smart, Stateful

no state, no life cycle, commonly referred to as stateless components.

import React, { Component } from "react";
import Person from "./Person/Person";

class App extends Component {
    state = {
        person: [
            {name: "Harry", age: 24}
        ]
    };
    
    switchNameHandler = (newName) => {
        this.setState({
            person: [
                {name: newName, age: 24}
            ]
        });
    };
    
    nameChangedHandler = (event) => {
        this.setState({
            person: [
                {name: event.target.value, age: 24}
            ]
        });
    };
    
    render() {
        return (
            <div className="App"> 
                // first way to pass arugments to event handlers
                <button onClick={() => this.switchNameHandler("Harry Lu")}>Switch Name</button>
                <Person 
                    name={this.state.person[0].name}
                    age={this.state.person[0].age}
                    // second way to pass augments to event handlers
                    click={this.switchNameHandler.bind(this, "Harry!!!")}
                    changed={this.nameChangedHandler}
                > My Hobbies: Sing, Dance, Rap, Basketball
                </Person>
            </div>
        );
    }
} 

export default App;

Functional Component - Presentational, Dumb, Stateless

import React from "react";

const person = (props) => {
    return (
        <div>
            <p> onClick={props.click} I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p> // anything between the parent's opening and closing tag
            <input type="text" onChange={props.changed} value={props.name} /> // two way data binding 
        </div>
    );
};

export default person;

Three way to handle events

• Bind this in the constructor

constructor(props) {
    super(props);
    this.state = {};
    this.handleClick = this.handleClick.bind(this);
}

• Using arrow functions

handleClick = () => {
    console.log("this is:", this);
}

• Using arrow functions in the callback - Since callback is created each time the button renders. If this callback is passed as a prop to lower components, those components might do an extra re-rendering, which will cause performance problems.

render() {
    return (
        <button onClick={(e) => this.handleClick(e)}> Click me </button>
    );
}

ErrorBoundary

// must wrap the code you want to test using high order components 
import React, { Component } from 'react';

class ErrorBoundary extends Component {
  state = {
    hasError: false,
    errorMessage: ''
  }
  
  static getDerivedStateFromError(error) {
    // update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch = (error, info) => {
    // you can also log the error to an error reporting service
    // logErrorToMyService(error, info);
    this.setState({ hasError: true, errorMessage: error });
  }

  render() {
    if (this.state.hasError) {
      // you can render any custom fallback UI
      return <h1>{this.state.errorMessage}</h1>;
    } 
    return this.props.children;
  }
}

export default ErrorBoundary;

Three ways using Higher Order Component

// This one just do wrap other component
const aux = props => props.children; 

export default aux;

// This one just add styling to the children component
import React from 'react';

// const withClass = props => (
//   <div className={props.classes}>
//     {props.children}
//   </div>
// );

const withClass = (WrappedComponent, className) => {
  return props => (
    <div className={className}>
        // getting the props from the child compoent
        <WrappedComponent {...props}/> 
    </div>
  );
}

export default withClass;

// This is the built-in way that works same as the first one
import React, {Fragment} from 'react';

<Fragment>
    // some content
</Fragment>

Better way to use setState() callback

What is the purpose of the callback function as an argument of setState()?

setState may be called in async function

So you cannot rely on this. If the above call was made inside a async function this will refer to state of component at that point of time but we expected this to refer to property inside state at time setState calling or beginning of async task. Ensuring reliability that nextState would not be corrupted.

// the better way to update the state when you are depending on old state
// Since setState updates the state asynchronously
this.setState((state, props) => {
    return {
        counter: state.counter + props.increment
    };
});

Render Lists Conditionally

import React, { Component } from 'react';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [
      { id: 'a1', name: 'Harry', age: 24 },
      { id: 'a2', name: 'Sherry', age: 21 },
      { id: 'a3', name: 'Steven', age: 26 }
    ],
    otherState: 'some other value',
    showPersons: false
  }

  nameChangedHandler = (event, id) => {
    const personIndex = this.state.persons.findIndex(p => {
      return p.id === id;
    })

    const person = {
      ...this.state.persons[personIndex]
    };

    // const person = Object.assign({}, this.state.persons[personIndex]);

    person.name = event.target.value;

    const persons = [...this.state.persons];
    persons[personIndex] = person;

    this.setState({ persons: persons });
  }

  deletePersonHandler = (personIndex) => {
    // const persons = this.state.persons.slice();
    // Updating State Immutably
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1);
    this.setState({ persons: persons });
  }

  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;
    this.setState({ showPersons : !doesShow});
  }

  render() {
    let persons = null;

    if (this.state.showPersons) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return <Person 
              click={() => this.deletePersonHandler(index)}
              name={person.name} 
              age={person.age}
              key={person.id}
              changed={(event) => this.nameChangedHandler(event, person.id)} />
          })}
        </div>
      )
    }
    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        <button 
          onClick={this.togglePersonsHandler}>Switch Name</button>
        {persons}
      </div>
    );
  }
}

export default App;

Controlled Component

In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".

class Form extends React.Component {
    state = { value: "" };
    handleChange = (event) => {
        this.setState({ value: event.target.value });
    };
    handleSubmit = (event) => {
        event.preventDefault();
        console.log(this.state.value);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label> Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

Uncontrolled Component

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.input = React.createRef();
    }
    
    handleSubmit(event) {
        event.preventDefault();
        console.log(this.input.current.value);
    }
    
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label> Name:
                    <input type="text" ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            <
        );
    }
}

React Lazy & Suspense

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

const MyComponent = React.lazy(() => import("./myComponent"));

function Component() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <MyComponent />
            </Suspense>
        </div>
    );
}

Context & Ref & Fragment & PropTypes

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classes from './Person.css';

class Person extends Component {
  constructor(props) {
    super(props);
    this.inputElementRef = React.createRef();
  }
  
  // creates a Context object. When React renders a component
  // that subscribes to this Context object it will read the 
  // current context value from the closest matching Provider
  // above it in the tree. 
  const AuthContext = React.createContext({
    authenticated: false,
    login: () => {}
  });

  static contextType = AuthContext;

  componentDidMount() {
    // this.inputElement.focus();
    this.inputElementRef.current.focus();
  }

  render() {
    return (
      <React.Fragment>
        // <AuthContext.Consumer>
        //  {context => 
        //    context.authenticated ? <p>Authenticated</p> : <p>Please log in</p>}
        // </AuthContext.Consumer>
        {this.context.authenticated ? (
          <p>Authenticated!</p>
        ) : (
          <p>Please log in</p>
        )}
        <p>{this.props.children}</p>
        <input
          // ref={(inputEl) => {this.inputElement = inputEl}}
          ref={this.inputElementRef}
          type="text"
          onChange={this.props.changed}
          value={this.props.name}
        />
      </React.Fragment>
    );
  }
}

Person.propTypes = {
  click: PropTypes.func,
  name: PropTypes.string,
  age: PropTypes.number,
  changed: PropTypes.func
};

export default Person;

// code in the parent file
<AuthContext.Provider
  value={{
    authenticated: this.state.authenticated,
    login: this.loginHandler
  }}
>
  <Person/>
</AuthContext.Provider>

forwardRef

// You can now get a ref directly to the DOM button
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

const FancyButton = React.forwardRef((props, ref) => (
    // ref.current now point to the <button> DOM node
    <button ref={ref} {...props}> 
        {props.children}
    </button>
));

Portals

render() {
    // React does not create a new div. It renders the children into domNode. 
    // domNode is any valid DOM node, regardless of its location in the DOM.
    return ReactDOM.createPortal(
        this.props.children,=
        domNode
    );
}

pass a parameter to an event handler or callback

import React from "react";
class App extends React.Component {
  call(message,event) {
    alert(message);
  }
  render() {
    return (
       //Creating a arrow function 
      <button onClick={(event)=> this.call("Your message",event)}>
         Click the button!
       </button>
    );
  }
}
export default App;