60
You usually create your own tree
of components
RegistrationForm
CityAutocompleteInput PhoneNumberInput
HTMLTextInput HTMLTelInput
Slide 61
Slide 61 text
61
Now, how to update
the view?
Slide 62
Slide 62 text
62
Instead of
updates (mutations)
React uses
reconciliation
Slide 63
Slide 63 text
63
setState()
Slide 64
Slide 64 text
64
React compares the view
representations and apply
the changes to the DOM
Slide 65
Slide 65 text
Tree of
components
before change
Tree of
components
after change
setState
Slide 66
Slide 66 text
66
Tree of
components
before change
Tree of
components
after change
setState
render render
View before View after
Slide 67
Slide 67 text
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
84
// app.js
import ReactDOM from 'react-dom';
import {App} from './App.js';
ReactDOM.render(
,
document.getElementById('portfolio')
);
Slide 85
Slide 85 text
85
// app.js
import ReactDOM from 'react-dom';
import {App} from './App.js';
ReactDOM.render(
,
document.getElementById('portfolio')
);
Tree of components
Slide 86
Slide 86 text
86
And that’s all!
You can now use React
into Symfony
Slide 87
Slide 87 text
87
Conclusion
Slide 88
Slide 88 text
Thanks!
88
For any question:
▪ @titouangalopin
on Twitter
▪ titouan.galopin
@symfony.com