4 ms·
> But seriously I can't use `<SomeThing onClick={this.handleClick}/>`? Give a try to Vue.js, you can do exactly this. This framework reconciled me with fronten
by StreakyCobra 10y ago
> But seriously I can't use `<SomeThing onClick={this.handleClick}/>`?
Give a try to Vue.js, you can do exactly this. This framework reconciled me with frontend development after I discovered it on HN. Let's say you want to build a custom button with a special functionality and reuse it, like a button that logs when it has been clicked. Simply create a component like this (it's almost self-explanatory):
<template>
<div class="colored-box">
<p @click="logClick">{{ text }}</p>
</div>
</template>
<script>
export default {
name: 'LogButton',
props: [
'text'
],
methods: {
logClick: function () {
console.log('The button "' + this.text + '" has been pressed"')
this.$emit('click')
}
}
}
</script>
<style scoped>
.colored-box {
background-color: red;
border: solid 1px black;
}
</style>
There are 3 sections in the file, one for the HTML template, one for Javascript code, one for CSS style. All this belongs to the same components, so the methods you defined in the javascript code can be called directly from the html template as you wanted.
Once your component is ready, you can use it in other files, and in a damn simple way:
<LogButton text="Delete" @click="…" />
- CharlesW 10y agoI really like Vue, and I love single file components. React folks: Is there no way to do this with React? I may need to use React soon, and if it can't do this I'm going to be pretty sad.
- acemarke 10y agoYou can write components however you want. For components and styles, there's numerous approaches, and it's up to you which one you use. You can write your CSS totally separately, you can import CSS into a JS file and have it auto-generate unique class names, you can define styles completely inline in a component, and so on. Can you maybe clarify what you think you can't do with React?
- Terr_ 10y agoIt's not hip, but Dojo has similar markup.