5 ms·

As the person who designed most of the tutorial, I'm sorry to hear this. My goal was to give people practice building a few simple components and connecting the

by spicyj 9y ago

As the person who designed most of the tutorial, I'm sorry to hear this. My goal was to give people practice building a few simple components and connecting them together. It's true that we assume preexisting JS knowledge, but your other point about how it doesn't give much insight into using React is one I haven't heard before. Can you say more about what you mean? Anecdotally in my experience, most people seem to find the tutorial pretty helpful, but we can think about more options. Maybe there's space to add one that assumes less about JS. (And really -- thank you for complaining about this, or else we wouldn't have known.)

mcintyre1994 9y ago
This is probably just me and feel free to disregard if this sounds silly, but I really wish miss the getting started guide from a few years ago that (iirc) had you drop an include statement in and go. I feel like React expects me to have a deep knowledge of JS build tooling when all I care about getting started is building a page locally that works and does cool things. FWIW this is how Vue's tutorial starts - and another really nice thing they do is teach you the API by entering things into your console on their tutorial page full of components. I don't really know if this is constructive or useful, I hope it is - I just feel like React expects a lot of new users in a way it didn't used to.
- spicyj 9y ago
  Thanks! I agree the simplicity is compelling. Our Getting Started page does offer CDN script tags as an option but it's seemed like create-react-app is a better tool for most people getting started on a new app so we've had that more prominently.
- danabramov 9y ago
  The tutorial asks you to either use CodePen (which requires no build tooling) or Create React App (which requires you to run a command in the terminal but then you don't need to configure anything): https://reactjs.org/tutorial/tutorial.html#how-to-follow-along https://reactjs.org/tutorial/tutorial.html#how-to-follow-alo... Similarly, the installation page offers you to either download a single HTML file, or to install a CLI that gives you a project that's ready to go: https://reactjs.org/docs/installation.html https://reactjs.org/docs/installation.html Could you clarify what give you an impression that you need to have a deep knowledge of build tooling to follow along?
  - mcintyre1994 9y ago
    Hey Dan, I really appreciate you responding here - I know things like Create React App have come in the past couple years, and that people love it - I'm not trying to take anything away from what you've built. I know the way I learned React isn't how anybody is ever going to make anything production quality. I'll try to clarify. If you don't mind another comparison to Vue, their equivalent page: https://vuejs.org/v2/guide/ https://vuejs.org/v2/guide/ says "Or, you can create an index.html file and include Vue with: <script src="https://unpkg.com/vue"></script>" https://unpkg.com/vue"></script>", while your get started page says "If you’d rather use a local development environment, check out the Installation page." I know, if I click there it'll say I have an index.html and I know I shouldn't do it that way, but if I have none of the infrastructure on my computer and I want to build my thing on my computer, I'm looking for the script - not installation instructions. On that 'how to follow along' page, under prerequisites it says "Note that we’re also using some features from ES6, a recent version of JavaScript. In this tutorial, we’re using arrow functions, classes, let, and const statements. You can use Babel REPL to check what ES6 code compiles to.". If this was the first React tutorial I ever looked at I'd be completely lost here and concluding I don't understand the prerequisites. If I know anything about 'relatively new' things in Javascript or Babel then I assume that I'm expected to use it somehow to actually use those relatively new things in my browser, but I have no idea how. Also, scrolling down a bit, "if you prefer to write code in your editor" is a list of 6 steps, one of which is installing Node and another is "Follow the installation instructions to create a new project." I might not need deep knowledge, but this feels like a lot of stuff to do to follow a tutorial in my editor. Here's my story about the old, do-it-all-locally tutorial: I'd just started an internship, and got a brief about doing some dynamic UI generation from schemas in .net stuff I'd never used, and was meant to be designing a schema to use. I had no idea what that should look like, so I learned React with your old tutorial and within a few hours could iterate on a schema to build UI components like theirs in the browser. This was amazingly helpful to me, and looked way more impressive than it actually was when I showed the boss! I just doubt that I'd do that based on your current tutorial, because I'd be on a Windows machine and get hung up installing NPM or something silly.. and that feels like a shame to me.
    - danabramov 9y ago
- pixel67 9y ago
  I wish there was a link to the old tutorial
AlexMuir 9y ago
I've used React occasionally for a couple of years. I just blasted through the tutorial in 10 minutes to refresh my knowledge and check if any best practices changed in the last year or so. It was perfect for this.
zwww 9y ago
As someone who has been learning React for the last couple of days, I found the tutorial quite adequate. My approach to learning was first going through the tutorial, then I began working on a real project, revisiting the tutorial code every time I needed to refresh my memory about some concept. I do agree it could've been more comprehensive and dealt with some real world scenarios like inputs, data-binding and whatnot, but generally speaking it was a nice showcase of what React can do.
minimaxir 9y ago
Thanks for replying. With respect to the insight in using React, I assume that the majority of React users are using it to build websites/SPAs, with concerns such as client/server data flows, templating/styling, and URL routing. While the tutorial does demonstrate a good demonstration how React works, it doesn’t provide much practical knowledge for building websites, and worse, doesn’t provide info on how to start building a website. (which just leads me to look at another tutorial)
- danabramov 9y ago
  Yes, it's intentionally not aimed at teaching SPAs, but teaching React itself. FWIW a lot of apps built with React are not SPAs. I agree though that there is a niche for the other kind of tutorial you're describing. :-)
- coldtea 9y ago
  >it doesn’t provide much practical knowledge for building websites That shouldn't be its purpose.
- dmitriid 9y ago
  They tried to add routing to to docs/tutorials. react-router devs hijacked the effort, ground it to a halt with claims of copyright to their code, and the pull request to docs got rejected in the end
  - faitswulff 9y ago
    Link?
    - dmitriid 9y ago
      Relevant comment is here: https://github.com/facebook/react/pull/8848#discussion_r105542575 https://github.com/facebook/react/pull/8848#discussion_r1055... Full pull request is here: https://github.com/facebook/react/pull/8848 https://github.com/facebook/react/pull/8848 As a result one of the React contributors ended up apologizing to react-router https://github.com/facebook/react/pull/8848#issuecomment-285915316 https://github.com/facebook/react/pull/8848#issuecomment-285...
taude 9y ago
I think "requiring you to have a strong JS frontend background in the first place" is NOT a bad thing. People really should be learning the basics before diving into using a framework. Unless, of course, the goal of ReactJS is to give non-JavaScript developers access to application creation. But I suspect not. EDIT: missing the "NOT" in my opening sentence.
- minimaxir 9y ago
  Ideally the goal of a tutorial is to give an idea of the basics before diving in, and to properly assess the skill level necessary to take the full dive into a real application.
logicallee 9y ago
I think the tutorial is awesome! I made an ironic comparison between it and the status quo in the industry https://news.ycombinator.com/item?id=15367480 https://news.ycombinator.com/item?id=15367480 (I think people didn't get it.) Good job, fantastic. Don't let the parent complainer get you down, you really nailed it. There's a reason everyone uses React and you're a large part of that reason. Kudos.
matt4077 9y ago
It's been a year or two since I did some rails, but what I vaguely remember as uncomfortable was the lack of something like guidance on the "project-level". I could never figure out which components to pick for the stack, or even where to place certain types of files. I know most of that isn't really react's responsibility. It just happens to inhabit this sort of central position within today's JS that people look at it for guidance. I'll be stoned here at HN for saying this, but I always considered Rails to be the high-water mark in terms of standardisation: with some experience, you could join any project and were already familiar with the folder structure and many other conventions. I think there's something like a "React Starter Pack" project now that seems to do exactly what I was looking for last year: a set of known-good components, (pre-)configured, tested, and with the virtual stamp of approval from people who know more than me.
- acemarke 9y ago
  Yeah, the React team has really tried to avoid "blessing" any specific tools or approaches, for several reasons. Facebook uses React in certain ways that are different than the community, and the community is doing a lot of different things anyway. CRA helps with getting started by providing an opinionated build setup, but leaves the entire rest of the application structure up to you. Sounds like you're looking for something more on top of that. I think I vaguely tossed out an idea of "CRA templates" on Twitter not too long ago, where maybe in addition to telling CRA what version of `react-scripts` you want to use, you could also give it a template package name. That way, you could specify something like `--template simple-react-redux` or `--template my-react-router-semantic-ui-setup` or something. There's actually a pretty similar issue with Redux too (and I say that as a Redux maintainer). I opened up an issue a while back to get ideas for what a better starting experience with Redux might look like: https://github.com/reactjs/redux/issues/2295 https://github.com/reactjs/redux/issues/2295 .

by spicyj 9y ago

mcintyre1994 9y ago

This is probably just me and feel free to disregard if this sounds silly, but I really wish miss the getting started guide from a few years ago that (iirc) had you drop an include statement in and go. I feel like React expects me to have a deep knowledge of JS build tooling when all I care about getting started is building a page locally that works and does cool things. FWIW this is how Vue's tutorial starts - and another really nice thing they do is teach you the API by entering things into your console on their tutorial page full of components. I don't really know if this is constructive or useful, I hope it is - I just feel like React expects a lot of new users in a way it didn't used to.

spicyj 9y ago
Thanks! I agree the simplicity is compelling. Our Getting Started page does offer CDN script tags as an option but it's seemed like create-react-app is a better tool for most people getting started on a new app so we've had that more prominently.
danabramov 9y ago
The tutorial asks you to either use CodePen (which requires no build tooling) or Create React App (which requires you to run a command in the terminal but then you don't need to configure anything): https://reactjs.org/tutorial/tutorial.html#how-to-follow-along https://reactjs.org/tutorial/tutorial.html#how-to-follow-alo... Similarly, the installation page offers you to either download a single HTML file, or to install a CLI that gives you a project that's ready to go: https://reactjs.org/docs/installation.html https://reactjs.org/docs/installation.html Could you clarify what give you an impression that you need to have a deep knowledge of build tooling to follow along?
- mcintyre1994 9y ago
  Hey Dan, I really appreciate you responding here - I know things like Create React App have come in the past couple years, and that people love it - I'm not trying to take anything away from what you've built. I know the way I learned React isn't how anybody is ever going to make anything production quality. I'll try to clarify. If you don't mind another comparison to Vue, their equivalent page: https://vuejs.org/v2/guide/ https://vuejs.org/v2/guide/ says "Or, you can create an index.html file and include Vue with: <script src="https://unpkg.com/vue"></script>" https://unpkg.com/vue"></script>", while your get started page says "If you’d rather use a local development environment, check out the Installation page." I know, if I click there it'll say I have an index.html and I know I shouldn't do it that way, but if I have none of the infrastructure on my computer and I want to build my thing on my computer, I'm looking for the script - not installation instructions. On that 'how to follow along' page, under prerequisites it says "Note that we’re also using some features from ES6, a recent version of JavaScript. In this tutorial, we’re using arrow functions, classes, let, and const statements. You can use Babel REPL to check what ES6 code compiles to.". If this was the first React tutorial I ever looked at I'd be completely lost here and concluding I don't understand the prerequisites. If I know anything about 'relatively new' things in Javascript or Babel then I assume that I'm expected to use it somehow to actually use those relatively new things in my browser, but I have no idea how. Also, scrolling down a bit, "if you prefer to write code in your editor" is a list of 6 steps, one of which is installing Node and another is "Follow the installation instructions to create a new project." I might not need deep knowledge, but this feels like a lot of stuff to do to follow a tutorial in my editor. Here's my story about the old, do-it-all-locally tutorial: I'd just started an internship, and got a brief about doing some dynamic UI generation from schemas in .net stuff I'd never used, and was meant to be designing a schema to use. I had no idea what that should look like, so I learned React with your old tutorial and within a few hours could iterate on a schema to build UI components like theirs in the browser. This was amazingly helpful to me, and looked way more impressive than it actually was when I showed the boss! I just doubt that I'd do that based on your current tutorial, because I'd be on a Windows machine and get hung up installing NPM or something silly.. and that feels like a shame to me.
  - danabramov 9y ago
pixel67 9y ago
I wish there was a link to the old tutorial

AlexMuir 9y ago

I've used React occasionally for a couple of years. I just blasted through the tutorial in 10 minutes to refresh my knowledge and check if any best practices changed in the last year or so. It was perfect for this.

zwww 9y ago

As someone who has been learning React for the last couple of days, I found the tutorial quite adequate. My approach to learning was first going through the tutorial, then I began working on a real project, revisiting the tutorial code every time I needed to refresh my memory about some concept. I do agree it could've been more comprehensive and dealt with some real world scenarios like inputs, data-binding and whatnot, but generally speaking it was a nice showcase of what React can do.

minimaxir 9y ago

Thanks for replying. With respect to the insight in using React, I assume that the majority of React users are using it to build websites/SPAs, with concerns such as client/server data flows, templating/styling, and URL routing. While the tutorial does demonstrate a good demonstration how React works, it doesn’t provide much practical knowledge for building websites, and worse, doesn’t provide info on how to start building a website. (which just leads me to look at another tutorial)

danabramov 9y ago
Yes, it's intentionally not aimed at teaching SPAs, but teaching React itself. FWIW a lot of apps built with React are not SPAs. I agree though that there is a niche for the other kind of tutorial you're describing. :-)
coldtea 9y ago
>it doesn’t provide much practical knowledge for building websites That shouldn't be its purpose.
dmitriid 9y ago
They tried to add routing to to docs/tutorials. react-router devs hijacked the effort, ground it to a halt with claims of copyright to their code, and the pull request to docs got rejected in the end
- faitswulff 9y ago
  Link?
  - dmitriid 9y ago
    Relevant comment is here: https://github.com/facebook/react/pull/8848#discussion_r105542575 https://github.com/facebook/react/pull/8848#discussion_r1055... Full pull request is here: https://github.com/facebook/react/pull/8848 https://github.com/facebook/react/pull/8848 As a result one of the React contributors ended up apologizing to react-router https://github.com/facebook/react/pull/8848#issuecomment-285915316 https://github.com/facebook/react/pull/8848#issuecomment-285...

taude 9y ago

I think "requiring you to have a strong JS frontend background in the first place" is NOT a bad thing. People really should be learning the basics before diving into using a framework. Unless, of course, the goal of ReactJS is to give non-JavaScript developers access to application creation. But I suspect not. EDIT: missing the "NOT" in my opening sentence.

minimaxir 9y ago
Ideally the goal of a tutorial is to give an idea of the basics before diving in, and to properly assess the skill level necessary to take the full dive into a real application.

logicallee 9y ago

I think the tutorial is awesome! I made an ironic comparison between it and the status quo in the industry https://news.ycombinator.com/item?id=15367480 https://news.ycombinator.com/item?id=15367480 (I think people didn't get it.) Good job, fantastic. Don't let the parent complainer get you down, you really nailed it. There's a reason everyone uses React and you're a large part of that reason. Kudos.

matt4077 9y ago

It's been a year or two since I did some rails, but what I vaguely remember as uncomfortable was the lack of something like guidance on the "project-level". I could never figure out which components to pick for the stack, or even where to place certain types of files. I know most of that isn't really react's responsibility. It just happens to inhabit this sort of central position within today's JS that people look at it for guidance. I'll be stoned here at HN for saying this, but I always considered Rails to be the high-water mark in terms of standardisation: with some experience, you could join any project and were already familiar with the folder structure and many other conventions. I think there's something like a "React Starter Pack" project now that seems to do exactly what I was looking for last year: a set of known-good components, (pre-)configured, tested, and with the virtual stamp of approval from people who know more than me.

acemarke 9y ago
Yeah, the React team has really tried to avoid "blessing" any specific tools or approaches, for several reasons. Facebook uses React in certain ways that are different than the community, and the community is doing a lot of different things anyway. CRA helps with getting started by providing an opinionated build setup, but leaves the entire rest of the application structure up to you. Sounds like you're looking for something more on top of that. I think I vaguely tossed out an idea of "CRA templates" on Twitter not too long ago, where maybe in addition to telling CRA what version of `react-scripts` you want to use, you could also give it a template package name. That way, you could specify something like `--template simple-react-redux` or `--template my-react-router-semantic-ui-setup` or something. There's actually a pretty similar issue with Redux too (and I say that as a Redux maintainer). I opened up an issue a while back to get ideas for what a better starting experience with Redux might look like: https://github.com/reactjs/redux/issues/2295 https://github.com/reactjs/redux/issues/2295 .