---
title: "React"
path: "React"
---

{%hackmd @RintarouTW/About %}

# React <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/react.svg"></img>

Facebook developed for fast DOM rendering. (update the diff only)

https://zh-hant.reactjs.org/docs/getting-started.html

CDN

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

## JSX

Require build to convert JSX to pure JS.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

/* render and mount the element to the root element */
ReactDOM.render(
  element,
  document.getElementById('root')
);

const element = (
  <h1 className="greeting">
    Hello, World!
  </h1>
);

is converted to

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, World!'
);

## Web Component

React.Component
* this.props (readonly)
* this.state (immutable)
* this.setState() to update state
* component event handling
* componentDidMount()
* componentDidUpdate()
* componentWillUnmount()
* React.createContext()
* Function Component
* Hooks : useEffect(), ...
* Class Component
* stateful with **this**

### Function Component

const MyComp = ({children}) => {

  userEffect(() => {
    
  })

  return <button>[children]</button>
}

### Class Component

class MyComp extends React.Component
  constructor(props) {
    super(props)
  }

  componentDidMount() {    
    this.setState((state, props) => {
      return {counter: state.counter + props.step};
    });
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

# VDOM

[The Inner Workings Of Virtual DOM](https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf)

###### tags: `React` `JSX`