# React
###### tags: `PID`

# setup
## CDN

<!-- 以下引入 react.js, react-dom.js（react 0.14 後將 react-dom 從 react 核心分離，更符合 react 跨平台抽象化的定位）以及 babel-core browser 版 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>

## 引入javascript檔案
### html

<script type="text/jsx" src="main.jsx"></script>

## first react
### html

<!-- 這邊的 id="example" 的 <div> 為 React Component 要插入的地方 -->
<div id="example"></div>

### js

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

# React and Component
## Component 元件化: 在使用React的過程中要把網頁視為元件組成, 元件名稱都要以大寫為字首
### html

<div id="app"></div>

### js

// 使用 arrow function 來設計 Functional Component 讓 UI 設計更單純（f(D) => UI），減少副作用（side effect）
const MyComponent = () => (
    <div>Hello, World!</div>
);

// 將 <MyComponent /> 元件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));

## 也可以用class的寫法
### html

<div id="app1"></div>

### js

//  注意元件開頭第一個字母都要大寫
class MyComponent1 extends React.Component {
    // render 是 Class based 元件唯一必須的方法（method）
    render() {
        return (
            <div>Hello, World!</div>
        );
    }
}

// 將 <MyComponent /> 元件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent1/>, document.getElementById('app1'));

## 加入CSS屬性
### html

<div id="app2"></div>

### js

const divStyle = {
    color: 'red',
    background: 'black'
}

ReactDOM.render(<div style={divStyle}>Hello World!</div>, document.getElementById('app2'));