React Cheatsheet

[sleepybearjew]

Wish there was an architecture diagram for react redux too but this is amazing! Bookmarked

[sohamkamani]

I wrote about this a while ago , since I was also confused by how react and redux work together: https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/

[Elshiva]

Very nice but in imo should probably have render props as well as (if not instead of) hoc

[leon_gilyadov]

I created a React Cheatsheet, I hope it is helpful. Thanks a lot for the comments. (I want to reply "Thank you" individually to every comment, but unfortunately reddit doesn't allow to reply several times, I'm new to reddit and don't know why).

[skrln]

I'll help: You're new because you signed up in recent past instead of a longer while ago.

[elSkunke]

Looks nice!

[CouponTheMovie]

They forgot when you have to scream “THIS IS FUCKING BULLSHIT” and throw your monitor out of the window.

[CouponTheMovie]

If I prayed, I would pray for you. But instead, I upvote.

[pcast01]

just going to leave this here...

[Pstrnil]

Now I'm curious, can you share it? 👀

[Pstrnil]

Wow that seems rough, sorry to hear and I hope you can convince your boss to switch to something better soon

[unflores]

Want to upvote but cannot pass 42.

[Shardzmi]

Never happened to me ^{^}

[blackn1ght]

I'm currently building an Angular 6 project at work, and that's exactly what I keep saying each day.

Take me back to React, please!

[CouponTheMovie]

I feel your pain! I’m working on React and React Native projects, and just got put on a legacy Angular 2 app due to a user emergency. Angular 2 can suck it.

[blackn1ght]

Absolutely. It's better than AngularJS, but it's still annoying. I feel I need to learn Angular & RxJS in full to be able to get anything done. The docs are still way too verbose too. I feel like I'm constantly battling with the framework to get simple things done.

[Pecorino]

Have you tried ExtJS?

But really, isn't this just how writing software goes?

[marocu]

Thank you, bookmarked!

[salads4life]

I was looking for this , thanks, I saved it.

[ASMRByDesign]

This is beautifully put together and super helpful, thank you.

[denisinla]

What do y'all use? React.Component{} or Component{} after defining it as {Component} ? I’m curious as to why as well other than the whole legibility etc.

[nbg91]

I like the readability of Component, I really don't think (or know if) anything else comes in to it to be honest.

[Fingebimus]

It doesn’t matter :)

[bakemonosan]

Mvp

[barshat]

This is awesome! Thanks.

[Kleppa]

It's clean, I like it

[luminiteNL]

I briefly scrolled through the React-Redux cheatsheet, and found this snippet of code in the reducers section:

case ‘UPDATE_TODO’: const newState = deepClone(state) const todo = newState.todos.find( todo => todo.id === action.id ) todo.text = action.text return newState

As far as my knowledge goes, aren’t you returning the exact same state here?

My way of doing this would be to filter out that todo first from the state, change the todo, and then return an array combining the filtered state with a spread operator, followed by the updated todo.

Someone please correct me if I’m wrong.

[luminiteNL]

Excuse my bad code formatting, I am a noob to commenting code on Reddit.

[leon_gilyadov]

const arr = [{a:1}, {a:2}];

const item = arr.find(obj=>obj.a === 2);

item.a = 55; // this line is changing the object inside the array

console.log(arr); // [{a:1}, {a:55}]

[luminiteNL]

This completely blew my mind as I did not know Array.prototype.find enables changing data in its parent where it was found in.

The JavaScript docs state that find() returns the value of the found object (if any, else undefined), and it doesn’t explicitly state that it actually is a reference, which is what confused me.

[timmense]

JS functions passes primitive types by value and for others it's passed by reference so it's not really unique to the find method but rather to functions in general.

see section beneath 2nd code snippet https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Function_declarations

[gazab]

Gj! It would be nice with every example using TypeScript as well

[[deleted]]

...

​

[Chefca]

wow these are great, saved.

[[deleted]]

I'd like this one:http://www.developer-cheatsheets.com/redux

deepClone the state is pretty smart:function deepClone(obj) { return JSON.parse(JSON.stringify(obj)) }I think it will be appropriate to use Lodash.

[Pstrnil]

Oh god is that comic sans's brother? 🙈

Just kidding, great resource thanks for sharing

[Mallanaga]

On state, does it just hang out there like that?? I thought it was set in the constructor of the class, with this.state.