---
# System prepended metadata

title: React
tags: [React, JSX]

---

---
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

```javascript
<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.

```javascript
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

```javascript
const MyComp = ({children}) => {

  userEffect(() => {
    
  })

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


### Class Component

```javascript
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`