vue.js ≒ react

Transcript

1. vue.js ≒ react
2. vue.jsはreact
3. component vue.js <p v-if="isActive">Paragraph</p> react {isActive && <p>Paragraph</p>}
4. component vue.js <li v-for="item in items" :key="item.key"> {{ item.title }} </li> react {items.map(item => ( <li key={item.key}>{item.title}</li> ))}
5. component vue.js <p v-show="isShow">paragraph</p> react <p style={{display: isShow ? 'initial' : 'none'}}> paragraph </p>
6. component vue.js <p :class="{'active': isActive}">Paragraph</p> react ・・・
7. component vue.js <p v-html="Paragraph"></p> react <p dangerouslySetInnerHTML={{__html: 'Paragraph'}} />
8. component vue.js <button @click.prevent="handleClick"> Send </button> react <button onClick={handleClick}>Send</button>
9. ステート管理 vue.js data() { return {count: 0} } react const [count, setCount] = useState(0);
10. DOM参照 vue.js <div ref="target">...</div> react const target = useRef(); return ( <div ref={target}>...</div> );
11. 算出プロパティ vue.js computed: { fullName() { return `${this.firstName} ${this.lastName}`; } }
12. 算出プロパティ react const [firstName, setFirstName] = useState("John"); const [lastName, setlastName] = useState("Doe"); const getFullName = () => `${firstName} ${lastName}`; const fullName = useMemo(getFullName, [firstName, lastName]);
13. 監視プロパティ vue.js watch: { name(newVal, oldVal) {} } react ・・・
14. vue.jsはreact