Pragmatic React Workshop
•
1 gostou•261 visualizações
The presentation deck for pragmatic react workshop. Its goal is To give the necessary knowledge and understanding about React in order to write the application. https://github.com/bolshchikov-public/wazzapp
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a Pragmatic React Workshop
Semelhante a Pragmatic React Workshop (20)
Mais de Sergey Bolshchikov
Mais de Sergey Bolshchikov (14)
Último
Último (20)
Pragmatic React Workshop
- 1. @bolshchikov Pragmatic React Workshop Sergey Bolshchikov, Team Lead @ Wix Itai Ben David, Guild Master @ Wix linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com
- 2. @bolshchikov Hi. We are Sergey and Itai. @bolshchikov 2
- 3. @bolshchikov Your turn... 1. What’s your name? 2. Your previous experience with front end and React? 3. Top thing you want to learn today? @bolshchikov 3
- 4. @bolshchikov To give the necessary knowledge and understanding about React in order to write the application @bolshchikov Our goal 4
- 5. @bolshchikov AGENDA 1. The state of front end now 2. React ecosystem 3. React: before and after 4. Design React application 5. React Syntax 1. Representational components 2. Container components 6. Life-cycle management 7. Hand-on part @bolshchikov 5
- 10. @bolshchikov@bolshchikov https://coggle.it/diagram /52e97f8c5a143de23900 5d1b/56212c4e4c505e0 045c0d3bda59b77e5977 c2c9bd40f3fd0b451bdcf 8da4aa52 There is still more to learn 10
- 12. @bolshchikov 12 https://trends.google.co m/trends/explore?cat=13 &q=angularjs,reactGoogle Trends
- 13. @bolshchikov React: Before ▪ MV* approach ▪ Angular is the most popular framework ▪ Two-way binding (magic) ▪ HTML Templates ▪ Services/Factories/Directives/Config/Run/etc… ▪ Full-blown framework @bolshchikov 13
- 14. @bolshchikov React: After ▪ Simple library ▪ Challenges best practices ▪ One-way binding ▪ HTML inside JavaScript ▪ Components Only ▪ Bring only what you need @bolshchikov 14
- 15. @bolshchikov AGENDA 1. The state of front end now 2. React ecosystem 3. React: before and after 4. Design React application 5. React Syntax 1. Representational components 2. Container components 6. Life-cycle management 7. Hand-on part @bolshchikov 15
- 17. @bolshchikov Every application is a tree of components @bolshchikov 17
- 19. @bolshchikov 19 Parent Component Child Component Child Component Child Component Components Tree
- 22. @bolshchikov 22
- 28. @bolshchikov Your turn to try Divide UI into components @bolshchikov 28
- 29. @bolshchikov 29
- 30. @bolshchikov 30
- 31. @bolshchikov There is one way flow of data @bolshchikov 31
- 34. @bolshchikov AGENDA 1. The state of front end now 2. React ecosystem 3. React: before and after 4. Design React application 5. React Syntax 1. Representational components 2. Container components 6. Life-cycle management 7. Hand-on part @bolshchikov 34
- 36. @bolshchikov import React from 'react'; const MyComp = props => { return ( <div>Hello World!</div> ); } export default MyComp; React Stateless Component ▪ Arrow function ▪ Accepts props object ▪ Returns JSX Representational Component 36
- 37. @bolshchikov import {React} from 'react'; import PropTypes from 'prop-types'; const MyComp = ({ name }) => { return ( <div>Hello, {name}</div> ); } MyComp.propTypes = { name: PropTypes.string.isRequired }; export default MyComp; React Stateless Component ▪ Import PropTypes ▪ Define propTypes Representational Component with PropTypes 37
- 38. @bolshchikov Your turn to try Generate the app & Create a representation component @bolshchikov 38
- 39. @bolshchikov import React, {Component} from 'react'; import PropTypes from 'prop-types'; class MyComp extends Component { render() { const name = {this.props}; return ( <div>Hello, {name}</div> ); } } MyComp.propTypes = { name: PropTypes.string.isRequired }; export default MyComp; React Stateless Component ▪ Extends from Component ▪ Has a render() method Form of ES6 class 39
- 40. @bolshchikov import React, {Component} from 'react'; class MyComp extends Component { constructor(props) { super(props); this.state = {name: 'Sergey'} } render() { const name = this.state.name; return ( <div>Hello, {name}</div> ); } } export default MyComp; React Stateful Component ▪ set initial state 40 Set internal state
- 41. @bolshchikov import React, {Component} from 'react'; class MyComp extends Component { constructor(props) { super(props); this.state = {name: ''} } componentWillMount() { fetch('/name').then(name => this.setState({name})); } render() { const name = {this.state}; return ( <div>Hello, {name}</div> ); } } export default MyComp; React Stateful Component Set internal state 41 ▪ component will mount ▪ set internal state
- 43. @bolshchikov componentWillMount() 43 constructor(props) componentDidMount() Mounting Mounted render() componentShouldU pdate() componentWillRec eiveProps(nextPro ps) componentDidUp date() Receiving State Mounted componentWillUpda te() componentWillUnmout() Unmounting render() @bolshchikov
- 44. @bolshchikov AGENDA 1. The state of front end now 2. React ecosystem 3. React: before and after 4. Design React application 5. React Syntax 1. Representational components 2. Container components 6. Life-cycle management 7. Hand-on part @bolshchikov 44
- 46. @bolshchikov ▪ Login ▪ Display list of users ▪ Chat with any user ▪ Receive messages Simple WazzApp 46@bolshchikov
- 47. @bolshchikov 47
- 48. @bolshchikov 48
- 49. @bolshchikov 49
- 50. @bolshchikov 50
- 51. @bolshchikov ❏ Divide into pairs ❏ Implement every component ❏ Push to git ❏ Deploy ❏ Play together Plan for today 51@bolshchikov
- 53. @bolshchikov@bolshchikov 1. Create React App 2. Understanding React 3. Frontend Ecosystem 4. Angular Two-way Binding 5. Pete Hunt: React: Rethinking best practices -- JSConf EU 2013 6. Pete Hunt: React: Rethinking best practices -- JSConf EU 2013 [Slides] 7. React: How To 8. WazzApp Repo 53