Ask HN: Overwhelmed with learning front-end, how do I proceed?

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by icemelt8 on Sunday November 06, 2016 @02:41AM (#12884034)

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')

);

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by welanes on Sunday November 06, 2016 @03:20AM (#12884137)

I'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/.

*Updated with simpler code and JSfiddle example

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by woogley on Sunday November 06, 2016 @08:19AM (#12884930)

It 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>;
      }
    });

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by welanes on Sunday November 06, 2016 @09:06AM (#12885113)

Useful to know. Cheers.

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by danesparza on Sunday November 06, 2016 @04:31AM (#12884280)

PS: This can be cleaned up even more with ES6/ES2015 syntax.

See https://babeljs.io/blog/2015/06/07/react-on-es6-plus

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by hirzel on Sunday November 06, 2016 @09:03AM (#12885098)

Thank 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.

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by jkol36 on Sunday November 06, 2016 @05:07PM (#12887356)

Just 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.

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by GrinningFool on Sunday November 06, 2016 @05:47PM (#12887541)

I remember when I could show a button with nothing but an html element. Things sure have improved since then!

[ Parent | on HN ]

Re:Ask HN: Overwhelmed with learning front-end, how do I pro... by przeor on Sunday November 06, 2016 @07:50AM (#12884856)

For React, one step by step complete tutorial for beginners is the https://www.reactjs.co

:-) just sayin;-)

[ Parent | on HN ]