4 ms·
Why can't you comment on React? I don't really like Vue.js after coming from ReactJS, main reason is how hard is it to create components, which is the main att
by icemelt8 10y ago
Why can't you comment on React?
I don't really like Vue.js after coming from ReactJS, main reason is how hard is it to create components, which is the main attraction of React.
This is ReactJS code for a List group that has list items which are composed of buttons, can anyone post the Vue.JS equivalent code?
var Button = function(props){
return <button>{props.text}</button>
}
var ListItem = function(props){
return <div>I am a item <Button text="click me" /></div>
}
var ListGroup = React.createClass({
render: function() {
return <div>
<ListItem name="hello"/>
</div>;
}
});
ReactDOM.render(
<ListGroup />,
document.getElementById('container')
);
- welanes 10y agoI'm not versed in React but I think this achieves the same thing - 1. Create your custom component: var btnComp = { props: ['text'], template: '<div>I am a button <button v-html="text"></button></div>' } 2. Register it: new Vue({ el: 'body', components: { 'custombtn': btnComp } }) 3. Display it: <custombtn :text="'hello'"></custombtn> That's anything but hard. Here: https://jsfiddle.net/v5s77r2x/ https://jsfiddle.net/v5s77r2x/. *Updated with simpler code and JSfiddle example
- woogley 10y agoIt can even be closer to React than that, especially with JSX render functions. You don't even need the view to name itself: export default Vue.extend({ props: ['text'], render() { return <div>I am a button <button>{this.text}</button></div>; } });
- welanes 10y agoUseful to know. Cheers.
- danesparza 10y agoPS: This can be cleaned up even more with ES6/ES2015 syntax. See https://babeljs.io/blog/2015/06/07/react-on-es6-plus https://babeljs.io/blog/2015/06/07/react-on-es6-plus
- hirzel 10y agoThank you for that link! I am starting in react and there is a blend of ES6 and ES5 in the tutorials (maybe even within the official react tutorials?). This hits the spot in clearing up some confusion for me.
- przeor 10y agoFor React, one step by step complete tutorial for beginners is the https://www.reactjs.co https://www.reactjs.co :-) just sayin;-)
- jkol36 10y agoJust a question. Why would you create a new button component when the only thing it does is return a <button> html element with text inside. Why not just do {listitems.map(listitem) => {return (<button> {listitem.text}</button)}}. I think react facilitates unnecessary boiler plate logic like that. When in reality a component should probably do more in order to save code if it's going to be created at all. Just my opinion. Open to other people's thoughts on this.
- GrinningFool 10y agoI remember when I could show a button with nothing but an html element. Things sure have improved since then!