Lightning Talk - Vue/React

A 5min lightning talk covering the similarities/differences between two amazing JS libraries (Vue/React)

Transcript

2. Initial release: February 2014 Author (original): Evan You Vue 2.0 release: September 2016
3. “What if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?” -
4. Virtual DOM Component Based Methodology Props Build Environments vue-cli create-react-app Browser Devtools Router vue-router react-router Flux vuex redux Two-way data binding
5. class MessageComponent extends Component { state { message: "" } handleMessageChange = (e) => { this.setState({ message: e.target.value }) } render() { return ( <div> <input type=“text” onChange={this.handleMessageChange}/> <span>{this.state.message}</span> </div> ); } }
6. var Message = new Vue({ el: ’#message’, data: { message: ’’ } }); <div id=“message”> <input type=“text” v-model=“message”/> <span>{{ message }}</span> </div>
7. class MessageComponent extends Component { state { message: "" } handleMessageChange = (e) => { this.setState({ message: e.target.value }) } render() { return ( <div> <input type=“text” onChange={this.handleMessageChange}/> <span>{this.state.message}</span> </div> ); } } var Message = new Vue({ el: ’#message’, data: { message: ’’ } }); <div> <input type=“text” v-model=“message”/> <span>{{ message }}</span> </div>
8. var Message = new Vue({ el: ’#message’, data: { message: ’’ }, created() {}, mounted() {}, computed: {}, methods: {} });
9. Templates! <input type=“text” v-model=“message” /> <h1 v-if=“thisBooleanIsTrue”></h1> <li v-for=“item in items”> {{ item.message }} </li> <li v-bind:class=“{ active: booleanTrue } ”> {{ item.message }} </li>
10. Reactive State! “State” often relates to the data object in the Vue instance/components No need to call setState() - Data object is automatically reactive to the view