Being overwhelmed by all the choices is a valid concern which is why I find it strange for you to be suggesting OP switches to another framework when he has already started with Vue.
https://github.com/vuejs/vue-cli
Incidentally, vue-cli predates create-react-app.
If you are planning to build a side project, or dashboard kind of stuff so you can definitely give it a try. I feel it's like jquery :) little bit more concept to grasp.
Few video tutorials I am creating, you can watch and leave your comments:-
https://www.youtube.com/watch?v=Bv3_eTttgso
https://www.youtube.com/watch?v=WSXN-p7jVIk
https://www.youtube.com/watch?v=VKLUGU7YCFc
But you could have safely skipped the "first!" comment. Being first does not make you any more superior in the front-end world than it does in a youtube comment.
My "getting started" experience with React (which I use every day) was much more rocky. Admittedly this predates create-react-app.
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')1. Create your custom component:
var btnComp = {
props: ['text'],
template: '<div>I am a button <button v-html="text"></button></div>'
}
new Vue({
el: 'body',
components: {
'custombtn': btnComp
}
})
<custombtn :text="'hello'"></custombtn>
*Updated with simpler code and JSfiddle example
export default Vue.extend({
props: ['text'],
render() {
return <div>I am a button <button>{this.text}</button></div>;
}
});:-) just sayin;-)
My comment probably should have been 2 separate comments.
I believe not following this advice is the reason why so many (of us) are having difficulties in getting started. It very tempting to try to go for the "best-possible-stack" which includes too many neat libraries for solving some specific problems. This leads to endless troubleshooting which kills all the fun.
If not, I'd recommend taking a step back, look at the few most popular options, and start with the most "blessed" config/boilerplate with no custom changes.
Like for react, use the create-react-app thing. Don't add anything on top aside from what is needed for the bare minimum of your project you are learning with.
Feel the pain points, feel what you struggle with, make notes about what works well. Then when you have a minimum viable product, start adding "stuff". Maybe try out redux, or mess with webpack yourself, try out that library that you see people on HN bitching about all the time to see if it's really that bad. Just start fixing the worst issues you had with the language/stack, and understand how the additional tooling solves (or doesn't solve) your problem.
Don't worry about size, number of files, performance, how messy it is, how over engineered it feels. Just make something first. You'll have plenty of time to learn that other stuff once you have a good foundation. And at that point you'll know to leave out x, or that y isn't over engineered, it's just engineered.
Rome wasn't built in a day. Expect your first few things to be complete trash, and don't worry about it.