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

171–180 of 258 posts

Re: React Tutorial: Cloning Yelp

#171

Post by SethKinast »

sotojuan wrote: post #7
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 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…

I think this is somewhat of a deceptive trap that people fall into. It's difficult to trial something like React unless you set up all the tooling around it, so Ember appears easier because it is blackboxed and sets things up for you.

However, that means that six months in, when your app has outgrown the constraints of the blackboxed starter, you are trapped.

There is absolutely more of a startup cost to something like React and that makes it hard to evaluate its fit for your project, but I would suggest it pays ridiculous dividends to understand the stack you're going to have to maintain for the next X years instead of having it hidden away from you.

Re: React Tutorial: Cloning Yelp

#172

Post by sergiotapia »

drumttocs8 wrote: post #89

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.

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.

Re: React Tutorial: Cloning Yelp

#173

Post by ErikAugust »

bdcravens wrote: post #96
ErikAugust wrote: post #91

Earlier quoted context omitted.

Fair enough - but we're releasing 4 posts next week. We have a total of ten completed and in the pipeline.

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? :-)

Yeah, agreed. But yeah, after all the writing we were eager to get something out, haha.

Re: React Tutorial: Cloning Yelp

#175

Post by Scarbutt »

sergiotapia wrote: post #170
Scarbutt wrote: post #137

Earlier quoted context omitted.

But who cares about meteor? It failed, let it go.

Failed how? A lot of startups and enterprise companies are using it now, with more to follow once Apollo launches.

https://www.discovermeteor.com/blog/the-state-of-meteor-part...

Re: React Tutorial: Cloning Yelp

#176

Post by kuon »

kevindeasis wrote: post #78
JoshGlazebrook wrote: post #16

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.

Webpack is amazing. You can even use Gulp with Webpack. Both are not identical tools.

I just discovered brunch and it works well for me.

Re: React Tutorial: Cloning Yelp

#177

Post by rickhanlonii »

tracker1 wrote: post #150
fbonetti wrote: post #52

Earlier quoted context omitted.

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

I wouldn't put lodash or immutible-js right away, and may gear towards axios as a client communication library. The reason there's so much to do, is there are so many options... core parts of the tooling for modern js are fairly consistent... node is pretty much required, which brings npm.. understanding CJS and ES6 module syntax also required... a translator (babel|typescript|traceur) are pretty much required, as is…

I can't recommend Immutable.js enough though, especially as your Redux state object.

Re: React Tutorial: Cloning Yelp

#178

Post by tomdale »

SethKinast wrote: post #171
sotojuan wrote: post #7

Earlier quoted context omitted.

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…

I think this is somewhat of a deceptive trap that people fall into. It's difficult to trial something like React unless you set up all the tooling around it, so Ember appears easier because it is blackboxed and sets things up for you. However, that means that six months in, when your app has outgrown the constraints of the blackboxed starter, you are trapped. There is absolutely more of a startup cost to something li…

You will find that Ember and Ember CLI are built on top of well-architected primitives; it's not that these things are hidden, it's just that understanding them isn't required to get started.

Re: React Tutorial: Cloning Yelp

#179

Post by moogleii »

lucideer wrote: post #138
moogleii wrote: post #70

Earlier quoted context omitted.

Huh? The first "hello world" equivalent occurs in the beginning. https://www.fullstackreact.com/articles/react-tutorial-cloni...

That's the first time he prints anything to screen, but the actual first "Hello world" text is at the beginning of the Routing section where he's just finished all initial boilerplate and testing setup and puts in his first route. Which is a little more representative. I think it's a good guide btw.

I guess it depends what one thinks is representative of a hello world. His first print out of the literal "hello world" may be down that far, but in terms of "classical" hello world "standards" (just based off what hello world apps have traditionally looked like), the section I linked is more analogous in my opinion. It shows react operational and rendering.

If the bar is a yelp clone (which is already contrary to what a hello world is), then sure, maybe page 93 is more apt. But...you're building a yelp clone.

Re: React Tutorial: Cloning Yelp

#180

Post by insin »

Cyph0n wrote: post #40

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…

> 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?

This tutorial is trying to guide you over the initial hump with the tooling by letting you hit the issues you'd hit if you were learning it on your own (like dependencies which need tweaks to your Webpack config to work properly like sinon, enzyme, moment...).

They _could_ have handed you a completely pre-baked config and got to Hello World in step 2, but you wouldn't have learnt anything about the tooling.

In terms of a development library you depend on being abandoned or broken, I've extracted my React development environment out into a separate npm package [1] and it's still using Babel 5, auto-prefixer loader (which is deprecated in favour of using PostCSS directly) and is working around every version of babel-runtime v5 after 5.8.29 containing a broken version of an important module. By pinning your dependencies, you can keep using old or deprecated versions of things until you're ready to upgrade, and by managing development tools in an external module you can upgrade your projects when you're good and ready by bumping a version number.

If you do that, starting a React project (or any other project which gets tool-heavy for apps of any size) can be a 1-step proceess you can have an understanding of the tooling, and you have a way to keep it manageable over time.

[1] https://github.com/insin/nwb#nwb

Post reply on HN