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.html

• 대신에 브라우저 버전의 Babel을 사용하세요.

• Babel has a built-in JSX transpiler.

• https://babeljs.io/docs/usage/browser/

• npm install babel-core

• <script src=“JSXTransformer.js”> 대신<script src=“browser.js”>을 쓰세요.

• type=“text/jsx"대신 type=“text/babel”을 쓰세요.

Hello

Composition

Prop Validation

Default Prop

Mixins

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

findDOMNode와 refs

ES6 class

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

React.Component + Auto Binding

ES6 + Manual bind

ES7

=>

Animation

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

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-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

• https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

• 프로파일러 - http://reactkr.github.io/react/docs/perf-ko-KR.html

개발도구 Demo

• http://facebook.github.io/react/

왜 Virtual DOM인가요?

• 비교조정에 대한 글: https://facebook.github.io/react/docs/reconciliation-ko-KR.html

• 개발자가 기고한 글: http://calendar.perfplanet.com/2013/diff/

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.github.io/flux/docs/overview.html#content

• 페이스북 그룹 React Korea와 Reactist