React

[at7211]

import React,{Component} from 'react';
import './App.css';

class Item extends Component {
    myClick = () => {
        this.setState
    }

    render
}

class App extends Component {
    constructor(){
        super()
        this.state = {
            count:1
        }
    }
    this.handelClick = this.handleClick.bind(this) // this => App component
}

//ES6語法可以讓他就固定這個this => App component
handelClick = () => {
    //setState才能改變count的值
    this.setState({
        //當你的state改變 他就會重新call render
        count: this.state.count + 1
    })
}

render(){
    console.log('render!')
    return (
        <div className="App">
            <p>
                Hello!!!, {this.props.name}
            </p>
            <ul>
                {this.state.list.map(item => <li key={item}>{item})</li>}
                //上下這兩個式子是等價得// 
                {<li>1</li>,
                <li>2</li>,
                <li>3</li>}
            </ul>
            <h2>{this.state.count</h2>
            <button onCLick={this.handleClick}>+1</button>

        </div>
    );
}
}

export default APP

---

React最重要的觀念 你的state會永遠對應到你的UI。你每次的任何改變（改變你的資料-state），畫面會跟著變

---

// 只要改data就好，不用操作dom tree  
var list =[]
function addTodo(todo) {
    list.push(todo)
    render()
}

function removeTodo(id) {
    list = list.filter(item => item.id !== id)
    render()
}

function render(){
    $('.todo-list').empty()
    $('.todo-list').append(list.map(item => `<li>$(todo.content</li>)`))
}

    handleClick = () => {
        this.setState({
            list: [...this.state.list, Math.random()]
            //[...this.state.list, Math.random()] === this.state.list => false
        })
    }

[at7211]

小寫開頭 => DOM tags 大寫開頭 => component（元件）

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. 
For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

[at7211]

React重要官方範例-Extracting Components

function formatDate(date) {
  return date.toLocaleDateString();
}

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

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>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);