Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React +
https://dalinaum.github.io
https://facebook.github.io/react/docs/why-react.html
https://twitter.com/sebmarkbage/status/632257978003951616
React
JSXTransformer에서 Babel로
• JSXTransformer는 폐기됩니다.
• https://facebook.github.io/react/blog/2015/07/03/
react-v0.14-beta-1.ht...
• npm install babel-core
• <script src=“JSXTransformer.js”> 대신

<script src=“browser.js”>을 쓰세요.
• type=“text/jsx"대신 type=“...
Hello
Composition
Prop Validation
Default Prop
Mixins
폼
• 폼 컴포넌트는 사용자 상호작용을 통해 영향을 받는 몇 가지 props를 지원합니다.
• value: <input>, <textarea> 컴포넌트에서 사용가능.
• checked: checkbox, radio타입의...
findDOMNode와 refs
ES6 class
오토 바인딩과 믹스인이 안되는 단점은 있음.
React.Component + Auto Binding
ES6 + Manual bind
ES7
=>
Animation
생명주기
• Mounting
• getInitialState()
• componentWillMount()
• componentDidMount()
• Updating
• componentWillReceiveProps(ob...
Without Router
https://rackt.github.io/react-router/
With React Router
https://rackt.github.io/react-router/
개발도구
• React Devtools
• https://github.com/facebook/react-devtools
• https://chrome.google.com/webstore/detail/react-
deve...
개발도구 Demo
• http://facebook.github.io/react/
왜 Virtual DOM인가요?
• 비교조정에 대한 글: https://facebook.github.io/react/
docs/reconciliation-ko-KR.html
• 개발자가 기고한 글: http://cale...
Unidirectional
blahblah… Flux?
우린 Redux로 갑니다.
Flux + Elm + 향상된 DX
http://staltz.com/
unidirectional-user-interface-
architectures.html
Redux demo
• http://rackt.github.io/redux/docs/introduction/
Examples.html#counter
• reducers와 actions을 살펴봄. (훨씬 심플하죠?)
Hot module replacement
demo
• https://robots.thoughtbot.com/setting-up-webpack-
for-react-and-hot-module-replacement
React route demo
• http://jmfurlott.com/tutorial-setting-up-a-single-
page-react-web-app-with-react-router-and-
webpack/
React isomorphic demo
• http://jmfurlott.com/tutorial-setting-up-a-simple-
isomorphic-react-app/
Electron
• Electron demo
React Native demo
• https://facebook.github.io/react-native/
Relay와 GraphQL?
• https://github.com/relayjs/relay-starter-kit
react.careers
react.rocks
참고
• React 한글 버전 문서:

http://reactkr.github.io/react/docs/getting-started-
ko-KR.html
• Flux 한글 버전 문서:

http://haruair.git...
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기
Upcoming SlideShare
Loading in …5
×

52

Share

Download to read offline

발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기

Download to read offline

이번달 발렌타인 웹비너 발표자는 안드로이드 개발자 커뮤니티 리더이신 김용욱님 입니다.

다루게 될 내용들
React
Hot Module Loader
Webpack
Flux
React Native

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

발렌타인 웨비너 7회 - React를 이용한 웹 앱 개발 살펴보기

  1. 1. React + https://dalinaum.github.io
  2. 2. https://facebook.github.io/react/docs/why-react.html
  3. 3. https://twitter.com/sebmarkbage/status/632257978003951616
  4. 4. React
  5. 5. JSXTransformer에서 Babel로 • JSXTransformer는 폐기됩니다. • https://facebook.github.io/react/blog/2015/07/03/ react-v0.14-beta-1.html • 대신에 브라우저 버전의 Babel을 사용하세요. • Babel has a built-in JSX transpiler. • https://babeljs.io/docs/usage/browser/
  6. 6. • npm install babel-core • <script src=“JSXTransformer.js”> 대신
 <script src=“browser.js”>을 쓰세요. • type=“text/jsx"대신 type=“text/babel”을 쓰세요.
  7. 7. Hello
  8. 8. Composition
  9. 9. Prop Validation
  10. 10. Default Prop
  11. 11. Mixins
  12. 12. 폼 • 폼 컴포넌트는 사용자 상호작용을 통해 영향을 받는 몇 가지 props를 지원합니다. • value: <input>, <textarea> 컴포넌트에서 사용가능. • checked: checkbox, radio타입의 <input> 컴포넌트에서 사용가능. • selected: <option> 컴포넌트에서 사용가능. • HTML에서는 <textarea> 태그의 값을 설정할 때 <textarea> 태그의 자식이 사용되지만, React에서는 value 를 사용해야 합니다. • 폼 컴포넌트는 onChange prop의 콜백을 설정하여 변경을 감시(listening)할 수 있습니다. onChange prop는 브라우저에 관계없이 다음과 같은 사용자 상호작용에 반응합니다. • <input>, <textarea>의 value 변경. • <input>의 checked state 변경. • <option>의 selected state 변경.
  13. 13. findDOMNode와 refs
  14. 14. ES6 class 오토 바인딩과 믹스인이 안되는 단점은 있음.
  15. 15. React.Component + Auto Binding
  16. 16. ES6 + Manual bind
  17. 17. ES7
  18. 18. =>
  19. 19. Animation
  20. 20. 생명주기 • Mounting • getInitialState() • componentWillMount() • componentDidMount() • Updating • componentWillReceiveProps(object nextProps) • shouldComponentUpdate(object nextProps, object nextState) • componentWillUpdate(object nextProps, object nextState) • componentDidUpdate(object prevProps, object prevState) • Unmounting • componentWillUnmount()
  21. 21. Without Router https://rackt.github.io/react-router/
  22. 22. With React Router https://rackt.github.io/react-router/
  23. 23. 개발도구 • React Devtools • https://github.com/facebook/react-devtools • https://chrome.google.com/webstore/detail/react- developer-tools/fmkadmapgofadopljbjfkapdkoienihi • https://addons.mozilla.org/en-US/firefox/addon/react- devtools/ • 프로파일러 - http://reactkr.github.io/react/docs/perf-ko- KR.html
  24. 24. 개발도구 Demo • http://facebook.github.io/react/
  25. 25. 왜 Virtual DOM인가요? • 비교조정에 대한 글: https://facebook.github.io/react/ docs/reconciliation-ko-KR.html • 개발자가 기고한 글: http://calendar.perfplanet.com/ 2013/diff/
  26. 26. Unidirectional blahblah… Flux?
  27. 27. 우린 Redux로 갑니다. Flux + Elm + 향상된 DX http://staltz.com/ unidirectional-user-interface- architectures.html
  28. 28. Redux demo • http://rackt.github.io/redux/docs/introduction/ Examples.html#counter • reducers와 actions을 살펴봄. (훨씬 심플하죠?)
  29. 29. Hot module replacement demo • https://robots.thoughtbot.com/setting-up-webpack- for-react-and-hot-module-replacement
  30. 30. React route demo • http://jmfurlott.com/tutorial-setting-up-a-single- page-react-web-app-with-react-router-and- webpack/
  31. 31. React isomorphic demo • http://jmfurlott.com/tutorial-setting-up-a-simple- isomorphic-react-app/
  32. 32. Electron • Electron demo
  33. 33. React Native demo • https://facebook.github.io/react-native/
  34. 34. Relay와 GraphQL? • https://github.com/relayjs/relay-starter-kit
  35. 35. react.careers
  36. 36. react.rocks
  37. 37. 참고 • React 한글 버전 문서:
 http://reactkr.github.io/react/docs/getting-started- ko-KR.html • Flux 한글 버전 문서:
 http://haruair.github.io/flux/docs/ overview.html#content • 페이스북 그룹 React Korea와 Reactist
  • haibane84

    Jun. 30, 2017
  • YuriYooHyunChoe

    Feb. 5, 2017
  • ssuser08b42d

    Jan. 12, 2017
  • aveque

    Jan. 2, 2017
  • kitaere

    May. 9, 2016
  • KeityLee1

    Apr. 25, 2016
  • choeunwoo

    Apr. 13, 2016
  • aoruqjfu

    Mar. 17, 2016
  • ssuser491ec1

    Dec. 8, 2015
  • joobn

    Nov. 23, 2015
  • changsoonbok

    Nov. 18, 2015
  • G6lingp

    Oct. 11, 2015
  • ssuser22448f

    Oct. 5, 2015
  • jaedongkim73

    Sep. 15, 2015
  • gyubinson

    Sep. 12, 2015
  • ssuser70d1d7

    Sep. 10, 2015
  • darthJun

    Sep. 7, 2015
  • underbellpark

    Sep. 7, 2015
  • euari

    Sep. 7, 2015
  • javachampion

    Sep. 7, 2015

이번달 발렌타인 웹비너 발표자는 안드로이드 개발자 커뮤니티 리더이신 김용욱님 입니다. 다루게 될 내용들 React Hot Module Loader Webpack Flux React Native

Views

Total views

4,204

On Slideshare

0

From embeds

0

Number of embeds

1,388

Actions

Downloads

28

Shares

0

Comments

0

Likes

52

×