Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Demystifying React for Symfony developers

Demystifying React for Symfony developers

SymfonyCon Amsterdam 2019

Titouan Galopin

November 22, 2019
Tweet

More Decks by Titouan Galopin

Other Decks in Programming

Transcript

  1. 11 Bidirectional data-binding An change in the model updates the

    view An change in the view updates the model
  2. 14 { firstName: 'Tito', lastName: 'Galopin', email: '[email protected]' } Model

    { firstName: 'Titouan''Tito', lastName: 'Galopin', email: '[email protected]' } View { firstName: 'Tito' } Mutation
  3. View 23 Model Observable model Two-way data flow View React

    One-way data flow Model Dispatcher View
  4. 26 We want the benefits to blow the view away

    and re-render it ... … while dealing properly with every edge cases
  5. 33 A component = A description of a part of

    your UI that depends on your current model
  6. 37

  7. 42 Store (Model) Dispatcher View React handles the Dispatcher and

    the Store You only implement the view and define the structure of the Store
  8. 47

  9. 49 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } }
  10. 50 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } Use of the state
  11. 51 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } Use of the state To use a property: this.props.source
  12. State = Local data that will change over time Props

    = Non-local data, read-only for the component 52
  13. 54 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } }
  14. 55 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } What’s that?!
  15. 56 JSX is a formatting language used by React to

    express a representation of views
  16. 58 class Autocomplete extends Component { // ... render() {

    return ( <ul> {this.state.results.map(function(result) { return ( <li>{result.name}</li> ); })} </ul> ); } } Not real HTML tags but components
  17. 60 You usually create your own tree of components RegistrationForm

    CityAutocompleteInput PhoneNumberInput HTMLTextInput HTMLTelInput
  18. 66 Tree of components before change Tree of components after

    change setState render render View before View after
  19. 67 Tree of components before change Tree of components after

    change setState render render View before View after React compares both and apply only needed changes to the DOM
  20. 68 class Autocomplete extends Component { // ... handleChange(event) {

    api.fetchResults(event.target.value).then(results => { this.setState({ results: results }) }); } // ... render() { return ( <div> <input type="text" onChange={this.handleChange} /> // ... </div> ); } }
  21. 76 Webpack is a build tool It lets you manipulate

    your Javascript and CSS before using it in production (JSX, minification, …)
  22. 77 Webpack Encore wraps Webpack around a nice API to

    improve its Developer Experience
  23. 81 // webpack.config.js const Encore = require( '@symfony/webpack-encore' ); Encore

    // ... .enableReactPreset(); module.exports = Encore.getWebpackConfig();
  24. 83 // index.html.twig ... <div id="portfolio"></div> … // Output proper

    <script src="..."> tags {{ encore_entry_script_tags('app') }}
  25. 84 // app.js import ReactDOM from 'react-dom'; import {App} from

    './App.js'; ReactDOM.render( <App />, document.getElementById('portfolio') );
  26. 85 // app.js import ReactDOM from 'react-dom'; import {App} from

    './App.js'; ReactDOM.render( <App />, document.getElementById('portfolio') ); Tree of components