14 ms·

Ask HN: What are some good React tutorials?

• amarsahinovic 10y ago
  SurviveJS book, you can read it online for free: http://survivejs.com/webpack_react/introduction/ http://survivejs.com/webpack_react/introduction/ http://survivejs.com/ http://survivejs.com/ Full-Stack Redux Tutorial: http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial...
• BenderV 10y ago
  Thinking in React was the first tutorial that really triggered me an woaw. It's also quite fast to do. https://facebook.github.io/react/docs/thinking-in-react.html https://facebook.github.io/react/docs/thinking-in-react.html
• yamalight 10y ago
  I'd recommend starting with "React How To" by Pete Hunt [1] - it's one of the best collections of starter guides you'll need to get started with React. And then you can always look at awesome-react. [2] [1] https://github.com/petehunt/react-howto https://github.com/petehunt/react-howto [2] https://github.com/enaqx/awesome-react https://github.com/enaqx/awesome-react
• mrborgen 10y ago
  Sorry for the self promotion, but I wrote a few React tutorials with someone like you in mind. They're only covering the basics of React, coding directly in an html file, so they don't involve getting up and running with Node+React. But I think that should be tackled after you know the basics of React. Building Your First React App: https://medium.com/learning-new-stuff/building-your-first-react-js-app-d53b0c98dc#.9jikbk8re https://medium.com/learning-new-stuff/building-your-first-re... Building Your Second React App: https://medium.com/learning-new-stuff/building-your-second-react-js-app-eb66924b3774#.7c7bgel6b https://medium.com/learning-new-stuff/building-your-second-r... React.JS in 8 minutes: https://medium.com/learning-new-stuff/learn-react-js-in-7-min-92a1ef023003#.w32ul3dvh https://medium.com/learning-new-stuff/learn-react-js-in-7-mi... Other than that, I always recommend the official tutorial: https://facebook.github.io/react/docs/tutorial.html https://facebook.github.io/react/docs/tutorial.html ... and Egghead.io's videos: https://egghead.io/series/react-fundamentals https://egghead.io/series/react-fundamentals
  • hackerboos 10y ago
    I remember doing that Egghead course over 2 years ago. Are they still valid?
• eecks 10y ago
  You could go through these demos https://github.com/ruanyf/react-demos https://github.com/ruanyf/react-demos
• mortona 10y ago
  I found it quick to understand the ideas behind React, but it was a lot more difficult to understand how to apply that to practical problems and to 'think' in React. React.js By Example [http://reactkungfu.com/react-by-example/ http://reactkungfu.com/react-by-example/] was enormously helpful in showing how to structure various different real-world apps. So if you find yourself beyond the basic CommentBox examples, but not sure how to build your own components then this might help.
• saadehmad 10y ago
  I think this blog post: http://andrewhfarmer.com/getting-started-tutorials/ http://andrewhfarmer.com/getting-started-tutorials/ will help you to get started with react. I'm following this blog post to learn react myself.
• dreen 10y ago
  Heres a nice intro to React that deals with JUST React, no JSX, no Webpack etc. I found it on HN the other day http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webp...
• peterhunt 10y ago
  What's wrong with the official tutorial? https://facebook.github.io/react/docs/tutorial.html https://facebook.github.io/react/docs/tutorial.html
  • livus 10y ago
    React and Angular can get very confusing for a first timer in front end. The official tutorials leave out a lot of magic happening behind the scenes. I tried to complete the official angular tutorial and even after completing it, though I could build an app, I still didn't feel confident that I had a good understanding of Angular.
• tyingq 10y ago
  I suspect part of the rub is that with react being only the 'V' in MVC, stand-alone tutorials leave you with only part of the picture. And, of course, people are choosing different paths to fill in the rest of the stack. All of which pull your specific 'style' of using react in slightly different directions.
  • vinhboy 10y ago
    I tried React about a year ago and this is how I felt. It was hard to understand how to incorporate React into an existing framework (Rails), because JSX was odd and I felt like I had to rewrite/rethink everything "V" related.
  • dcwca 10y ago
    You're halfway there, because React is the V but there's no MVC. That design pattern isn't common in the ecosystem, and instead a functional, unidirectional design pattern called Flux is a better fit. Searching for MVC trips a lot of developers up.
    • tyingq 10y ago
      >>and instead a functional, unidirectional design pattern called Flux is a better fit. And how many different frameworks are in common use to implement that pattern? :) Edit: Also notable the the 'V' in MVC line comes from React's home page.
• avalexandrov 10y ago
  I am using this one and like it very much so far: http://courses.reactjsprogram.com/courses/reactjsfundamentals/ http://courses.reactjsprogram.com/courses/reactjsfundamental... It's by Tyler McGinnis.
  • peternicky 10y ago
    I am working through Tyler's free tutorial and so far have enjoyed it.
  • josefdlange 10y ago
    +1 for Tyler and his courses. There's something great about the way he presents the knowledge I can't quite put words to. He manages to "pull back the curtain" just enough to satisfy my curiosity without allowing me to go down a tangent path of little details that contextually don't matter until later. His frank demeanor instilled a lot of trust in me from the get-go, as well, which in turn left me satisfied when he says things like, "that doesn't matter right now -- we'll get back to that when it's important." Usually in tutorials or classes it's either high or low of that mark -- either I don't believe I will end up learning about some hidden principle that ends up being important, or I'll have way too much depth dumped on me and I'll be lost.
• prezjordan 10y ago
  Surprised this one hasn't been mentioned yet! http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ http://reactfordesigners.com/labs/reactjs-introduction-for-p... Full of graphics and nice examples - it covers a lot of the reasons folks find react so fun to work with. As a pro-tip: there is a lot of tooling, and things move quickly so a lot of examples on the web get outdated FAST. Don't be discouraged - it can be rough.
• markm248 10y ago
  ReactJS for Stupid People is an excellent place to start: http://blog.andrewray.me/reactjs-for-stupid-people/ http://blog.andrewray.me/reactjs-for-stupid-people/
• brucehauman 10y ago
  I wrote an intro to React that emphasizes it's functional/reloadable nature. http://rigsomelight.com/2015/06/09/straightforward-live-functional-javascript-building-the-yome-widget.html http://rigsomelight.com/2015/06/09/straightforward-live-func...
• wesbos 10y ago
  I'm the author of http://ReactForBeginners.com http://ReactForBeginners.com I've had 4500 people take it so far and have had tons of positive feedback - take a look!
  • owenwil 10y ago
    I can recommend this course!!
  • joshschreuder 10y ago
    Great course, worth paying for IMO. There is also a Slack channel where people can answer any questions you have.
  • innocentoldguy 10y ago
    I highly recommend this course. I think Pragmatic Studio produces some of the best, highest-quality tutorials online for Ruby, Rails, and Elm. React For Beginners is not a Pragmatic Studio production, but they do endorse it, and it definitely falls into that same category of quality and excellence.
• Brajeshwar 10y ago
  I second the egghead.io video tutorials (paid). My team spent about a week and we're using ReactJS as our view for a Progressive WebApp for an eCommerce site in India.
• brudgers 10y ago
  The Code Cartoon guide to Redux isn't a tutorial, but it may be useful for understanding the Redux architecture that underpins React. https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.y0fq06c2o https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab2...
• cornedor 10y ago
  This one explains the ideas behind React very good imo. It does this by creating "Bloop" a library that kinda works likes React without stuff like the Virtual DOM. http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome http://jlongster.com/Removing-User-Interface-Complexity,-or-...
• lambdacomplete 10y ago
  Has anybody tried this? https://www.udemy.com/react-redux/ https://www.udemy.com/react-redux/ Is it worth the money?
  • dinosaurs 10y ago
    I'm subscribed to both of his Redux courses and they're amazing value for the money. Not affiliated, just a happy student.
  • marcogomesr 10y ago
    I got a coupon code 50% OFF - http://tinyurl.com/jrm25ms http://tinyurl.com/jrm25ms
• darklajid 10y ago
  Not affiliated, but I subscribed to Stephen Grider's courses on Udemy and I'm quite happy with those.
  • zpalin 10y ago
    Agreed. I recently took these as an intro into Redux. Really well done courses.
  • rahimnathwani 10y ago
    Also agreed. His courses are awesome, and he takes care to explain things right the first time, rather than relying on repetition.
• owenwil 10y ago
  I can only recommend two: - The official Facebook React tutorial. It might be unsexy, but hell it's good. In fact, it's the best official documentation I've ever seen: https://facebook.github.io/react/docs/tutorial.html https://facebook.github.io/react/docs/tutorial.html - React for Beginners. The only screencast that didn't make me want to fall asleep – worth every dollar: http://reactforbeginners.com http://reactforbeginners.com
  • derekja 10y ago
    Fully agree. React for beginners was great.
• ludwigvan 10y ago
  Here is my take on the subject: https://github.com/ustun/reactjs-introduction https://github.com/ustun/reactjs-introduction There is a video at https://www.youtube.com/watch?v=NSeurgO39Hk https://www.youtube.com/watch?v=NSeurgO39Hk if you are interested.
• seanemmer 10y ago
  I highly recommend the Full Stack Redux Tutorial: http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial... Learning Redux from the get go means you can skip a lot of React's internal state management / lifecycle methods. The tutorial also covers a bunch of relevant topics like TDD with React, immutable.js, and socket.io.
  • shriek 10y ago
    I'm doing that right now. One bit that was a bit confusing and I don't know if this is relevant place to be asking is on "Moving to The Next Pair" section. Like how do I know if it's okay to move to the next pair? Because in core.js it seems to pick a winner of the pair as soon as it's called. (It probably talks about this further down but this kind of threw me off) Other than that you're right. It's one of the complete tutorial that makes TDD actually enjoyable. However, that has mostly to do with how redux and immutability has been used in the tutorial.
    • seanemmer 10y ago
      I was a bit confused by this as well. Later in the tutorial, you will build a separate "Results" view that shows the tally of the current vote and lets you manually move to the next vote by triggering the 'Next" Redux action. Hope that helps. Also for those interested in more on Redux, there is an excellent Getting Started tutorial by Dan Abramov (its creator) on egghead.io: https://egghead.io/series/getting-started-with-redux https://egghead.io/series/getting-started-with-redux
• hardwaresofton 10y ago
  tldr; Don't treat backend and frontend the same, they have very different concerns, also learn the things that came before frameworks, and why they were useful/included in frameworks to begin with. While your intended backend and frontend are both javascript, they have very different concerns. I suggest you learn them in as much isolation as you can, before attempting to mix the two. I would highly recommend that you do NOT start from learning react. React is a line in a very long story that the JS community has been living. Please strive to understand how that story started, and where react fits in, and what methodologies are being used in the libraries/frameworks that are popular today. Rather than starting with and binding yourself to react, I'd suggest you start with the minimum you need, and progress to different libraries as you need them, and realizing the actual need/niche for frameworks. A progression might look like this: 1) HTML+CSS+JS - Basic static, well designed pages 2) HTML+CSS+JS+jQuery - 1) + simple interactions on the page, note that too much jquery will quickly become hard to reason about 2) HTML+CSS+JS+Databinding - 1) + declarative databinding (with a framework like Knockout) will introduce some structure into DOM updates over the jquery approach 3) HTML+CSS+JS+Databinding+Routing - 2) + a realization that knockout generally aims to work on one page at a time, but obviously sites have many pages, and SPAs can be beneficial in delivering instant-feeling user experience. 4) HTML+CSS+JS+Databinding+Routing+Components - 3) + realizing the need for separation and isolation between components to keep your sanity (both knockout.js and react offer components) 5) HTML+CSS+JS+Databinding+Routing+Components+Data - 3) Handling data from the server is obviously important, backbone has an oft-praised model system, and you could also flux pattern since you're interested in react. 5) Framework ? At this point, including x libraries to do all the things that you have found make your life easier may be less preferable to using a framework. Of course, this means you'll have to deal with the cognitive overhead of a framework but at this point, you should know exactly WHY you are using a framework, and start to distinguish the difference between how different frameworks bundle the parts. Ex. the distinction between how knockout.js does databinding, how react does it, and how angular1 does it. Ex. The difference between react's rendering methodology and backbone's (they both use a render function to determine what will be shown -- how is react different?) I might suggest redoing a small app like TodoMVC with all these options (you can change it up by styling the frontend differently every time or something), I think a process like that leads to a more well-balanced understanding of frontend JS.
• acemarke 10y ago
  I maintain a list of high-quality React and Redux-related tutorials over at https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links. It's specifically intended to be a great starting point for anyone trying to get started learning the React ecosystem.
• paulshen 10y ago
  http://andrewhfarmer.com/getting-started-tutorials/ http://andrewhfarmer.com/getting-started-tutorials/ has a list of tutorial reviews. I'm the author of http://buildwithreact.com/tutorial http://buildwithreact.com/tutorial, which Andrew says "is by far the shortest tutorial and the easiest read" :) Happy to answer any questions on twitter.
• gauravgupta 10y ago
  My usual go-to website for tutorials: http://hackr.io/tutorials/react http://hackr.io/tutorials/react
• daram 10y ago
  Here's my comparison of React.js Fundamentals by Tyler McGinnis, and Learn React.js: The Basics, on Lynda.com. https://adtmag.com/blogs/dev-watch/2016/04/react-tutorials.aspx https://adtmag.com/blogs/dev-watch/2016/04/react-tutorials.a...