Chuyển đến nội dung chính

Bài đăng

Hiển thị các bài đăng có nhãn game

Bài 15: ReactJs- Viết game caro bằng React (P2)

Tiếp tục với bài trước  Bài 14: ReactJs- Viết game caro bằng React  hôm nay chúng ta sẽ tiếp tục hoàn thiện game. Đối với component Square sau khi đã bỏ đi constructor, chúng ta có thể đơn giản hóa nó đi thành một function thay vì class như sau: function Square ( props ) { return ( < button className = " square " onClick = { props . onClick } > { props . value } </ button > ) ; } Nếu như 1 component chỉ return về 1 element mà không thực thi function gì chúng ta nên viết theo dạng function, ví dụ như thằng Square trên. Taking Turns Hiện tại game chúng ta chỉ có thằng X được chơi nên chúng ta sẽ thay đổi 1 tí để thêm nước O. Trong Board constructor ta thêm 1 state nữa: class Board extends React . Component { constructor ( props ) { super ( props ) ; this . state = { squares : Array ( 9 ) . fill ( null ) , xIsNext : true , } ; } Mỗi một nước đi ta sẽ thay đổi xIsNext và thay đổi ...

Bài 14: ReactJs- Viết game caro bằng React

Hôm nay, chúng ta sẽ cùng nhau xây dựng game cờ caro dựa trên những kiến thức đã học ở bài trước nha. Các bạn có thể check kết quả tại đây: Final Result . Bạn hãy thử chơi game để biết chúng ta sẽ xây dựng game như thế nào. Để có thể hiểu được bài này, các bạn nên xem qua các bài trước của mình và đã setup môi trường như bài 1 này:  Bài 1: ReactJs - Environment Setup . Nếu như mọi thứ đã ok hết rồi thì ta bắt đầu nào. Starter Code: Trong file index.css ta thêm các style sau: body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; padding: 0; text-align: center; width: 34px; } .square:focus { outline: no...