5 ms·

Of course it's subjective, and different people coming from different backgrounds / experience levels find different things easier than others. But... that tut

Of course it's subjective, and different people coming from different backgrounds / experience levels find different things easier than others. But... that tutorial you say you like to show people utilizes jsx, which needs to be compiled with something (right? Or does react do the compilation automatically at runtime now and I missed that memo?). And for people coming from a place where they are very comfortable and familiar with html and css, and maybe a light sprinkling of jquery on top, Vue is way more approachable than the tutorial you linked to.

spicyj 10y ago
create-react-app is our recommended way to build simple React apps (and some complex ones). It has no configuration and is designed to be very easy to set up. (My understanding is that Vue templates also need to be compiled -- is that incorrect?) I wrote the tutorial. Could you give any suggestions on how I could make it easier to get into?
- tomstuart 10y ago
  Not the OP, but I'll state the obvious on their behalf. The number one thing that you (and Facebook) could do to help people learn React, and combat the perception that it requires overly complex tooling, is write a tutorial that shows how to use React entirely in-browser without any build toolchain. A static HTML file, some <script> tags pointing at a CDN — done. No distractions, nothing to download, nothing to install, nothing to run, just a JavaScript library that makes it easier to write view templates. It would make it even easier to get into if that tutorial were written entirely in ES5, but you could use babel-standalone if you felt that JSX and ES6 were important enough.
  - spicyj 10y ago
    Thanks for replying! Our official tutorial was actually exactly that for _years_, but it didn't seem to help much. I get the sentiment though and maybe we can find another way to make it work.
    - scrollaway 10y ago
      Offering an alternative point of view: I would really like if the tutorial at least pointed towards documentation on what do I need and why, and the right way to set these things up between Babel and Webpack, as well as Typescript. Maybe my use case is rarer, I don't know, but if I want to do things right, I want to understand what I'm setting up. Do I really need babel? If I use Typescript, do I still need it? etc... I understand this doesn't have much to do with React per se but if these components are a definitive part of the ecosystem people work with, there is value in at least telling people where to find a high quality explanation for how they fit together.
  - kevin_thibedeau 10y ago
    This is why I am using Vue and never gave React a second thought. Everyone "says" JSX is optional but there is no practical way to invest in React without having to deal with it.
    - ng12 10y ago
      JSX is a breeze though. The trial-by-fire for me was handing a bunch of ugly components to our designer who only knew HTML/CSS/JS. He picked it up no problem. And to me using JSX is infinitely better than have to use opaque template directives like Angular and Vue.
  - lostsock 10y ago
    I think this post is spot on. I remember having a quick exploratory play with React back when the tutorial was like that and I thought it was great. Then when I came back to actually use React in a project the tutorial had changed and all of the sudden it felt like a big learning curve. Vue had just been adopted by Laravel and I was able to get everything I wanted to do by just including some scripts. I've since learned more about compiling and including other resources so could probably handle the React tooling and requirements now but back when I started it was a big stumbling block.
- jordanlev 10y ago
  To get started with Vue, all you need is to include 1 javascript file, and it works with plain old javascript, all the way back to IE9. As one gets more advanced, there is the ability to compile templates, but that is an optional thing that no beginner needs to worry themselves about. I took a closer look at your tutorial. It's really very good! And I like that you link to a codepen which gets people up and running without having to even create their own html file. Tutorials speak differently to different audiences -- I imagine people used to building more traditional "apps" get a lot out of this one. But speaking from the perspective of someone who spent years making html+css pages that had data piped into them from the back-end (PHP, Rails, etc)... the scope of the tutorial is somewhat overwhelming to me :) It goes right into components, shared state, immutability, functional programming, history... to some people that is a lot of concepts at once. I think the appeal of Vue (to a certain slice of people) is that you can just add it as a "light touch" onto an existing html page. For example, show me one textbox who's value gets displayed in a div somewhere else on the page as I type, or one button that toggles the visibility of one image. Just super duper basic stuff, in very isolated and limited-scope chunks, and in the context of "easy dom manipulation" (as opposed to "building a game or app").
manigandham 10y ago
Both frameworks are the same with regards to compilation. JSX can be used at runtime by including the babel browser compilation script. This is only recommended for development, not production. React can also just use plain javascript, although JSX is a much cleaner and easier to use with the rest of the framework.

spicyj 10y ago

create-react-app is our recommended way to build simple React apps (and some complex ones). It has no configuration and is designed to be very easy to set up. (My understanding is that Vue templates also need to be compiled -- is that incorrect?) I wrote the tutorial. Could you give any suggestions on how I could make it easier to get into?

tomstuart 10y ago
Not the OP, but I'll state the obvious on their behalf. The number one thing that you (and Facebook) could do to help people learn React, and combat the perception that it requires overly complex tooling, is write a tutorial that shows how to use React entirely in-browser without any build toolchain. A static HTML file, some <script> tags pointing at a CDN — done. No distractions, nothing to download, nothing to install, nothing to run, just a JavaScript library that makes it easier to write view templates. It would make it even easier to get into if that tutorial were written entirely in ES5, but you could use babel-standalone if you felt that JSX and ES6 were important enough.
- spicyj 10y ago
  Thanks for replying! Our official tutorial was actually exactly that for _years_, but it didn't seem to help much. I get the sentiment though and maybe we can find another way to make it work.
  - scrollaway 10y ago
    Offering an alternative point of view: I would really like if the tutorial at least pointed towards documentation on what do I need and why, and the right way to set these things up between Babel and Webpack, as well as Typescript. Maybe my use case is rarer, I don't know, but if I want to do things right, I want to understand what I'm setting up. Do I really need babel? If I use Typescript, do I still need it? etc... I understand this doesn't have much to do with React per se but if these components are a definitive part of the ecosystem people work with, there is value in at least telling people where to find a high quality explanation for how they fit together.
- kevin_thibedeau 10y ago
  This is why I am using Vue and never gave React a second thought. Everyone "says" JSX is optional but there is no practical way to invest in React without having to deal with it.
  - ng12 10y ago
    JSX is a breeze though. The trial-by-fire for me was handing a bunch of ugly components to our designer who only knew HTML/CSS/JS. He picked it up no problem. And to me using JSX is infinitely better than have to use opaque template directives like Angular and Vue.
- lostsock 10y ago
  I think this post is spot on. I remember having a quick exploratory play with React back when the tutorial was like that and I thought it was great. Then when I came back to actually use React in a project the tutorial had changed and all of the sudden it felt like a big learning curve. Vue had just been adopted by Laravel and I was able to get everything I wanted to do by just including some scripts. I've since learned more about compiling and including other resources so could probably handle the React tooling and requirements now but back when I started it was a big stumbling block.
jordanlev 10y ago
To get started with Vue, all you need is to include 1 javascript file, and it works with plain old javascript, all the way back to IE9. As one gets more advanced, there is the ability to compile templates, but that is an optional thing that no beginner needs to worry themselves about. I took a closer look at your tutorial. It's really very good! And I like that you link to a codepen which gets people up and running without having to even create their own html file. Tutorials speak differently to different audiences -- I imagine people used to building more traditional "apps" get a lot out of this one. But speaking from the perspective of someone who spent years making html+css pages that had data piped into them from the back-end (PHP, Rails, etc)... the scope of the tutorial is somewhat overwhelming to me :) It goes right into components, shared state, immutability, functional programming, history... to some people that is a lot of concepts at once. I think the appeal of Vue (to a certain slice of people) is that you can just add it as a "light touch" onto an existing html page. For example, show me one textbox who's value gets displayed in a div somewhere else on the page as I type, or one button that toggles the visibility of one image. Just super duper basic stuff, in very isolated and limited-scope chunks, and in the context of "easy dom manipulation" (as opposed to "building a game or app").

manigandham 10y ago

Both frameworks are the same with regards to compilation. JSX can be used at runtime by including the babel browser compilation script. This is only recommended for development, not production. React can also just use plain javascript, although JSX is a much cleaner and easier to use with the rest of the framework.