{%hackmd C-_zW0vxSXSSsOkJHknc8g %} # React tutorial: <br> Tic-Tac-Toe [TOC] --- ## 簡介 - 這是來自於 [官方教學](https://reactjs.org/tutorial/tutorial.html#overview) 的小練習 - 主要是練習 React 中的一些基本概念 (~~複製貼上~~) --- ## 練習重點 - Passing Data Through Props - Event handler - Lifting State Up ---- ### Passing Data Through Props ```javascript= function Square(props) { return ( <button className="square"> {props.value} </button> ); } class Board extends React.Component { render() { return ( <Square value={3} /> ); } } ``` ---- ### Event handler ```javascript= class Square extends React.Component { constructor(props) { super(props); this.state = { value: null }; } render() { return ( <button onClick={() => this.setState({value: 'X'})} > {this.state.value} </button> ); } } ``` ---- ### Lifting State Up - 由父組件管理子組件狀態 ```mermaid graph TB bd(Board)-->sq1(Square1) bd(Board)-->sq2(Square2) bd(Board)-->sq3(Square3) bd(Board)-->sq4(Square4) bd(Board)-->sq5(Square5) bd(Board)-->sq6(Square6) bd(Board)-->sq7(Square7) bd(Board)-->sq8(Square8) bd(Board)-->sq9(Square9) ``` --- ## 成果~  <style> hr.in-view { height: 0; } img { border-radius: 5px; } div.slide-background-content { background-color: #181825; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { color: #ffe8d1; } </style>