Downloaded 29 times
Uploaded byKeuller Magalhães
Building Reactive webapp with React/Flux
The document discusses building modern web applications with React and Flux. It begins with introductions and an agenda. It then covers React components, lifecycle methods, and Flux architecture including actions, dispatcher and stores. It discusses common mistakes, other view libraries like Vue and Riot, and takes questions.
Building Reactive webapp with React/Flux
- 1. Globalcode – Open4education KeullerMagalhães Building Modern Webapp with React/Flux
- 2. Globalcode – Open4education Aboutme... I’m just a developer... Technology enthusiast about Web/Mobile I really believe in Web Standards I love programming languages Father, gamer and geek :-) keullermag keuller.magalhaes@gmail.com 2/29
- 3. Globalcode – Open4education Agenda React WebComponents Flux Architecture Common Mistakes Other View libraries Q&A 3/29
- 4.
- 5. Globalcode – Open4education React Whois using ? https://github.com/facebook/react/wiki/Sites-Using-React5/29
- 6. Globalcode – Open4education Libraryor framework ? Library Framework 6/29
- 7. Globalcode – Open4education Reactis based on components! Imagine that your page is composed by widgets! Each widget is a component. 7/29
- 8.
- 9.
- 10. Globalcode – Open4education React importReact from ‘react’; class MessageComponent extends React.Component { render() { return <div className=“message”>{this.props.text}</div> } } export default MessageComponent; // Render an instance of MessageComponent React.render( <MessageComponent text=“Hello TDC 2015!” />, document.body); 10/29
- 11. Globalcode – Open4education React importReact from ‘react’; class ClickCounter extends React.Component { constructor(props) { super(props); this.state = { clicks: 0 }; } onClickHandler(e) { this.setState({ clicks: this.state.clicks + 1 }); } render() { return (<div> <span className=“link”>Click me</span> <span>Total clicks: {this.state.clicks}</span> </div>); } } export default ClickCounter;11/29
- 12. Globalcode – Open4education React importReact from ‘react’; class SampleComponent extends React.Component { componenWillMount() { ... } componentDidMount() { ... } componentWillUpdate(nProps, nState) { ... } componentDidUpdate(pProps, pState) { ... } componentWillUnmount() { ... } shouldComponentUpdate(nProps, nState) { ... } render() { return (<div> Sample Component! </div>); } } 12/29
- 13.
- 14.
- 15. Globalcode – Open4education Whatis Web Components ? Web Component is: Custom Elements Reusable Composable Single responsability An Specification http://webcomponents.org 15/29
- 16. Globalcode – Open4education FluxArchitecture http://facebook.github.io/flux 16/29
- 17. Globalcode – Open4education FluxArchitecture Unidirectional data flow. 17/29
- 18. Globalcode – Open4education FluxArchitecture Action “When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an action…”
- 19. Globalcode – Open4education FluxArchitecture Dispatcher “The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application.”
- 20. Globalcode – Open4education FluxArchitecture Store “Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they do not represent a single record of data like ORM models do.”
- 21. Globalcode – Open4education FluxArchitecture Why Flux ? • Adaptability • Simplicity • Maintainability • Scalability • Decoupling 21/29
- 22. Globalcode – Open4education FluxImplementations 22/29
- 23.
- 24. Globalcode – Open4education CommonMistakes 24/29
- 25. Globalcode – Open4education CommonMistakes React isn’t MVC, it’s just ‘V’ React allows you build UI by composing components React is for web/mobile applications React isn’t just to client React isn’t the most fast viewer library, but it’s cool and predictable React isn’t “the“ silver bullet!!! 25/29
- 26. Globalcode – Open4education CommonMistakes Flux isn’t a framework Flux is an architecture that can be implemented in both sides (client & server) There are many Flux implementations Flux can be used with any library if you want 26/29
- 27. Globalcode – Open4education OtherView Libraries http://vuejs.orghttps://muut.com/riotjs React is not alone in this wild world! 27/29
- 28. Globalcode – Open4education Q& A 28/29
- 29. Globalcode – Open4education References ReactSite - http://facebook.github.io/react Flux Site - http://facebook.github.io/flux ReactRocks - http://react.rocks React Awesome - https://github.com/enaqx/awesome-react Build With React - http://buildwithreact.com 29/29