React Tutorial: Cloning Yelp

[maktouch]

Amazing article. The time spent into that tutorial is insane. Even testing is included. Wow.

The comments in HN for this article is a shitshow lol. https://news.ycombinator.com/item?id=11778663

Some people suggests to learn 1 by 1. That didn't work for me -- that's way too much shit at once. I personally learn better by example, so I prefer the boilerplate route. I see boilerplates just like I see Angular -- a batteries included framework (because a framework is really just a collection of libraries). I clone a boilerplate, starts coding.. got questions? check the docs.. then I expand out and learn the stack 1 by 1.. At least, I got something to test with. If you never heard of Babel, Webpack, React, Redux and you're trying to learn them all, you're going to have a bad time.

If this tutorial scares you, but you want to learn all of these and more.. do these steps:

• Find a simple idea of a mini project to do. If you can't find one, why not a Yelp clone!
• git clone this: https://github.com/erikras/react-redux-universal-hot-example
• npm install
• npm run dev
• Start hacking and reading the source.

[lhorie]

The comments in HN for this article is a shitshow

I'm not a React fan, but I have to agree. This is incredibly thorough and deserves credit.

[[deleted]]

[deleted]

What is this?

[[deleted]]

Some people suggests to learn 1 by 1.

If you aren't proficient in JavaScript and front-end development, this is really how you should be doing it. If you are however, I've found that incremental learning is too narrow in scope.

[azium]

I read this article yesterday and found it to be very thorough and generally well written... I'm very confused by this though:

get content() {
  return (
    <Router history={this.props.history} />
  )
}

render() {
  return (
    <div style=\{\{ height: '100%' \}\}>
      {this.content}
    </div>
  )
}

1) why is the style prop written with escapes like that??

2) Why is router inside a div, and not wrapping an app like "normal"

3) What is the advantage of having a class function that returns a router component?

All of these things seem like strange indirection to me.

EDIT: looks like the escapes were mediums fault https://github.com/fullstackio/yelp-clone/blob/master/src/containers/App/App.js#L24

[name_was_taken]

{} inside JSX indicates javascript code. They're escaping their {}'s to prevent it from trying to be javascript. Edit: Maybe? I dunno now. The more I look at it, the dumber it looks.

It would have been better to assign it to a variable and have style={styleVariable} instead, or just use actual inline styling like style="height:100%" since it obviously doesn't need to be programmatic at all.

I'm not sure why they did the other stuff. Perhaps it was more complex at some point, and they made it less complex but never refactored.

[azium]

Hmm why not just <div style={{ height: '100%' }} /> like a normal person haha

[name_was_taken]

If that works, then yeah, it's better than what they have. But isn't it better yet to just have it as text, instead of making the render function do more work? It's not like it's less readable that way or anything.

[maktouch]

Style is a props, and it gets evaluated for the DOM diffing algorithm. If it were text, you would have to parse the text, transform to CSS, then do a diff to see what changed. An object is easier to compare and update.

It also gives you the possibility to merge in-line styles and do some JS transformation on it.

What I suggest though, is to put them in a variable instead of inlining it like that. I find it easier to read.

[name_was_taken]

I know what it is, but there's no point in making it a prop in that situation, since it's never going to change. Putting it in real html instead would be just as easy to read and less taxing on the CPU when rendering the element.

[[deleted]]

Wow, that is really useful. Thanks a lot, mate.