Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React Tutorial: Cloning Yelp

fullstackreact.com

Post reply on HN
Print view View original

51–60 of 258 posts

Re: React Tutorial: Cloning Yelp

#51

Post by dceddia »

eterm wrote: post #3

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 h…

This was the first thing I noticed as well. 40% of the tutorial is setup. It doesn't HAVE to be that painful just to get a working environment going, but it gets painful pretty quickly if you pile on Webpack and PostCSS and a testing setup and everything.

For true "Hello World", if all you just want is to play around with React without all the setup, try out quik[0] or react-heatpack[1]. I also wrote up a tutorial[2] using react-heatpack that gets a working Hello World in UNDER 3 page-downs :)

[0] https://www.npmjs.com/package/quik

[1] https://www.npmjs.com/package/react-heatpack

[2] https://daveceddia.com/test-drive-react/

Re: React Tutorial: Cloning Yelp

#52

Post by fbonetti »

eterm wrote: post #3

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 h…

This is why I'm so gung ho about Elm.

To create a proper React single page app, you need React, Redux, lodash, react-router, webpack, Immutable.js, babel, npm, redux-thunk, isomorphic-fetch, webpack-hot-middleware, and ton of boilerplate and configuration (which everyone does differently). You can try to assemble this yourself, or choose one of hundreds of starter projects on Github.

A comparable Elm app is a lot simpler. It consists of Elm, a router such as elm-transit-router, and maybe webpack if you want to watch and minify your compiled javascript. Especially now with the new 0.17, Elm forces you to use the standard Elm Architecture, so you don't waste any time thinking about how to structure your app and there's very little boilerplate as a result. On top of this, Elm is statically typed, functional, and simply a joy to work with.

Re: React Tutorial: Cloning Yelp

#53

Post by askldfhjkasfhd »

atom-morgan wrote: post #24
eterm wrote: post #3

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 h…

> 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. I'm writing a tutorial right now for testing AngularJS and this is exactly what I'm running into. It's a tutorial but half of my first part is "install this, put this line in this configuration file, install this, add this one here, etc." It's easy to feel like I'm not writing…

I'm way out of my league, but would it be possible to distribute a Docker container with all the boilerplate? Tutorial users could run that at the start, then do the "fun stuff".

Re: React Tutorial: Cloning Yelp

#54

Post by MatthewPhillips »

swanson wrote: post #48

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…

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.

Re: React Tutorial: Cloning Yelp

#55

Post by freyr »

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.

Re: React Tutorial: Cloning Yelp

#56

Post by claar »

zxcvcxz wrote: post #26
blueside wrote: post #5

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.

Your comment is wildly uninformed. https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a

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.

Re: React Tutorial: Cloning Yelp

#58

Post by novembermike »

eterm wrote: post #3

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 h…

If you want to put together an Ikea chair, everything is in the box and the instructions are two pages long. If you want to put together a chair from scratch then you need the wood, hammers, nails, saws, a lathe, sandpaper (in multiple levels of coarseness), glue and a number of other tools. React is a lathe in this example, it's hard to put it in context without the rest of the tools but that doesn't make it complex.

Re: React Tutorial: Cloning Yelp

#59

Post by hammeiam »

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

Re: React Tutorial: Cloning Yelp

#60

Post by lopatin »

ryanSrich wrote: post #35
zxcvcxz wrote: post #31

Earlier quoted context omitted.

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.

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.

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.
Post reply on HN