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

1. React +
https://dalinaum.github.io

2. https://facebook.github.io/react/docs/why-react.html

3. https://twitter.com/sebmarkbage/status/632257978003951616

4. React

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. • npm install babel-core
• <script src=“JSXTransformer.js”> 대신
<script src=“browser.js”>을 쓰세요.
• type=“text/jsx"대신 type=“text/babel”을 쓰세요.

7. Hello

9. Composition

10. Prop Validation

12. Default Prop

13. Mixins

14. 폼
• 폼 컴포넌트는 사용자 상호작용을 통해 영향을 받는 몇 가지 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 변경.

16. findDOMNode와 refs

17. ES6 class
오토 바인딩과 믹스인이 안되는 단점은 있음.

19. React.Component + Auto Binding

20. ES6 + Manual bind

21. ES7

22. =>

23. Animation

24. 생명주기
• 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()

25. Without Router
https://rackt.github.io/react-router/

27. With React Router
https://rackt.github.io/react-router/

29. 개발도구
• 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

30. 개발도구 Demo
• http://facebook.github.io/react/

31. 왜 Virtual DOM인가요?
• 비교조정에 대한 글: https://facebook.github.io/react/
docs/reconciliation-ko-KR.html
• 개발자가 기고한 글: http://calendar.perfplanet.com/
2013/diff/

32. Unidirectional
blahblah… Flux?

33. 우린 Redux로 갑니다.
Flux + Elm + 향상된 DX
http://staltz.com/
unidirectional-user-interface-
architectures.html

34. Redux demo
• http://rackt.github.io/redux/docs/introduction/
Examples.html#counter
• reducers와 actions을 살펴봄. (훨씬 심플하죠?)

35. Hot module replacement
demo
• https://robots.thoughtbot.com/setting-up-webpack-
for-react-and-hot-module-replacement

36. React route demo
• http://jmfurlott.com/tutorial-setting-up-a-single-
page-react-web-app-with-react-router-and-
webpack/

37. React isomorphic demo
• http://jmfurlott.com/tutorial-setting-up-a-simple-
isomorphic-react-app/

38. Electron
• Electron demo

39. React Native demo
• https://facebook.github.io/react-native/

40. Relay와 GraphQL?
• https://github.com/relayjs/relay-starter-kit

41. react.careers

42. react.rocks

43. 참고
• 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