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.

Pragmatic React Workshop

116 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Pragmatic React Workshop

  1. 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. 2. @bolshchikov Hi. We are Sergey and Itai. @bolshchikov 2
  3. 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. 4. @bolshchikov To give the necessary knowledge and understanding about React in order to write the application @bolshchikov Our goal 4
  5. 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
  6. 6. @bolshchikov Front End Ecosystem 01 @bolshchikov 6
  7. 7. @bolshchikov@bolshchikov https://coggle.it/diagram /52e97f8c5a143de23900 5d1b/56212c4e4c505e0 045c0d3bda59b77e5977 c2c9bd40f3fd0b451bdcf 8da4aa52 7
  8. 8. @bolshchikov@bolshchikov https://coggle.it/diagram /52e97f8c5a143de23900 5d1b/56212c4e4c505e0 045c0d3bda59b77e5977 c2c9bd40f3fd0b451bdcf 8da4aa52 We are here 8
  9. 9. @bolshchikov React Ecosystem 02 @bolshchikov 9
  10. 10. @bolshchikov@bolshchikov https://coggle.it/diagram /52e97f8c5a143de23900 5d1b/56212c4e4c505e0 045c0d3bda59b77e5977 c2c9bd40f3fd0b451bdcf 8da4aa52 There is still more to learn 10
  11. 11. @bolshchikov React: Before and After 03 @bolshchikov 11
  12. 12. @bolshchikov 12 https://trends.google.co m/trends/explore?cat=13 &q=angularjs,reactGoogle Trends
  13. 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. 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. 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
  16. 16. @bolshchikov Designing Application 04 @bolshchikov 16
  17. 17. @bolshchikov Every application is a tree of components @bolshchikov 17
  18. 18. @bolshchikov 18 Parent Component Components Tree
  19. 19. @bolshchikov 19 Parent Component Child Component Child Component Child Component Components Tree
  20. 20. @bolshchikov 20 Parent Component Child Component Child Component Child Component Grandchild Component Grandchild Component Components Tree
  21. 21. @bolshchikov 21 Parent Component Child Component Child Component Child Component Grandchild Component Grandchild Component Grandchild Component Components Tree
  22. 22. @bolshchikov 22
  23. 23. @bolshchikov 23 TweetHeader
  24. 24. @bolshchikov 24 TweetHeader Tweet Body
  25. 25. @bolshchikov 25 TweetHeader Tweet Body TweetSocial
  26. 26. @bolshchikov 26 TweetHeader Tweet Body TweetSocial TweetTimestamp TweetActions
  27. 27. @bolshchikov 27 TweetHeader
  28. 28. @bolshchikov Your turn to try Divide UI into components @bolshchikov 28
  29. 29. @bolshchikov 29
  30. 30. @bolshchikov 30
  31. 31. @bolshchikov There is one way flow of data @bolshchikov 31
  32. 32. @bolshchikov 32 Parent Component Child Component Child Component Child Component Grandchild Component Grandchild Component Grandchild Component Data Flow
  33. 33. @bolshchikov 33 Parent Component Child Component Data Flow props callbacks
  34. 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
  35. 35. @bolshchikov React Syntax 05 @bolshchikov 35
  36. 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. 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. 38. @bolshchikov Your turn to try Generate the app & Create a representation component @bolshchikov 38
  39. 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. 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. 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
  42. 42. @bolshchikov React Lifecycle 06 @bolshchikov 42
  43. 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. 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
  45. 45. @bolshchikov Hand-on Part in Pairs 07 @bolshchikov 45
  46. 46. @bolshchikov ▪ Login ▪ Display list of users ▪ Chat with any user ▪ Receive messages Simple WazzApp 46@bolshchikov
  47. 47. @bolshchikov 47
  48. 48. @bolshchikov 48
  49. 49. @bolshchikov 49
  50. 50. @bolshchikov 50
  51. 51. @bolshchikov ❏ Divide into pairs ❏ Implement every component ❏ Push to git ❏ Deploy ❏ Play together Plan for today 51@bolshchikov
  52. 52. @bolshchikov References 99 @bolshchikov 52
  53. 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
  54. 54. @bolshchikov Thank You linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com
  55. 55. @bolshchikov Q&A linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com
  56. 56. @bolshchikov Feedback Form linkedin/bolshchikov github.com/bolshchikov@bolshchikovsergeyb@wix.com

×