• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Anyone here do React and ES2015? Thoughts?

fuzzybabybunny

Moderator<br>Digital & Video Cameras
Moderator
I'm doing the CodeSchool course on ReactJS and holy crap.

xFiEE5G.png


Just... what the heck is happening here?

I've been doing quite a bit of JS. Is it just me or does the code above look like a complete mess? I still like the old-school way of DOM manipulation with jQuery and a templating system like handlebars. Extremely straightforward to code and figure out what is going on. This React stuff is completely unfollowable for me.

Also for ES2015 I hate how they broke the familiar and clean pattern of key: value pairs in objects. You can still use the key: value pattern, but other coders might not and then it makes the code really, really messy-looking.
 
Last edited:
Few things.

The line "concat works better than push to keep react fast".. that is just voodoo BS propped up by poorly written microbenchmarks. In fact, concat will likely be slower than push simply because concat is more likely to generate and move data than push is. The only reason to use it is if the array is immutable.

setState is something that is somewhat of a bad idea IMO. State should rarely be set by the component and instead be set by the store. Components should change application state using events rather than direct state manipulation.

In general, your react components should be really simple things. I've seen it suggested that if a component is displayed, like a button, then it shouldn't have any state. If a component has state, it shouldn't be displayed. So, for example, you might have the concept of navigation, your routes have in them the state of where to go when a given route is invoked. However, the "routes" component shouldn't be something that displays things, it is just routes. The thing that displays routes shouldn't know or care about how to interpret a route, it is just making them look pretty.

The comment Id thing is really weird. I have no idea what they are trying to do or demonstrate there.

If I were to reimagine this, addComment wouldn't do anything other than fire an event "comment added, it looks like this...". That is it. The thing that will handle updating the global comment state is a store somewhere listening for the "addComment" event (think, redux). Once it gets that new comment, it makes the decision. "Hey, I need to notify the server here, push an update down here, and fire events P, D, Q, here to make everything consistent and hunky dory".

The benefit to doing it this way is that now you don't have to worry so much about the structure of your components. You don't have to traverse your component tree to find the comment text box to pull out its state to notify the server of a state change. You can move your comment component, duplicate it, whatever, with very minimal changes to the whole app. The logic around how you do something is completely separated from the logic of when to do it and how to display it. That is the power of a react redux app.

Now as far as this specific screenshot, what are you having problems with? Most of this isn't ES2015 or ES5 even but rather valid ES3 syntax. The JSX stuff and const are the only things that are non ES3. However, the creation of the comment is simply inline object creation. The "setState" method is also just taking an inline object with a key of "comments" to a value of the ugly concatenated mess as a parameter (this also triggers a rerender by react btw).
 
Back
Top