Divya Sasidharan is a professional Front End developer who transitioned from using React to using Vue. In her talk, React Point of Vue, she shares her experience of applying what she knew about React to Vue, and how she altered her ways of thinking and coding in order to use Vue more effectively.
Using the example of a cup of tea and the various components it may consist of (tea, water, milk, sugar), Divya compares how you’d work with components in Vue vs. React.
For example, while you’d use
.map to render out multiple sugar components based on an array, you’d use
v-for in Vue instead. When conditionally rendering a component based on props, instead of using a ternary expression in the render method of a React component, you can simply use
v-else in the template of a Vue component.
She explains that with Vue, you’re thinking about constructing a template and then adding logic to it, with a clear separation of concerns, whereas with React you’re doing both simultaneously.
Divya explains the differences of how React and Vue handle the rendering of a component’s children (nested components). She starts off showing how you’d do so in React, with
React.createElement and then shows how you could force Vue to behave very similarly by manually using
createElement inside of the Vue component’s render method.
While that approach makes sense for a React developer, Divya demonstrates how the more Vue-like way to accomplish this is by simply using
Divya introduces the concept of render props, which is a technique for sharing code between React components using a prop whose value is a function. With this in mind, she explores how to share state from parent to child, and child to parent. She continues with the example of the tea, but adds a dimension of a dynamic container for that tea: should it come in a cup or a togo cup.
Her talk concludes with an in depth look at taking the concepts above and building upon them in order to create a multi-layered map with components that share state.