"Vue.js или как наконец отказаться от React"
0 likes1,845 views
Документ обсуждает сравнение технологий Vue.js и React, выделяя преимущества и недостатки обеих библиотек. Автор делится своим опытом, описывая особенности реализации компонентов, рендеринга, управления состоянием и стилей. Также затрагиваются недостатки экосистемы Vue и области его применения.
![CSS React
Postscss + Modules
import s from './style.css';
const classNames = cs(s.interfaceFilterLists, {
[active]: someCondition === index
});
return (
<li
key={type.abbreviation}
className={classNames}
>
<button>{type.title}</button>
</li>
);](https://image.slidesharecdn.com/random-170422105411/85/Vue-js-React-30-320.jpg)
"Vue.js или как наконец отказаться от React"
- 1. Vuejs, или как отказаться от React Андрей Грачёв Crello
- 2. Немного обо мне ▸ Architect at Crello(crello.com) ▸ Пишу на js с 2012 года ▸ Человек-оркестр ▸ Люблю всё новое Грачёв Андрей
- 3. О чём будем говорить Vuejs React VS
- 6. Почему полюбился Angular 1.x.x
- 8. Что всегда мешало сделать нормальный MVVM
- 9. Но немного отойдём в сторону…
- 10. Почему полюбился Реакт Компоненты - Удобно!
- 11. Почему полюбился Реакт Virtual DOM, Batch Rendering - скорость!
- 12. React Native Learn once - write everywhere!
- 13. Нам показали как делать правильно!
- 16. Слишком сложно!
- 17. Vue to the rescue
- 21. Скорость React Удобство Angular
- 23. State management React Vue Redux, MobX Vuex
- 24. Шаблоны React Vue Только JSX Можно использовать любой шаблон, например Pug
- 27. Чем Vue удобней?
- 28. Conditional rendering - React let children if (items.length > 0) { children = ( <ul> {items.map(item => <li key={item.id}>{item.name}</li> )} </ul> ) } else { children = <p>No items found.</p> } return ( <div className='list-container'> {children} </div> )
- 29. VUE <template> <div class="list-container"> <ul v-if="items.length"> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </ul> <p v-else>No items found.</p> </div> </template> Conditional rendering - Vue
- 30. CSS React Postscss + Modules import s from './style.css'; const classNames = cs(s.interfaceFilterLists, { [active]: someCondition === index }); return ( <li key={type.abbreviation} className={classNames} > <button>{type.title}</button> </li> );
- 31. CSS VUE Block scoped CSS <style scoped> .active { background-color: '#000000' } </style> <template> <div v-bind:class="{ active: isActive }"> </div> </template>
- 32. А как же React Native ?
- 33. Аналог React Native, работающий на Vue.js
- 34. Почему Плохо ▸ Очень слабо развитая экосистема ▸ Китайское коммьюнити
- 35. Где можно уже успешно применять ▸ Админки и внутренние ресурсы ▸ Домашние проекты ▸ MVP
- 36. Вопросы?