리액트[React] - ES6 + Babel 기본 설명
① ES6와 Webpack 등을 활용한 개발 방법이 주가 되고 있습니다.
② ES6의 클래스 모듈, 새로운 변수 선언, 키워드, Promise 등을 활용해서 복잡한 애플리케이션의
코드 표현력을 높일 수 있습니다.
③ React는 ES6 문법이 주가 되기 때문에 Babel 사용은 필수적이라고 볼 수 있습니다.
④ React와 궁합도 좋아서 간단하게 아래 예제를 작성했습니다. 참고하시면 도움이 될 것입니다.
리액트[React] - ES6 + Babel 설명 및 예제
전체 소스코드- 아래 예제는 입문, 초보자를 위한 CDN 방식으로 HTML 파일로 구성 된 간단한 예제입니다.- 실제 프로젝트에서는 아래와 같이 Webpack Build 없이 사용하면 문제가 될 가능성이 있습니다.- 실무에서는 Npm을 사용해서 빌드 후 사용하시길 권장합니다.
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>webpos-do</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <style> html, body { height: 100%; } body { display: flex; background: #333; font-family: "PT Sans"; color: #777; } div { width: 50%; } h1 { text-align: center; font-size: 8vh; color: #ccc; text-shadow: 0 0 3px #000; font-weight: bold; } </style> </head> <body> <div class="demoContainer"> </div> <script type="text/babel"> class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } incrementCount = () => { this.setState( { count: this.state.count + 1 } ); }; render() { return ( <h1 onClick={ this.incrementCount.bind(this) }> Clicks: { this.state.count }회 </h1> ); } } ReactDOM.render( <Counter/>, document.body ); </script> </body> </html> | cs |
react_es6_example.zip 다음 포스팅에서는 리액트(React) 속성(Props), 상태(State)에 다뤄보겠습니다.
'웹 프론트 > React' 카테고리의 다른 글
| 리액트[React] - 현재 시간 표시 및 실시간 시계(live-clock) 만들기 (4) | 2018.02.28 |
|---|---|
| 리액트[React] - 라우터(Router) 기초 설명 및 다운로드 (0) | 2017.10.17 |
| 리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드 (0) | 2017.10.15 |
리액트[React] - ES6 + Babel 기본 설명
① ES6와 Webpack 등을 활용한 개발 방법이 주가 되고 있습니다.
② ES6의 클래스 모듈, 새로운 변수 선언, 키워드, Promise 등을 활용해서 복잡한 애플리케이션의
코드 표현력을 높일 수 있습니다.
③ React는 ES6 문법이 주가 되기 때문에 Babel 사용은 필수적이라고 볼 수 있습니다.
④ React와 궁합도 좋아서 간단하게 아래 예제를 작성했습니다. 참고하시면 도움이 될 것입니다.
리액트[React] - ES6 + Babel 설명 및 예제
전체 소스코드- 아래 예제는 입문, 초보자를 위한 CDN 방식으로 HTML 파일로 구성 된 간단한 예제입니다.- 실제 프로젝트에서는 아래와 같이 Webpack Build 없이 사용하면 문제가 될 가능성이 있습니다.- 실무에서는 Npm을 사용해서 빌드 후 사용하시길 권장합니다.
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 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>webpos-do</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <style> html, body { height: 100%; } body { display: flex; background: #333; font-family: "PT Sans"; color: #777; } div { width: 50%; } h1 { text-align: center; font-size: 8vh; color: #ccc; text-shadow: 0 0 3px #000; font-weight: bold; } </style> </head> <body> <div class="demoContainer"> </div> <script type="text/babel"> class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } incrementCount = () => { this.setState( { count: this.state.count + 1 } ); }; render() { return ( <h1 onClick={ this.incrementCount.bind(this) }> Clicks: { this.state.count }회 </h1> ); } } ReactDOM.render( <Counter/>, document.body ); </script> </body> </html> | cs |
react_es6_example.zip 다음 포스팅에서는 리액트(React) 속성(Props), 상태(State)에 다뤄보겠습니다.
'웹 프론트 > React' 카테고리의 다른 글
| 리액트[React] - 현재 시간 표시 및 실시간 시계(live-clock) 만들기 (4) | 2018.02.28 |
|---|---|
| 리액트[React] - 라우터(Router) 기초 설명 및 다운로드 (0) | 2017.10.17 |
| 리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드 (0) | 2017.10.15 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}