React/pReact
App.jsx:
import { h, Component } from 'preact'
export default class App extends Component {
state = {
counter: 0,
}
increaseCounter = (e) => {
this.setState((state) => ({
counter: ++state.counter
}))
}
render(_, { counter }) {
return (
<button onClick={this.increaseCounter}>
Count: {counter}
</button>
)
}
}
index.js:
import { h, render } from 'preact'
import App from './App'
render(<App />, document.querySelector('#app'))
Vue
App.vue:
<template lang="pug">
button(@click="++counter") Count: {{ counter }}
</template>
<script>
export default {
data: () => ({
counter: 0,
}),
}
</script>
index.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
Svelte
App.svelte:
<script>
let counter = 0
</script>
<button on:click={() => ++counter}>Count: {counter}</button>
index.js:
import App from './App.svelte'
export default new App({
target: document.body,
})
Прочее
index.html примерно общий для всех:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<title></title>
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="app"></div>
<script src="./index.js"></script>
</body>
</html>
Запускал все через parcel.
Можно ли сделать на основании этих примеров вывод о громоздкости реакта? Или вы можете привести примеры, где React менее многословен (это у меня еще без TypeScript). Сейчас примерно половина вакансий с React. Мне нужно определиться нужно ли вдовесок выучить эту парашу (хотя там учить особо нечего, но меня тошнит от смешения разметки и js)
