React

React is a front end UI library. It has nothing to do with backend.

The most important concept in React is "Component", which is similar to "Widget" in Flutter. It is the basic unit of UI element.

There are two style to write a component, one is functional and the other is class. I personally find class-based syntax is more intuitive.

The Basics

This video is great.

Rendering JSX

The following three code snippets are equivalent:

import React from "react";

const FunctionalComponent = () => {
 return <h1>Hello, world</h1>;
};

import React from "react";

function FunctionalComponent() {
 return <h1>Hello, world</h1>;
}

import React from "react";

class ClassComponent extends React.Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

Passing props

An react element can look like this:

const element = <div />;

but it can also look like this: where name is like field and Sara is like arguments to pass into functions. We call {Sara} props (think as a dictionary of arguments).

const element = <Welcome name="Sara" />;

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

The following codes are equivalent:

const FunctionalComponent = ({ name }) => {
 return <h1>Hello, {name}</h1>;
};

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
 }
}

Handling state

The following two snippets are equivalent:

const FunctionalComponent = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
}

On Mounting (componentDidMount)

The following two snippets are equivalent:

const FunctionalComponent = () => {
 React.useEffect(() => {
   console.log("Hello");
 }, []);
 return <h1>Hello, World</h1>;
};

class ClassComponent extends React.Component {
 componentDidMount() {
   console.log("Hello");
 }

 render() {
   return <h1>Hello, World</h1>;
 }
}

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument.

render() {
  return (
    <div
      style={{ width: '400px', height: '400px' }}
      ref={(mount) => { this.mount = mount }}
    />
  )
}

this.mount will hold a reference to the actual <div> the component is mounted to.

On Unmounting (componentWillUnmount)

The following two snippets are equivalent:

const FunctionalComponent = () => {
 React.useEffect(() => {
   return () => {
     console.log("Bye");
   };
 }, []);
 return <h1>Bye, World</h1>;
};

class ClassComponent extends React.Component {
 componentWillUnmount() {
   console.log("Bye");
 }

 render() {
   return <h1>Bye, World</h1>;
 }
}