เครื่องมือที่จำเป็น



3SA03 – React???????????????????Chocolatey (for Windows), Brew (for OSX)Node.jsYarnGitcreate-react-app CLIVisual Studio Code???????????????????? Chocolatey ????????????? ????????????? Node.js, Yarn ??? Git ??????? Chocolatey ???? Command Prompt (???????????????? Administrator)>> choco install nodejs>> choco install yarn>> choco install git???????????? create-react-app CLI ???????????????????????? yarn ???? Command Prompt (???????????????? Administrator)>> yarn global add create-react-app** ?????????????????????????????????? ???????????????????????????????????????????????????Checkpoint????????????? ???????????????? Repository ?????? ???? Account ???????? ??????????? commit ??? push ??????????????????????????????????????? ??. ?????????????????????? TA ????????????? Github ??????? CheckpointHello world??????????????????????? card-game ????????????????????????? ???????????????>> create-react-app card-game>> cd cd-app>> yarn start???????????? App.js ???????????????????????? ?????????? ????????????????? App.jsimport React, { Component } from 'react';import './App.css';class App extends Component { render() { return ( <div className="App"> Hello World </div> ); }}export default App;JSXJSX ?????????????????? HTML ??????????? JSX ??????????????????????????????????????? JavaScript ??? ???????????????????????????????JavaScript Expressions ???? <div>{2 +3}</div> ???????????????? <div>5</div>??????????????? JavaScript ??????????????? JavaScript Expressions???????????????????? CSS class ??? element ??????????? className ??? class (????????? class ????????????? JavaScript)???????????? ??????? Hello World ?????? App.js ???? Hello {“World”}Components & Props??????????????????? React ?????????????????????????????????????????????? ??????????????????????????????? Tree ????????????????? DOM ???????? React ???????????? Virtual DOM ??????? Synchronized ????? HTML DOM ??? Brower????????? CharacterCard.js ???????????????????? CharacterCardexport default class CharacterCard extends Component { render(){ return ( <div>{this.props.value}</div> ) }}????????? App.jsimport CharacterCard from './CharacterCard';class App extends Component {29648157175500 render() { return ( <div> <CharacterCard value="h"/> <CharacterCard value="i"/> </div> ); }}??????????????? ????? import ?????????? CharacterCard ???????????? CharacterCard.js ?????????????????????????????????? App ??????????????? props ???? value ????????????? App ??????????????? CharacterCard????????????????????????????????????????????????? ?????????????????? ???????????????????????????? JavaScript ?????? JSX ??? ???????????? App.js ??????const word = "Hello";class App extends Component { render() { return ( <div> { Array.from(word).map((c, i) => <CharacterCard value={c} key={i}/>) } </div> ); }}* ?????? Props ??????? Key ??????????????????????????? React ???????????????????????????????Styling????? CSS Class ???? card ?????? App.css ???????? className ?????? div ????????????? CharacterCard241744516510000.card { display: inline-block; text-align: center; width: 3em; font-size: 2em; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); margin: 1em; user-select: none;}More3731895254000?????????????? Tree ????????????????????????? ????????????????????????????????????????????? WordCard.jsexport default class WordCard extends Component {render() { return ( <div>{ Array.from(this.props.value).map((c, i) => <CharacterCard value={c} key={i}/>) } </div> ); }}??????????????? App.js ???????? render ?????????? WordCard ???????? render ?????????? CharacterCard ??????render() { return ( <div> <WordCard value="hello"/> </div> );}Components & StatesProps ??????????????????????????????????? (???????????? DOM) ?????????????????? (?????????????? DOM) ???????????????????????? ???????????????????????????????????????? ????????????????????????????????????????????????????? ??????????????????????????????????????????????? State ???????????? State ????????? (???????????? setState ????????) ????????? (UI) ?????????????????????????????????????????????????? CharacterCard ??????????????????? ??????????????????????????????????????? className ???????????? ?????????????????????????????????????????????????export default class CharacterCard extends Component { constructor(props){ super(props) this.state = { active: false, } } activate = () => { if(!this.state.active){ this.setState({active: true, seq}) } } render(){ let className = `card ${this.state.active ? 'activeCard': ''}` return ( <div className={className} onClick={this.activate}> {this.props.value} </div> ) }right3810000}???????????? App.css ?????????????? activeCard.activeCard { color: red; background: pink;}Handler as Props??? WordCard ?????????????????????????? CharacterCard ??? Activated ???????????????????????????????????????????????? ?????? WordCard ??? Handler (function ?????????????????????) ?????? props ?????? CharacterCard????????? WordCard.js ??????????? ?????????????????? class WordCard ????????????? handler ?????? propsactivationHandler = c => { console.log(`${c} has been activated.`) }...<CharacterCard value={c} key={i} attempt={this.state.attempt} activationHandler={this.activationHandler}/>????????? CharacterCard.js ??????????? activationHandleractivate = () => { if(!this.state.active){ this.props.activationHandler(this.props.value) this.setState({active: true}) }}Game Logic???????????? WordCard.js ???????????????????????????????????????????????? ?????????????????????????????????????? ???????????????????? ????????????? ????????????????????????? ???????????????????????? ?????????????????? ???????????????????????import _ from 'lodash';const prepareStateFromWord = (given_word) => { let word = given_word.toUpperCase() let chars = _.shuffle(Array.from(word)) return { word, chars, attempt: 1, guess: [], completed: false }}????????word ????????????????????????chars ????????????????????????????????attempt ???????????????????????guess ??????????????????????????completed ?????????????????????????activationHandler = (c) => { let guess = [...this.state.guess, c] this.setState({guess}) if(guess.length == this.state.chars.length){ if(guess.join('').toString() == this.state.word){ this.setState({guess: [], completed: true}) }else{ this.setState({guess: [], attempt: this.state.attempt + 1}) } } }???????????????? attempt ????? CharacterCard (??? ??. ?????????????????) ??? CharacterCard ?????????????? activated ???? false ????????????? attempt ????????????????????????? CharacterCard.jscomponentDidUpdate(prevProps){ if(prevProps.attempt != this.props.attempt){ this.setState({active: false}) }}?????????????????? ??. ??????????? Logic ????????. ??????? ????????? push ????? Github ?????????????? commit ??? push ?????????????????? 10 commit ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download