티스토리 뷰
react tutorial
react scoreboard by CDN
리액트는 UI 라이브러리로 Angular와 같이 프로젝트 전체를 모듈 방식으로 개발할수도 있지만 특정 페이지 내에 리액트를 끼워넣어서도 개발 가능합니다. 예를 들어, 기존에 asp, jsp, php 를 기반으로 개발하였다면 대부분 jquery와 같이 사용하였을텐데, jquery 대신 리액트를 사용할 수도 있고 jquery 같이 리액트를 사용할수도 있습니다. 이 튜토리얼은 기존 페이지 방식으로 Scoreboard라는 앱을 만들면서 react의 React Element, JSX, props, state 등의 기본 개념과 es5, es6 의 자바스크립트 기초를 배우는 단계입니다.
React is a UI library that allows you to develop the entire project modularly, such as Angular, but you can also develop it by embedding React within a specific page. For example, if you were developing based on asp, jsp, or php, you could use jquery instead of jquery, or you could use a regex like jquery. This tutorial will teach you the basics of React Element, JSX, props, state, and basics of JavaScript in es5 and es6 by creating an app called Scoreboard in the way of existing pages.
usage
- nodejs
- react.js
- react-dom.js
- babel.js
필수 설치 모듈
$ npm i -g http-server
$ http-server .1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scoreboard</title> <link rel="stylesheet" href="./app.css" /> </head> <body> <div id='root'></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel" src="./app.js"></script> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | const Header = (props) => { return( <header> <h1>Scoreboard</h1> <sapn className='stats'>Player: {props.totalPlayers}</sapn> </header> ); } class Counter extends React.Component { state = { score: 0 }; incrementScore = () => { this.setState( prevState => ({score: prevState.score + 1}) ); } decrementScore = () => { this.setState( prevState => ({score: prevState.score - 1}) ); } render() { return ( <div className="counter"> <button className="counter-action decrement" onClick={this.decrementScore}> - </button> <span className="counter-score">{this.state.score}</span> <button className="counter-action increment" onClick={this.incrementScore}> + </button> </div> ); } } const Player = (props) => { console.log(props); return ( <div className="player"> <span className="player-name"> {/* <button className="remove-player" onClick={() => props.removePlayer(props.id)}>x</button> */} <button className="remove-player" onClick={() => props.removePlayer(props.id)}>x</button> </span> <span className="player-name"> {props.name} </span> <Counter /> </div> ); } class App extends React.Component { state = { players: [ {name: 'LDK', id: 1}, {name: 'HONG', id: 2}, {name: 'KIM', id: 3}, {name: 'PARK', id: 4}, ] }; handleRemovePlayer = (id) => { this.setState(prevState => { return { players: prevState.players.filter(item => item.id !== id) } }) } render() { return ( <div className="scoreboard"> <Header title="My scoreboard" totalPlayers={this.state.players.length} /> {/*Players List*/} { this.state.players.map( item => <Player name={item.name} key={item.id.toString()} removePlayer={this.handleRemovePlayer} id={item.id} />) } </div> ); } } ReactDOM.render(<App />, document.getElementById('root')); | cs |
결과
'■ 프론트엔드 ■ > React' 카테고리의 다른 글
| ESLint, Prettier, ESLint-plugin, ESLint-config, jsconfig.json (0) | 2020.06.15 |
|---|---|
| react hooks : usecallback and usememo (0) | 2020.06.15 |
| create react app => yarn build path 설정 (0) | 2020.06.09 |
| React Hook useReducer (0) | 2020.06.03 |
| React Hook's useState (0) | 2020.06.03 |