Write in front

I recently learned React because I wanted to CVAT project. I can't understand the project code.

The boss said he wanted to learn React. I was not convinced, so I read TypeScript and looked at the project code, but I still couldn't understand it.

So I began to learn React and found that many places I couldn't understand began to understand Took a lot of detours

1. Function component and class component

"Function component"

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

It is equivalent to being defined by the class of ES6

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

2. Render component

The React element can also be a user-defined component

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

When the React element is a user-defined component, it will convert the attributes and children received by JSX into a single object and pass it to the component, which is called "props".

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. We call reactdom Render() function and pass in < welcome name = "Sara" / > as a parameter.
2. React calls the Welcome component and passes in {name: 'Sara'} as props.
3. The Welcome component takes the < H1 > Hello, Sara < / H1 > element as the return value.
4. React DOM efficiently updates the DOM to < H1 > Hello, Sara < / H1 >.

Note: the component name must begin with an uppercase letter.

React treats components that begin with lowercase letters as native DOM tags. For example, < div / > represents the div tag of HTML, while < Welcome / > represents a component, and you need to use @ Welcome within the scope.

3. Combined components

A component can reference other components in its output. This allows us to abstract any level of detail with the same component.

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

4. Extract component

Split components into smaller components.

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

First extraction

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Extract the second time

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

At first, extracting components may be a heavy task, but in large applications, building reusable component libraries is completely worth it.

5. Read only of Props

function sum(a, b) {
  return a + b;
}

Such a function is called "Pure function" , because the function does not attempt to change the input parameter, and the same input parameter always returns the same result under multiple calls.

The following function is not a pure function because it changes its input parameters:

function withdraw(account, amount) {
  account.total -= amount;
}

React is very flexible, but it also has a strict rule:

All React components must protect their props from being changed like pure functions.

Reference link:

https://react.docschina.org/docs/components-and-props.html