38 ms·

React Tutorial: Cloning Yelp

521 points by jashmenn 10y ago

ErikAugust 10y ago
We (Stream) are releasing a React/Redux tutorial series - you build a photo sharing app (Instagram clone), for those you might be interested: http://blog.getstream.io/react-redux-example-app-tutorials-preview/ http://blog.getstream.io/react-redux-example-app-tutorials-p...
- bdcravens 10y ago
  This link has no content - looks to be like a "coming soon, give us your email for updates!" page
  - ErikAugust 10y ago
    Fair enough - but we're releasing 4 posts next week. We have a total of ten completed and in the pipeline.
    - bdcravens 10y ago
      Probably worth a separate submission at that time. I guess you'd don't want to miss all the eyeballs talking about this React tutorial however, right? :-)
      - ErikAugust 10y ago
        Yeah, agreed. But yeah, after all the writing we were eager to get something out, haha.
showerst 10y ago
This is a really great tutorial, it's rare to find pieces that step you through the whole process with dev/prod and tests without assuming you already understand the arcane setup. It also shows what an arcane dependency-hell react is... how much boilerplate does it take to get up a map with a valid route? I hope this is something that becomes a bit more standardized/easier as the ecosystem evolves.
- deleted 10y ago
  [deleted]
eterm 10y ago
To me this epitomizes what I feel as I'm trying to explore options for different front-end frameworks. In this article I'm 30 screens down (literally 30 page down presses) and it's not even finished setting up the environment and dependencies. Sure, this is something that you only do once, so if it then leads to much better development workflow it makes sense to have a solid investment upfront, but it makes it very hard to compare technologies and make informed decisions given how much up-front "glue" is needed to get a demo application up and running. I'm not blaming react, everything else in the javascript space is just as bad right now. There's at least 4 different ways of loading modules (UMD, AMD, commonJS, es (babel) modules), 2 of which (require(), import .. from) are used within this example. In fact the whole process is so complex part of the process is "clone this package which has pre-configured parts of the process". And all of this to glue together a couple of APIs.
- Omnipresent 10y ago
  Is Angular2 any better in terms of dependency hell since it provides a full stack front end solution?
- sotojuan 10y ago
  This is a pet peeve of mine when it comes to React tutorials. Why waste so much time making the user set up a dev environment? Just give him/her a prebuilt and "black boxed" environment and get on with learning React (what they actually want to do). I've seen plenty of people give up because they couldn't get their webpack set up right. Also, for those making courses, consider just using browserify. It's much easier on the newbies. > I'm not blaming react, everything else in the javascript space is just as bad right now. Not Ember! A great example of a blackboxed, prebuilt build system that gets out of the way.
  - enraged_camel 10y ago
    >>This is a pet peeve of mine when it comes to React tutorials. Why waste so much time making the user set up a dev environment? Just give him/her a prebuilt and "black boxed" environment and get on with learning React And yet one of the most common criticisms of Rails is that it's too black-box and has too much "magic." So you're damned if you do, damned if you don't.
blueside 10y ago
The setup required just to get a production-ready idiomatic `hello world` app in React is downright insane. Without the Facebook name behind it, I don't see how React could have ever made it this far. Foolish of me to keep underestimating the pains that JS developers willingly tolerate.
- firasd 10y ago
  The problem is that there isn’t really such a thing as an “idiomatic React app”. React is just a view-rendering layer with a small API. You have to put together all the other pieces of your application stack…
- deleted 10y ago
  [deleted]
- zxcvcxz 10y ago
  Your comment is wildly uninformed. https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a
  - claar 10y ago
    I don't think it's fair to call his comment uninformed based on that link. From your gist: For ease of use, we are including the React, ReactDOM and Babel CDN builds to make getting started as fast as possible. In production, you'll want to instead look at using something like Gulp, Grunt or WebPack (my personal recommendation) to compile JSX into JavaScript. Also, check out: http://facebook.github.io/react/docs/tooling-integration.html He did specify "production-ready", after all.
- civilian 10y ago
  The way you're talking suggests you're not a JS developer, so I'm discounting your opinion on JS topics to zero.
pjs_ 10y ago
This genuinely made me feel ill. The author has done a tremendous service to others - clearly and patiently listing the thousands of steps required to get a basic modern web app up and running. I agree with others that it is often difficult to find all the steps for a process like this in one place. At the same time, this is completely, totally fucking insane.
- ryanSrich 10y ago
  React was built by Facebook. Facebook has 1 billion users. If you're looking to build a fast, simple, web app look at rails or Phoenix, not React.
  - zxcvcxz 10y ago
    What's wrong with react? If it's good enough for facebook and good enough for the hundreds of other high traffic sites, then it's good enough for me. Of course I also like to stay employed and react is the most in demand framework right now.
    - ryanSrich 10y ago
      Sorry, I should have been more clear. What I meant was that your web app will never be as complex and resource demanding as Facebook. The reason why React is so complex is because it's intended for complex systems. If you want to quickly build a one off web app you shouldn't be using React imo. The length and complexity of this tutorial is a testament to that.
      - lopatin 10y ago
        React is simple, not complex. Simplicity is like the main benefit of using React if your intention is to build a single page app. If that's not what you need, then yeah, use Rails.
        ryanSrich 10y ago
JoshGlazebrook 10y ago
Am I the only person who just doesn't get the appeal of Webpack over using something like Gulp? It just seems to me like Gulp is so much easier to use and setup.
- dsego 10y ago
  Webpack does a lot more. Gulp is just a glorified (and cross-platform) make.
  - JoshGlazebrook 10y ago
    I guess I meant more from a ease of use point of view. Gulp/Grunt are easier to configure and get going.
    - dsego 10y ago
      Not that I have too much experience with either. But one example is having one webpack configuration with misc. loaders vs. reinventing it yourself and ending up with this mess: 1) You still get a config file, neat right https://github.com/mgechev/angular2-seed/blob/master/tools/config/seed.config.ts https://github.com/mgechev/angular2-seed/blob/master/tools/c... 2) And this boilerplate https://github.com/mgechev/angular2-seed/tree/master/tools/tasks/seed https://github.com/mgechev/angular2-seed/tree/master/tools/t...
    - hokkos 10y ago
      With gulp you rewrite webpack in every project. no thanks.
- kevindeasis 10y ago
  Webpack is amazing. You can even use Gulp with Webpack. Both are not identical tools.
  - kuon 10y ago
    I just discovered brunch and it works well for me.
troncheadle 10y ago
I have something VERY similar to this in production built with Angular, and let me tell you, I'm looking forwards to the day that I get to refactor it in React. I get that it's frustrating to do a lot of setup. But that's the nature of the game. We're all standing on the shoulders of giants. React is a pleasure compared to other ways of conceptualizing and practicing building user interfaces on the front end.
ahhsum 10y ago
This looks awfully close to python. Is that true, or am i imagining things?
- tschellenbach 10y ago
  That was what I thought :)
Cyph0n 10y ago
Great work on the tutorial. I'm sure it took a lot of time to setup, and it seems well written. However I simply won't believe that setting up a simple React app requires so much overhead. Granted, I have no experience with React, and only marginal experience with frontend web dev. As I read the tutorial, this is the list of questions I had: 1. Why do we need so many Babel presets? What do they do? 2. Why do we need Webpack exactly? Why not use a traditional build system like Gulp? 3. Why is Webpack so difficult to setup? Are there no pre-configured setups for React? 4. What the hell is postcss? Are Less and Sass out of fashion now? 5. And why all this added complexity to setup CSS? They are only stylesheets for God's sake! 6. Oh, so now we need to configure Webpack to support postcss? The definition of reinventing the wheel. Is there no plugin system for Webpack? 7. Why is it so complicated to setup multiple environments using Node and Webpack? Phew, looks like we're done -- nope, we're not. 8. So many libraries just to setup a testing environment? I wouldn't be surprised if frontend apps aren't well tested... 9. Ah, we also need a "JSON loader", whatever the hell that is. 10. Great, another CLI tool for testing. And more configuration of course. 11. Webpack once more needs to be configured to support our new testing app. 12. We need a better spec reporter? Why? More configuration... 13. More Webpack configuration.. I'm already sick of it. So many things to keep in mind, so many dependencies, so very many points of failure. If just one of these libraries is abandoned, or has a breaking change, your entire development environment is dead. Is this the current state of frontend web dev, or are these guys just overdoing it for the sake of the tutorial? I find this all weird because I have the habit of thinking very carefully about every single dependency when I'm writing software. Do I really need it i.e. can the same task be achieved using the standard library? If not, how active is the development of the library (recent activity, issue response time, number of contributors)? How many libraries does it depend on - the fewer, the better? And even with all this, it's still not guaranteed that things will go smoothly!
- juddlyon 10y ago
  Exact same feeling here, well put. I recently started Tyler McGinnis' excellent React.js Fundamentals and the entire first section of the course is setting up Webpack, Babel, etc. Once you're set up there, then you need to decide how you'll handle routing, AJAX - and so on. The older I get the more I hate third party dependencies. You're asking for trouble.
tschellenbach 10y ago
More tutorials coming up soon: cabin.getstream.io
- bdcravens 10y ago
  Is your site associated with this one? If not this comment seems very out of place.
  - k__ 10y ago
    Well, people are talking about React and React tutorials here. Everyone has a different approach to teaching and learning, so this is a good place to share :)
    - bdcravens 10y ago
      Yes, we're talking about tutorials here, not "coming soon but sign up for my email list" pages :)
swanson 10y ago
I'm no Javascript Boilerplate Fatigue apologist, but there are many comments in here that are treating this as a "Learn how to use React" tutorial. This is not what is advertised nor the stated reason this article was written. From the first sentence: "we get a lot of questions about how to build large applications with React and how to integrate external APIs" Large application strucutre, external integrations...not "Hello World" Of course there is no need for multiple environments, or a robust testing setup, or an icon font, or 6 different webpack loaders to learn the basics of React. This is not a tutorial on the basics of React -- this is written from the perspective of a large production level application. And that "overhead" and "insanity" are helpful for real projects that are staffed by more than one person and need to last more than a week. It seems absurd that it might take you 2 hours to setup the environment before you get to hello world. But if you are planning to use this as the foundation of a 6 month long project, 2 hours to get everything setup in a sane way is not an issue. There is absolutely churn in the JS world and some of it does seem unbelievable because things haven't contracted and settled into a steady-state. But don't just levy a blanket "lol fuck javascript tooling" every time you see a complicated setup process; you are doing yourself a disservice by not critically evaluating the choices the author of this post made and determining for yourself if they will benefit your project and/or learning efforts.
- MatthewPhillips 10y ago
  A large setup cost discourages you from creating many small projects; from creating experiments that may/may not pan out. This is why the browser/text editor flow of development will (eventually) win out. Hopefully people working in these toolchains are at least using some boilerplate projects or generators that cover 90% of cases.
- fbonetti 10y ago
  The problem with the massive amount of churn is that it just doesn't pay off to learn the new, cool thing when it's going to be obsolete in 3 months or less. I think all programmers, especially ones who read HN, like to learn new things. It's fun to pick up new languages, learn new paradigms, and experiment with different technologies. What's not fun is learning 10 different ways to handle promises, 4 different build tools, several frameworks, and dozens of new libraries over the course of a year just to keep up. By the time you reach a level of mastery over one of these tools, it's already been replaced by something else! I mean it's great that the tools are getting better, but it's really painful to deal with the constant churn. /rant
morgante 10y ago
People should stop complaining about how "hard" it is to get started or how "complicated" React is. React is simple. Its core abstraction is trivial (making views into pure functions). If you want to, you can get started with React today without installing any software at all. Just include it from the CDN: https://cdnjs.com/libraries/react/ https://cdnjs.com/libraries/react/ The rest is there because things like live-reloading are genuinely helpful. But you don't need to roll them yourself. There are dozens of great boilerplates you can base a new project off of. Also, I've never had as much difficulty setting up a React environment as the constant struggle it is to get even a basic Java app to build from source.
- deleted 10y ago
  [deleted]
- gedy 10y ago
  The React ecosystem for developing non-trivial apps is not at all easy and rather complex. Both for new developers and experienced web folks to relearn "the React way".
freyr 10y ago
All this effort to create a single page app that likely doesn't need to be a single page app in the first place. If you're jumping through hoops to build an app that looks and feels like a traditional web site, you're doing it wrong.
kpwagner 10y ago
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.fullstackreact.com%2Farticles%2Freact-tutorial-cloning-yelp%2F&tab=mobile https://developers.google.com/speed/pagespeed/insights/?url=... Yikes.
hammeiam 10y ago
I also got frustrated by the setup time for a simple react app, so I make a starter repo that I just clone for all my new projects. It's made to be as simple, light, and understandable as possible while still being useful. Check it out and let me know if you have any questions! https://github.com/hammeiam/react-webpack-starter https://github.com/hammeiam/react-webpack-starter
- missing_cipher 10y ago
  I like it. Thanks!
hathawsh 10y ago
The complexity of this tutorial reflects the current state of web app development more than the complexity of React. React by itself is actually rather simple on the surface. Even though I don't need this tutorial to be productive, I think I'm going to go through it anyway to fill in holes in my knowledge. It looks well written.
- deleted 10y ago
  [deleted]
arenaninja 10y ago
I haven't finished reading, but so far this is an excellent walkthrough. This goes far far FAR beyond the 'Hello World' and 'TodoApp' tutorials and demos the amount of tooling you have to dedicate to keep things as seamless as possible. I recently wrote that in a side project it does not appear to be worth the effort, but that applies to my side project and nothing else. Your next project may well look a LOT like this.
bdcravens 10y ago
I know there's a lot of dog-piling on this tutorial, but having gone through fullstack.io's Angular 2 book, if I wanted to learn React, I'd probably (and probably will) go with their title.
sergiotapia 10y ago
Meanwhile here's how you work with React in a Meteor application. https://github.com/nanote-io/nanote-web https://github.com/nanote-io/nanote-web No need to mess around with plumbing because honestly, who cares about that stuff.
- Scarbutt 10y ago
  But who cares about meteor? It failed, let it go.
  - drumttocs8 10y ago
    What makes you say it failed?
    - Scarbutt 10y ago
      https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/ https://www.discovermeteor.com/blog/the-state-of-meteor-part...
      - drumttocs8 10y ago
        Sure- that's the article I was thinking about when I mentioned that it faltered. It still has quite the dedicated base, and with 1.3, has corrected many of the complaints (npm support, etc)
  - sergiotapia 10y ago
    Failed how? A lot of startups and enterprise companies are using it now, with more to follow once Apollo launches.
    - Scarbutt 10y ago
      https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/ https://www.discovermeteor.com/blog/the-state-of-meteor-part...
drumttocs8 10y ago
I think most everyone agrees that the amount of work to get all these pieces glued together before you can even start is ridiculous- a problem that Meteor set out to fix years ago. It faltered, of course, by being too opinionated. Now that Meteor fully supports React and npm, though, is there any reason not to use it? Sure does remove some pain points.
- patrickbolle 10y ago
  only thing left for Meteor is the release of Apollo !
- sergiotapia 10y ago
  No real reason as of now, you can choose to not use MongoDB if you want and use Meteor as just the front end. When Apollo comes out, RIP all these React boilerplate projects, you're going to be able to pick and choose the data stack you want with Meteor making it nice to use.
zxcvcxz 10y ago
Lots of complaining but no one offers a better solution. Any article detailing how to build a yelp clone is going to be kind of long. It's really not that bad compared to doing something like this with LAMP. Much simpler than Angular too. With Angular I feel like I have to re-learn web development and do everything the "angular way", and who knows when Angular three is coming out and the "Angular way" completely changes. And then what are the non-javascript alternatives? It really doesn't matter much because I'll have to interface with javascript anyway if I'm a professional webdev, so why would I add even more clutter to the already cluttered web dev world? With React, I can learn a small framework that's highly extensible and basically pure javascript. I don't feel like I have to re-learn everything I know about web-dev when using react like I do with Angular.
- carsongross 10y ago
  Here's a non-javascript javascript alternative that's a few orders of magnitude simpler: http://intercoolerjs.org http://intercoolerjs.org
tonetheman 10y ago
Interesting... he needs to include his webpage config from each stage. He linked the full one but that will not work when you are still in the starting parts.
k__ 10y ago
If you want to look into React, but aren't in the mood for all the setup: https://github.com/kay-is/react-from-zero https://github.com/kay-is/react-from-zero
- blunatic 10y ago
  This is really great, thanks for posting!
int_handler 10y ago
The cover of this book is very a e s t h e t i c.
dandare 10y ago
There is something wrong with me but I can not/refuse to use command line. It has no discoverability and no visible system state information. Every time I try to use it I start to panic because I can not see my files, I can not see the state of my task, I can not see anything. Maybe I have some form of dyslexia. Anybody out there with similar symptoms? Anybody knows a remedy to my problem please?
- callalex 10y ago
  I would start with using a better shell that gives you more of the context you are asking for. I would recommend zsh and using Oh My Zsh for easy setup
eagsalazar2 10y ago
The criticism here is really baffling in how it blames the js ecosystem for the complexity in building large production apps.. I wouldn't find fault with a similar tutorial for "how to set up a production, at scale, rails app with only sever side rendering and zero javascript". Between hosting, cacheing, deployment, worker queues, database provisioning, etc, LOL that tut would be gigantic and that makes sense! If people are mad that making production client side applications isn't trivially easy, well that just isn't going to happen and that isn't because the js ecosystem is screwed up.
- zxcvcxz 10y ago
  There are two types of web developers: 1. Those who know javascript and some major framework 2. Those who are unemployed Yes we can build apps with just HTML and CSS and put it all in one file and serve it with a one line command, but if we want to be employed and have a website that actually scales we need to follow in the foot steps of the people who have done it.
nijiko 10y ago
All of that, for that simple demo...
- missing_cipher 10y ago
  Simple Demo: https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#demo-basic-appjs https://www.fullstackreact.com/articles/react-tutorial-cloni...
rvanmil 10y ago
I've been on the fence for quite a while, but a couple of weeks ago I finally bit the bullet and taught myself webpack, ES6, React, CSS modules, Redux, and everything else that comes along with these tools. It definitely felt like relearning my job (coming from working with Grunt, Backbone and jQuery) and it took a lot of time and effort to really get to understand everything (still learning many new things each day), but man was it worth it. I enjoy working with these tools very, very much and I am able to build apps significantly faster than I could before.
- duderific 10y ago
  > a couple of weeks ago I finally bit the bullet and taught myself webpack, ES6, React, CSS modules, Redux, and everything else that comes along with these tools Can you share how you did that? Was it a number of different resources you consulted, or is there some all-in-one resource you found?
  - rvanmil 10y ago
    These resources have been very helpful to me: http://survivejs.com http://survivejs.com https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links https://github.com/HenrikJoreteg/hjs-webpack https://github.com/HenrikJoreteg/hjs-webpack
    - acemarke 10y ago
      Yay! Very glad to hear that my React/Redux links list has been helpful. Currently working on trying to add in some more intermediate-ish topic articles, beyond the typical "getting started" tutorials.
pacomerh 10y ago
Cool tutorial, but first check if React is what you really need for your next thing. Facebook creates React to solve the problem of dealing with large applications with data that changes overtime. React became very popular to the point where the word gets spread saying this is the newest and coolest thing to learn. At this point the core idea and key aspects of why React is cool get misunderstood and we start assuming that React is the best choice for everything! and Virtual DOM is so cool and done!. So now apps that could be done in 1/3 of the time if you just used a simpler library or even vanilla Javascript are being written with all these complex flows, dispatching actions and thunking async operations when all you really needed was display a list of things with ajax...... I'm not saying React is not cool. I'm just saying, understand why React is relevant today and decide if its the right thing for you project. Of course these tutorials are gonna be using simple examples that are unrealistic. They're meant to help you understand how things connect with each other, but are you building a project that is worthy of all this setup?.
- zxcvcxz 10y ago
  The cool thing about react is that it doesn't try to do everything. Compared to Angular react is minimalist. So that's why react is used so much: because it doesn't try to do everything, it's basically just javascript and doesn't require you to re-learn web dev, and if you want to extend it you can easily do that. React can be made to fit most needs. If all you're doing is serving a static web page then any framework is over kill, but then again, if all you're doing is serving static web pages you probably aren't a paid professional web developer. To be a web dev professionally you need to know some framework, and react is really the best one. Angular tries to do too much but still makes you implement everything "the angular way" and meteor isn't a good framework for companies that want mix and match different technologies on their stack. Then there are other alternatives that are non-javascript based, but in the end you still end up having to use javascript somewhere most of the time. Why take all the nastiness from the web-dev world and add even more convolution to it? React isn't perfect but it's the best we have. And this is coming from someone who hates facebook and was once an angular dev.
  - marknutter 10y ago
Scarbutt 10y ago
yes, your problem seems to be learning by banging the keyboard like a monkey which you inherited from clicking like a monkey to get a mere sense of how to use something instead of reading some upfront documentation.
- dang 10y ago
  Personal attacks are not allowed on HN. We ban accounts for doing this, so please don't do it again. Instead, please (re)-read the site guidelines and comment civilly and substantively, or not at all. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newswelcome.html We detached this comment from https://news.ycombinator.com/item?id=11781593 https://news.ycombinator.com/item?id=11781593 and marked it off-topic.
keyle 10y ago
I've dealt with many technology stacks. If this is the future, we're F#$$%. Seriously, how can people be blasting older technology like Flash and Flex (which was GREAT), out of the water for not using web standards and then this Frankenstein of a "stack" is going so mainstream. Sure, there is the VM problem, but the language was good and so was the framework. This looks horrendous and scary. Imagine maintaining this for the next 10 years when "the standards" will have moved on to you "next gen" javascript "framework". My only way to write web apps has been using micro frameworks, jquery, and small libs that do one thing and one thing only. I can handle serving pages with Go thanks, and I don't need a routing system that looks like a vintage joke. Sorry if I sound jaded, I've been doing this for 15 years.
- zxcvcxz 10y ago
  Can you post one of your projects?
  - keyle 10y ago
    I currently work for large company (in Fortune 100) and behind NDA, I can't really show my stuff. But it's good work. I wrote my own data binding library, beyond that, it's all micro libs. What's your point?
- throwanem 10y ago
  This isn't mainstream; it's barely behind the bleeding edge. Mainstream is Express, Angular 1.5, and Browserify, and you can have it up and running in five minutes, maybe fifteen if you don't have Node installed.
- dwaltrip 10y ago
  You should check out http://mithril.js.org/ http://mithril.js.org/. It's been around for a few years, it's very lightweight with a small API, not opinionated, and surprisingly powerful. It doesn't have all the wiz bang gadgets right of the box, but it provides the fundamentals you need for a well designed, full-fledged frontend app. I've enjoyed using it a lot the past few months on a few small projects, and I'm also using it for a larger project that I've just started working on. Oh also, I haven't even bothered with a build tool or anything yet (I find the current js build tool landscape rather dismal). Turns out it is surprisingly easy to get by with <script src="..."> lines into index.html for smaller/mid-sized apps =) The only thing I've really missed so far is SASS.
qudat 10y ago
I've built a multitude of websites/applications in my lifetime spanning many different programming languages, build systems, tools, etc. From PHP, to python, to golang, to java, and JS. It seems painfully obvious to me that the people complaining about this setup/build system do not fully grasp the power and beauty of the JS ecosystem, more specifically react, redux, time traveling, and hot module reloading. It is without competition, the best development experience I have ever had been apart of. There is no lag time between when I make a change in JS or CSS to when those changes get applied to the application. There's no compiling (even tho there is a compile step), no refreshing the page, no stepping through all your previous steps to get to that part of the application, your changes are patched in real time and available to you automatically. I guess the saying is true, that haters are going to hate, but there really is no competition in terms of development experience once you grok the ecosystem.
missing_cipher 10y ago
I don't understand what people are saying, the basic Hello World App is right here: https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#demo-basic-appjs https://www.fullstackreact.com/articles/react-tutorial-cloni... Like 1/15th of the guide down.
la6470 10y ago
We need RADDDD (Rapid Application Development) !!!!
zeemonkee3 10y ago
The anger in this thread does not bode well for the future of React. I predict big, complex, arcane React stacks will be a punchline in a few years, much like J2EE/EJB is today. And yes, I know React itself is a small library - Java servlets were a small, simple API that formed the foundation for a ton of over-engineered abstraction on top.
deleted 10y ago
[deleted]
gt384u 10y ago
ITT: People who don't React well to critical feedback from new users
mickael-kerjean 10y ago
That's quite funny, I've spent the last few days achieving pretty much the same thing but with Angular2. If some people are interested about it I might write a few things about it as well
chrishn 10y ago
Not React specific, but how do we tackle SEO for a site like Yelp, where SEO is very important? I want to turn an article-based site into a SPA, so it can consume a stateless API and horizontally scale. But I fear it'd lose a lot of pages in Google.
- firasd 10y ago
  React can render on the server side using the initial app state. Couple examples: (1) https://github.com/mhart/react-server-example https://github.com/mhart/react-server-example and (2) This article from me: https://medium.com/@firasd/quick-start-tutorial-universal-react-with-server-side-rendering-76fe5363d6e https://medium.com/@firasd/quick-start-tutorial-universal-re... (Previous discussion: https://news.ycombinator.com/item?id=11461159 https://news.ycombinator.com/item?id=11461159)
jyriand 10y ago
I wish somebody with clojurescript/reagent experience would rewrite this to see how it compares.
kelvin0 10y ago
Is it me, or does the JS tool ecosystem have the same problems encountered in some functional language frameworks (LISP for example)? I'm not comparing the languages here (I'm not a fan of JS), but how they are lacking the 'Batteries' and toolsets other languages have grown up with. Since you can do practically anything with JS (or LISP), if something is lacking simply write your own solution ... repeated 1,000 times. This is why there seems to be a gazillion tools/solutions/framework each doing something similar but different enough to cause massive confusion to newcomers. This is one of the reasons DART had appealed to me, the language came with a framework and tools that helped you get started right away, instead of getting bogged down trying to figure if you should used Webpack or it's numerous alternatives.
mobiuscog 10y ago
May I just thank you for: a) providing an estimate of the time it will take and b) offering a simple way to receive it in PDF format for later consumption. I wish every site did this.
rvdm 10y ago
First off. Great tutorial! I wish more frameworks their native documentation would come with more real world examples. Redux's fantastic documentation is a step in the right direction but still makes real world solutions a bit too much of a side note. Regarding Javascript fatigue, I want to share something that greatly helped me. I have written enterprise applications for Fortune 500s using PHP, Rails, Backbone, Angular, React, Node, Express, Grunt, Gulp, Webpack, Yeoman, Bower, Redux, jQuery, Coffescript, Prototype.js ( remember them!? ), LESS, SASS... Basically whatever was hot at the moment. Long I've enjoyed learning new things, but after having made a solid investment in Angular only to find out none of it's SEO solutions were really commercially viable the fatigue hit me hard and I gave up on trying to learn new things for a while. I simply stopped caring. Then I got approached by SpaceX for a JS full stack position. All they told me about the interview beforehand was that it would be very JS heavy, yet no details on what stack or framework they were working with. To prep I brushed up hard on my basic JS skills. Codeschool.com their JS road trip was very useful. So were "Eloquent JavaScript" and "JavaScript: The Good Parts". After making that tough but very rewarding investment, learning React, Flux, Redux, Elm etc. all became a breeze. I no longer have any attachment to any framework. They're all just different ways of using JS to me. And no matter what the future brings, no matter how many frameworks and build tools get thrown our way, I don't think ( hope? ) my heavy investment in Javascript will soon disappoint. So for those of you out there trying to figure out what to invest in next, React, Elm, RxJS.. My advice would be to get a deep understating of pure Javascript first. Ideally, try to build your very own framework using vanilla JS. Once you do that you'll find each new framework is just a different opinion on how JS should be used. Many frameworks have come and gone. But after more than a decade of investing in the Javascript language, it keeps rewarding.
deleted 10y ago
[deleted]
gauravgupta 10y ago
Fanatastic work - Pushed to hackr.io also. http://hackr.io/tutorial/building-a-yelp-clone http://hackr.io/tutorial/building-a-yelp-clone

521 points by jashmenn 10y ago

We (Stream) are releasing a React/Redux tutorial series - you build a photo sharing app (Instagram clone), for those you might be interested: http://blog.getstream.io/react-redux-example-app-tutorials-preview/ http://blog.getstream.io/react-redux-example-app-tutorials-p...

bdcravens 10y ago
This link has no content - looks to be like a "coming soon, give us your email for updates!" page
- ErikAugust 10y ago
  Fair enough - but we're releasing 4 posts next week. We have a total of ten completed and in the pipeline.
  - bdcravens 10y ago
    Probably worth a separate submission at that time. I guess you'd don't want to miss all the eyeballs talking about this React tutorial however, right? :-)
    - ErikAugust 10y ago
      Yeah, agreed. But yeah, after all the writing we were eager to get something out, haha.

showerst 10y ago

This is a really great tutorial, it's rare to find pieces that step you through the whole process with dev/prod and tests without assuming you already understand the arcane setup. It also shows what an arcane dependency-hell react is... how much boilerplate does it take to get up a map with a valid route? I hope this is something that becomes a bit more standardized/easier as the ecosystem evolves.

deleted 10y ago
[deleted]

eterm 10y ago

To me this epitomizes what I feel as I'm trying to explore options for different front-end frameworks. In this article I'm 30 screens down (literally 30 page down presses) and it's not even finished setting up the environment and dependencies. Sure, this is something that you only do once, so if it then leads to much better development workflow it makes sense to have a solid investment upfront, but it makes it very hard to compare technologies and make informed decisions given how much up-front "glue" is needed to get a demo application up and running. I'm not blaming react, everything else in the javascript space is just as bad right now. There's at least 4 different ways of loading modules (UMD, AMD, commonJS, es (babel) modules), 2 of which (require(), import .. from) are used within this example. In fact the whole process is so complex part of the process is "clone this package which has pre-configured parts of the process". And all of this to glue together a couple of APIs.

Omnipresent 10y ago
Is Angular2 any better in terms of dependency hell since it provides a full stack front end solution?
sotojuan 10y ago
This is a pet peeve of mine when it comes to React tutorials. Why waste so much time making the user set up a dev environment? Just give him/her a prebuilt and "black boxed" environment and get on with learning React (what they actually want to do). I've seen plenty of people give up because they couldn't get their webpack set up right. Also, for those making courses, consider just using browserify. It's much easier on the newbies. > I'm not blaming react, everything else in the javascript space is just as bad right now. Not Ember! A great example of a blackboxed, prebuilt build system that gets out of the way.
- enraged_camel 10y ago
  >>This is a pet peeve of mine when it comes to React tutorials. Why waste so much time making the user set up a dev environment? Just give him/her a prebuilt and "black boxed" environment and get on with learning React And yet one of the most common criticisms of Rails is that it's too black-box and has too much "magic." So you're damned if you do, damned if you don't.

blueside 10y ago

The setup required just to get a production-ready idiomatic `hello world` app in React is downright insane. Without the Facebook name behind it, I don't see how React could have ever made it this far. Foolish of me to keep underestimating the pains that JS developers willingly tolerate.

firasd 10y ago
The problem is that there isn’t really such a thing as an “idiomatic React app”. React is just a view-rendering layer with a small API. You have to put together all the other pieces of your application stack…
deleted 10y ago
[deleted]
zxcvcxz 10y ago
Your comment is wildly uninformed. https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a
- claar 10y ago
  I don't think it's fair to call his comment uninformed based on that link. From your gist: For ease of use, we are including the React, ReactDOM and Babel CDN builds to make getting started as fast as possible. In production, you'll want to instead look at using something like Gulp, Grunt or WebPack (my personal recommendation) to compile JSX into JavaScript. Also, check out: http://facebook.github.io/react/docs/tooling-integration.html He did specify "production-ready", after all.
civilian 10y ago
The way you're talking suggests you're not a JS developer, so I'm discounting your opinion on JS topics to zero.

pjs_ 10y ago

This genuinely made me feel ill. The author has done a tremendous service to others - clearly and patiently listing the thousands of steps required to get a basic modern web app up and running. I agree with others that it is often difficult to find all the steps for a process like this in one place. At the same time, this is completely, totally fucking insane.

ryanSrich 10y ago
React was built by Facebook. Facebook has 1 billion users. If you're looking to build a fast, simple, web app look at rails or Phoenix, not React.
- zxcvcxz 10y ago
  What's wrong with react? If it's good enough for facebook and good enough for the hundreds of other high traffic sites, then it's good enough for me. Of course I also like to stay employed and react is the most in demand framework right now.
  - ryanSrich 10y ago
    Sorry, I should have been more clear. What I meant was that your web app will never be as complex and resource demanding as Facebook. The reason why React is so complex is because it's intended for complex systems. If you want to quickly build a one off web app you shouldn't be using React imo. The length and complexity of this tutorial is a testament to that.
    - lopatin 10y ago
      React is simple, not complex. Simplicity is like the main benefit of using React if your intention is to build a single page app. If that's not what you need, then yeah, use Rails.
      - ryanSrich 10y ago

JoshGlazebrook 10y ago

Am I the only person who just doesn't get the appeal of Webpack over using something like Gulp? It just seems to me like Gulp is so much easier to use and setup.

dsego 10y ago
Webpack does a lot more. Gulp is just a glorified (and cross-platform) make.
- JoshGlazebrook 10y ago
  I guess I meant more from a ease of use point of view. Gulp/Grunt are easier to configure and get going.
  - dsego 10y ago
    Not that I have too much experience with either. But one example is having one webpack configuration with misc. loaders vs. reinventing it yourself and ending up with this mess: 1) You still get a config file, neat right https://github.com/mgechev/angular2-seed/blob/master/tools/config/seed.config.ts https://github.com/mgechev/angular2-seed/blob/master/tools/c... 2) And this boilerplate https://github.com/mgechev/angular2-seed/tree/master/tools/tasks/seed https://github.com/mgechev/angular2-seed/tree/master/tools/t...
  - hokkos 10y ago
    With gulp you rewrite webpack in every project. no thanks.
kevindeasis 10y ago
Webpack is amazing. You can even use Gulp with Webpack. Both are not identical tools.
- kuon 10y ago
  I just discovered brunch and it works well for me.

troncheadle 10y ago

I have something VERY similar to this in production built with Angular, and let me tell you, I'm looking forwards to the day that I get to refactor it in React. I get that it's frustrating to do a lot of setup. But that's the nature of the game. We're all standing on the shoulders of giants. React is a pleasure compared to other ways of conceptualizing and practicing building user interfaces on the front end.

ahhsum 10y ago

This looks awfully close to python. Is that true, or am i imagining things?

tschellenbach 10y ago
That was what I thought :)

Cyph0n 10y ago

Great work on the tutorial. I'm sure it took a lot of time to setup, and it seems well written. However I simply won't believe that setting up a simple React app requires so much overhead. Granted, I have no experience with React, and only marginal experience with frontend web dev. As I read the tutorial, this is the list of questions I had: 1. Why do we need so many Babel presets? What do they do? 2. Why do we need Webpack exactly? Why not use a traditional build system like Gulp? 3. Why is Webpack so difficult to setup? Are there no pre-configured setups for React? 4. What the hell is postcss? Are Less and Sass out of fashion now? 5. And why all this added complexity to setup CSS? They are only stylesheets for God's sake! 6. Oh, so now we need to configure Webpack to support postcss? The definition of reinventing the wheel. Is there no plugin system for Webpack? 7. Why is it so complicated to setup multiple environments using Node and Webpack? Phew, looks like we're done -- nope, we're not. 8. So many libraries just to setup a testing environment? I wouldn't be surprised if frontend apps aren't well tested... 9. Ah, we also need a "JSON loader", whatever the hell that is. 10. Great, another CLI tool for testing. And more configuration of course. 11. Webpack once more needs to be configured to support our new testing app. 12. We need a better spec reporter? Why? More configuration... 13. More Webpack configuration.. I'm already sick of it. So many things to keep in mind, so many dependencies, so very many points of failure. If just one of these libraries is abandoned, or has a breaking change, your entire development environment is dead. Is this the current state of frontend web dev, or are these guys just overdoing it for the sake of the tutorial? I find this all weird because I have the habit of thinking very carefully about every single dependency when I'm writing software. Do I really need it i.e. can the same task be achieved using the standard library? If not, how active is the development of the library (recent activity, issue response time, number of contributors)? How many libraries does it depend on - the fewer, the better? And even with all this, it's still not guaranteed that things will go smoothly!

juddlyon 10y ago
Exact same feeling here, well put. I recently started Tyler McGinnis' excellent React.js Fundamentals and the entire first section of the course is setting up Webpack, Babel, etc. Once you're set up there, then you need to decide how you'll handle routing, AJAX - and so on. The older I get the more I hate third party dependencies. You're asking for trouble.

tschellenbach 10y ago

More tutorials coming up soon: cabin.getstream.io

bdcravens 10y ago
Is your site associated with this one? If not this comment seems very out of place.
- k__ 10y ago
  Well, people are talking about React and React tutorials here. Everyone has a different approach to teaching and learning, so this is a good place to share :)
  - bdcravens 10y ago
    Yes, we're talking about tutorials here, not "coming soon but sign up for my email list" pages :)

swanson 10y ago

I'm no Javascript Boilerplate Fatigue apologist, but there are many comments in here that are treating this as a "Learn how to use React" tutorial. This is not what is advertised nor the stated reason this article was written. From the first sentence: "we get a lot of questions about how to build large applications with React and how to integrate external APIs" Large application strucutre, external integrations...not "Hello World" Of course there is no need for multiple environments, or a robust testing setup, or an icon font, or 6 different webpack loaders to learn the basics of React. This is not a tutorial on the basics of React -- this is written from the perspective of a large production level application. And that "overhead" and "insanity" are helpful for real projects that are staffed by more than one person and need to last more than a week. It seems absurd that it might take you 2 hours to setup the environment before you get to hello world. But if you are planning to use this as the foundation of a 6 month long project, 2 hours to get everything setup in a sane way is not an issue. There is absolutely churn in the JS world and some of it does seem unbelievable because things haven't contracted and settled into a steady-state. But don't just levy a blanket "lol fuck javascript tooling" every time you see a complicated setup process; you are doing yourself a disservice by not critically evaluating the choices the author of this post made and determining for yourself if they will benefit your project and/or learning efforts.

MatthewPhillips 10y ago
A large setup cost discourages you from creating many small projects; from creating experiments that may/may not pan out. This is why the browser/text editor flow of development will (eventually) win out. Hopefully people working in these toolchains are at least using some boilerplate projects or generators that cover 90% of cases.
fbonetti 10y ago
The problem with the massive amount of churn is that it just doesn't pay off to learn the new, cool thing when it's going to be obsolete in 3 months or less. I think all programmers, especially ones who read HN, like to learn new things. It's fun to pick up new languages, learn new paradigms, and experiment with different technologies. What's not fun is learning 10 different ways to handle promises, 4 different build tools, several frameworks, and dozens of new libraries over the course of a year just to keep up. By the time you reach a level of mastery over one of these tools, it's already been replaced by something else! I mean it's great that the tools are getting better, but it's really painful to deal with the constant churn. /rant

morgante 10y ago

People should stop complaining about how "hard" it is to get started or how "complicated" React is. React is simple. Its core abstraction is trivial (making views into pure functions). If you want to, you can get started with React today without installing any software at all. Just include it from the CDN: https://cdnjs.com/libraries/react/ https://cdnjs.com/libraries/react/ The rest is there because things like live-reloading are genuinely helpful. But you don't need to roll them yourself. There are dozens of great boilerplates you can base a new project off of. Also, I've never had as much difficulty setting up a React environment as the constant struggle it is to get even a basic Java app to build from source.

deleted 10y ago
[deleted]
gedy 10y ago
The React ecosystem for developing non-trivial apps is not at all easy and rather complex. Both for new developers and experienced web folks to relearn "the React way".

freyr 10y ago

All this effort to create a single page app that likely doesn't need to be a single page app in the first place. If you're jumping through hoops to build an app that looks and feels like a traditional web site, you're doing it wrong.

kpwagner 10y ago

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.fullstackreact.com%2Farticles%2Freact-tutorial-cloning-yelp%2F&tab=mobile https://developers.google.com/speed/pagespeed/insights/?url=... Yikes.

hammeiam 10y ago

I also got frustrated by the setup time for a simple react app, so I make a starter repo that I just clone for all my new projects. It's made to be as simple, light, and understandable as possible while still being useful. Check it out and let me know if you have any questions! https://github.com/hammeiam/react-webpack-starter https://github.com/hammeiam/react-webpack-starter

missing_cipher 10y ago
I like it. Thanks!

hathawsh 10y ago

The complexity of this tutorial reflects the current state of web app development more than the complexity of React. React by itself is actually rather simple on the surface. Even though I don't need this tutorial to be productive, I think I'm going to go through it anyway to fill in holes in my knowledge. It looks well written.

deleted 10y ago
[deleted]

arenaninja 10y ago

I haven't finished reading, but so far this is an excellent walkthrough. This goes far far FAR beyond the 'Hello World' and 'TodoApp' tutorials and demos the amount of tooling you have to dedicate to keep things as seamless as possible. I recently wrote that in a side project it does not appear to be worth the effort, but that applies to my side project and nothing else. Your next project may well look a LOT like this.

bdcravens 10y ago

I know there's a lot of dog-piling on this tutorial, but having gone through fullstack.io's Angular 2 book, if I wanted to learn React, I'd probably (and probably will) go with their title.

sergiotapia 10y ago

Meanwhile here's how you work with React in a Meteor application. https://github.com/nanote-io/nanote-web https://github.com/nanote-io/nanote-web No need to mess around with plumbing because honestly, who cares about that stuff.

Scarbutt 10y ago
But who cares about meteor? It failed, let it go.
- drumttocs8 10y ago
  What makes you say it failed?
  - Scarbutt 10y ago
    https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/ https://www.discovermeteor.com/blog/the-state-of-meteor-part...
    - drumttocs8 10y ago
      Sure- that's the article I was thinking about when I mentioned that it faltered. It still has quite the dedicated base, and with 1.3, has corrected many of the complaints (npm support, etc)
- sergiotapia 10y ago
  Failed how? A lot of startups and enterprise companies are using it now, with more to follow once Apollo launches.
  - Scarbutt 10y ago
    https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/ https://www.discovermeteor.com/blog/the-state-of-meteor-part...

drumttocs8 10y ago

I think most everyone agrees that the amount of work to get all these pieces glued together before you can even start is ridiculous- a problem that Meteor set out to fix years ago. It faltered, of course, by being too opinionated. Now that Meteor fully supports React and npm, though, is there any reason not to use it? Sure does remove some pain points.

patrickbolle 10y ago
only thing left for Meteor is the release of Apollo !
sergiotapia 10y ago
No real reason as of now, you can choose to not use MongoDB if you want and use Meteor as just the front end. When Apollo comes out, RIP all these React boilerplate projects, you're going to be able to pick and choose the data stack you want with Meteor making it nice to use.

zxcvcxz 10y ago

Lots of complaining but no one offers a better solution. Any article detailing how to build a yelp clone is going to be kind of long. It's really not that bad compared to doing something like this with LAMP. Much simpler than Angular too. With Angular I feel like I have to re-learn web development and do everything the "angular way", and who knows when Angular three is coming out and the "Angular way" completely changes. And then what are the non-javascript alternatives? It really doesn't matter much because I'll have to interface with javascript anyway if I'm a professional webdev, so why would I add even more clutter to the already cluttered web dev world? With React, I can learn a small framework that's highly extensible and basically pure javascript. I don't feel like I have to re-learn everything I know about web-dev when using react like I do with Angular.

carsongross 10y ago
Here's a non-javascript javascript alternative that's a few orders of magnitude simpler: http://intercoolerjs.org http://intercoolerjs.org

tonetheman 10y ago

Interesting... he needs to include his webpage config from each stage. He linked the full one but that will not work when you are still in the starting parts.

k__ 10y ago

If you want to look into React, but aren't in the mood for all the setup: https://github.com/kay-is/react-from-zero https://github.com/kay-is/react-from-zero

blunatic 10y ago
This is really great, thanks for posting!

int_handler 10y ago

The cover of this book is very a e s t h e t i c.

dandare 10y ago

There is something wrong with me but I can not/refuse to use command line. It has no discoverability and no visible system state information. Every time I try to use it I start to panic because I can not see my files, I can not see the state of my task, I can not see anything. Maybe I have some form of dyslexia. Anybody out there with similar symptoms? Anybody knows a remedy to my problem please?

callalex 10y ago
I would start with using a better shell that gives you more of the context you are asking for. I would recommend zsh and using Oh My Zsh for easy setup

eagsalazar2 10y ago

The criticism here is really baffling in how it blames the js ecosystem for the complexity in building large production apps.. I wouldn't find fault with a similar tutorial for "how to set up a production, at scale, rails app with only sever side rendering and zero javascript". Between hosting, cacheing, deployment, worker queues, database provisioning, etc, LOL that tut would be gigantic and that makes sense! If people are mad that making production client side applications isn't trivially easy, well that just isn't going to happen and that isn't because the js ecosystem is screwed up.

zxcvcxz 10y ago
There are two types of web developers: 1. Those who know javascript and some major framework 2. Those who are unemployed Yes we can build apps with just HTML and CSS and put it all in one file and serve it with a one line command, but if we want to be employed and have a website that actually scales we need to follow in the foot steps of the people who have done it.

nijiko 10y ago

All of that, for that simple demo...

missing_cipher 10y ago
Simple Demo: https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#demo-basic-appjs https://www.fullstackreact.com/articles/react-tutorial-cloni...

rvanmil 10y ago

I've been on the fence for quite a while, but a couple of weeks ago I finally bit the bullet and taught myself webpack, ES6, React, CSS modules, Redux, and everything else that comes along with these tools. It definitely felt like relearning my job (coming from working with Grunt, Backbone and jQuery) and it took a lot of time and effort to really get to understand everything (still learning many new things each day), but man was it worth it. I enjoy working with these tools very, very much and I am able to build apps significantly faster than I could before.

duderific 10y ago
> a couple of weeks ago I finally bit the bullet and taught myself webpack, ES6, React, CSS modules, Redux, and everything else that comes along with these tools Can you share how you did that? Was it a number of different resources you consulted, or is there some all-in-one resource you found?
- rvanmil 10y ago
  These resources have been very helpful to me: http://survivejs.com http://survivejs.com https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links https://github.com/HenrikJoreteg/hjs-webpack https://github.com/HenrikJoreteg/hjs-webpack
  - acemarke 10y ago
    Yay! Very glad to hear that my React/Redux links list has been helpful. Currently working on trying to add in some more intermediate-ish topic articles, beyond the typical "getting started" tutorials.

pacomerh 10y ago

Cool tutorial, but first check if React is what you really need for your next thing. Facebook creates React to solve the problem of dealing with large applications with data that changes overtime. React became very popular to the point where the word gets spread saying this is the newest and coolest thing to learn. At this point the core idea and key aspects of why React is cool get misunderstood and we start assuming that React is the best choice for everything! and Virtual DOM is so cool and done!. So now apps that could be done in 1/3 of the time if you just used a simpler library or even vanilla Javascript are being written with all these complex flows, dispatching actions and thunking async operations when all you really needed was display a list of things with ajax...... I'm not saying React is not cool. I'm just saying, understand why React is relevant today and decide if its the right thing for you project. Of course these tutorials are gonna be using simple examples that are unrealistic. They're meant to help you understand how things connect with each other, but are you building a project that is worthy of all this setup?.

zxcvcxz 10y ago
The cool thing about react is that it doesn't try to do everything. Compared to Angular react is minimalist. So that's why react is used so much: because it doesn't try to do everything, it's basically just javascript and doesn't require you to re-learn web dev, and if you want to extend it you can easily do that. React can be made to fit most needs. If all you're doing is serving a static web page then any framework is over kill, but then again, if all you're doing is serving static web pages you probably aren't a paid professional web developer. To be a web dev professionally you need to know some framework, and react is really the best one. Angular tries to do too much but still makes you implement everything "the angular way" and meteor isn't a good framework for companies that want mix and match different technologies on their stack. Then there are other alternatives that are non-javascript based, but in the end you still end up having to use javascript somewhere most of the time. Why take all the nastiness from the web-dev world and add even more convolution to it? React isn't perfect but it's the best we have. And this is coming from someone who hates facebook and was once an angular dev.
- marknutter 10y ago

Scarbutt 10y ago

yes, your problem seems to be learning by banging the keyboard like a monkey which you inherited from clicking like a monkey to get a mere sense of how to use something instead of reading some upfront documentation.

dang 10y ago
Personal attacks are not allowed on HN. We ban accounts for doing this, so please don't do it again. Instead, please (re)-read the site guidelines and comment civilly and substantively, or not at all. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newswelcome.html https://news.ycombinator.com/newswelcome.html We detached this comment from https://news.ycombinator.com/item?id=11781593 https://news.ycombinator.com/item?id=11781593 and marked it off-topic.

keyle 10y ago

I've dealt with many technology stacks. If this is the future, we're F#$$%. Seriously, how can people be blasting older technology like Flash and Flex (which was GREAT), out of the water for not using web standards and then this Frankenstein of a "stack" is going so mainstream. Sure, there is the VM problem, but the language was good and so was the framework. This looks horrendous and scary. Imagine maintaining this for the next 10 years when "the standards" will have moved on to you "next gen" javascript "framework". My only way to write web apps has been using micro frameworks, jquery, and small libs that do one thing and one thing only. I can handle serving pages with Go thanks, and I don't need a routing system that looks like a vintage joke. Sorry if I sound jaded, I've been doing this for 15 years.

zxcvcxz 10y ago
Can you post one of your projects?
- keyle 10y ago
  I currently work for large company (in Fortune 100) and behind NDA, I can't really show my stuff. But it's good work. I wrote my own data binding library, beyond that, it's all micro libs. What's your point?
throwanem 10y ago
This isn't mainstream; it's barely behind the bleeding edge. Mainstream is Express, Angular 1.5, and Browserify, and you can have it up and running in five minutes, maybe fifteen if you don't have Node installed.
dwaltrip 10y ago
You should check out http://mithril.js.org/ http://mithril.js.org/. It's been around for a few years, it's very lightweight with a small API, not opinionated, and surprisingly powerful. It doesn't have all the wiz bang gadgets right of the box, but it provides the fundamentals you need for a well designed, full-fledged frontend app. I've enjoyed using it a lot the past few months on a few small projects, and I'm also using it for a larger project that I've just started working on. Oh also, I haven't even bothered with a build tool or anything yet (I find the current js build tool landscape rather dismal). Turns out it is surprisingly easy to get by with <script src="..."> lines into index.html for smaller/mid-sized apps =) The only thing I've really missed so far is SASS.

qudat 10y ago

I've built a multitude of websites/applications in my lifetime spanning many different programming languages, build systems, tools, etc. From PHP, to python, to golang, to java, and JS. It seems painfully obvious to me that the people complaining about this setup/build system do not fully grasp the power and beauty of the JS ecosystem, more specifically react, redux, time traveling, and hot module reloading. It is without competition, the best development experience I have ever had been apart of. There is no lag time between when I make a change in JS or CSS to when those changes get applied to the application. There's no compiling (even tho there is a compile step), no refreshing the page, no stepping through all your previous steps to get to that part of the application, your changes are patched in real time and available to you automatically. I guess the saying is true, that haters are going to hate, but there really is no competition in terms of development experience once you grok the ecosystem.

missing_cipher 10y ago

I don't understand what people are saying, the basic Hello World App is right here: https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/#demo-basic-appjs https://www.fullstackreact.com/articles/react-tutorial-cloni... Like 1/15th of the guide down.

la6470 10y ago

We need RADDDD (Rapid Application Development) !!!!

zeemonkee3 10y ago

The anger in this thread does not bode well for the future of React. I predict big, complex, arcane React stacks will be a punchline in a few years, much like J2EE/EJB is today. And yes, I know React itself is a small library - Java servlets were a small, simple API that formed the foundation for a ton of over-engineered abstraction on top.

deleted 10y ago

[deleted]

gt384u 10y ago

ITT: People who don't React well to critical feedback from new users

mickael-kerjean 10y ago

That's quite funny, I've spent the last few days achieving pretty much the same thing but with Angular2. If some people are interested about it I might write a few things about it as well

chrishn 10y ago

Not React specific, but how do we tackle SEO for a site like Yelp, where SEO is very important? I want to turn an article-based site into a SPA, so it can consume a stateless API and horizontally scale. But I fear it'd lose a lot of pages in Google.

firasd 10y ago
React can render on the server side using the initial app state. Couple examples: (1) https://github.com/mhart/react-server-example https://github.com/mhart/react-server-example and (2) This article from me: https://medium.com/@firasd/quick-start-tutorial-universal-react-with-server-side-rendering-76fe5363d6e https://medium.com/@firasd/quick-start-tutorial-universal-re... (Previous discussion: https://news.ycombinator.com/item?id=11461159 https://news.ycombinator.com/item?id=11461159)

jyriand 10y ago

I wish somebody with clojurescript/reagent experience would rewrite this to see how it compares.

kelvin0 10y ago

Is it me, or does the JS tool ecosystem have the same problems encountered in some functional language frameworks (LISP for example)? I'm not comparing the languages here (I'm not a fan of JS), but how they are lacking the 'Batteries' and toolsets other languages have grown up with. Since you can do practically anything with JS (or LISP), if something is lacking simply write your own solution ... repeated 1,000 times. This is why there seems to be a gazillion tools/solutions/framework each doing something similar but different enough to cause massive confusion to newcomers. This is one of the reasons DART had appealed to me, the language came with a framework and tools that helped you get started right away, instead of getting bogged down trying to figure if you should used Webpack or it's numerous alternatives.

mobiuscog 10y ago

May I just thank you for: a) providing an estimate of the time it will take and b) offering a simple way to receive it in PDF format for later consumption. I wish every site did this.

rvdm 10y ago

First off. Great tutorial! I wish more frameworks their native documentation would come with more real world examples. Redux's fantastic documentation is a step in the right direction but still makes real world solutions a bit too much of a side note. Regarding Javascript fatigue, I want to share something that greatly helped me. I have written enterprise applications for Fortune 500s using PHP, Rails, Backbone, Angular, React, Node, Express, Grunt, Gulp, Webpack, Yeoman, Bower, Redux, jQuery, Coffescript, Prototype.js ( remember them!? ), LESS, SASS... Basically whatever was hot at the moment. Long I've enjoyed learning new things, but after having made a solid investment in Angular only to find out none of it's SEO solutions were really commercially viable the fatigue hit me hard and I gave up on trying to learn new things for a while. I simply stopped caring. Then I got approached by SpaceX for a JS full stack position. All they told me about the interview beforehand was that it would be very JS heavy, yet no details on what stack or framework they were working with. To prep I brushed up hard on my basic JS skills. Codeschool.com their JS road trip was very useful. So were "Eloquent JavaScript" and "JavaScript: The Good Parts". After making that tough but very rewarding investment, learning React, Flux, Redux, Elm etc. all became a breeze. I no longer have any attachment to any framework. They're all just different ways of using JS to me. And no matter what the future brings, no matter how many frameworks and build tools get thrown our way, I don't think ( hope? ) my heavy investment in Javascript will soon disappoint. So for those of you out there trying to figure out what to invest in next, React, Elm, RxJS.. My advice would be to get a deep understating of pure Javascript first. Ideally, try to build your very own framework using vanilla JS. Once you do that you'll find each new framework is just a different opinion on how JS should be used. Many frameworks have come and gone. But after more than a decade of investing in the Javascript language, it keeps rewarding.

deleted 10y ago

[deleted]

gauravgupta 10y ago

Fanatastic work - Pushed to hackr.io also. http://hackr.io/tutorial/building-a-yelp-clone http://hackr.io/tutorial/building-a-yelp-clone