Pragmatic React Workshop
•
1 gefällt mir•261 views
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
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Ähnlich wie Pragmatic React Workshop
Ähnlich wie Pragmatic React Workshop (20)
Mehr von Sergey Bolshchikov
Mehr von Sergey Bolshchikov (14)
Kürzlich hochgeladen
Kürzlich hochgeladen (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