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

Learn React by building a web app

udilia.com

Post reply on HN
Print view View original

11–20 of 107 posts

Re: Learn React by building a web app

#11

Post by wuliwong »

nkkollaw wrote: post #6

One thing completely missing from courses is how to handle animations. Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

I was just reading a bit about animations in react, i honestly hadn't thought much about it before. It was because of an HN post about this library https://github.com/kutlugsahin/react-smooth-dnd. But just quickly looking back it seems they use CSS transitions for animations. That is an option, not sure how limiting it may or may not be.

Re: Learn React by building a web app

#13

Post by _qbjt »

nkkollaw wrote: post #6

One thing completely missing from courses is how to handle animations. Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

Class names and CSS transitions have worked just fine in my experience. That said, I'm much more in favor of external stylesheets than coupling styles with components themselves. It seems like the trend with React is to do the opposite.

Re: Learn React by building a web app

#14

Post by nkkollaw »

Sakes wrote: post #10
nkkollaw wrote: post #6

One thing completely missing from courses is how to handle animations. Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

I'm literally working on a lib to solve this right now, specifically to be used with react-router. If you want I can contact you when finished and you can give it a whirl. Implementation will look something like

Transitions are fine, I'm more worried about how to give an indication that a panel has been open or similar.

I'll check it out, though! If you have a mailing list feel feel to add me: me@nbrogi.com

:-)

EDIT: I think your comment below is too deeply nested and it doesn't let me reply. However: I think a mailing list is useful even for personal project. In the event that the project gets traction, it would allow you/motivate you to keep working on it and improve it (I'm a professional side project creator).

As for nested animations, it might make sense to chain them..? Not sure.

Re: Learn React by building a web app

#15

Post by nkkollaw »

wuliwong wrote: post #11
nkkollaw wrote: post #6

One thing completely missing from courses is how to handle animations. Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

I was just reading a bit about animations in react, i honestly hadn't thought much about it before. It was because of an HN post about this library https://github.com/kutlugsahin/react-smooth-dnd . But just quickly looking back it seems they use CSS transitions for animations. That is an option, not sure how limiting it may or may not be.

Yes, it's the only way that it makes sense. It's not that limiting, you can probably use animate.css.

I absolutely have to look into this soon.

Re: Learn React by building a web app

#16

Post by Sakes »

nkkollaw wrote: post #14
Sakes wrote: post #10

Earlier quoted context omitted.

I'm literally working on a lib to solve this right now, specifically to be used with react-router. If you want I can contact you when finished and you can give it a whirl. Implementation will look something like

Transitions are fine, I'm more worried about how to give an indication that a panel has been open or similar. I'll check it out, though! If you have a mailing list feel feel to add me: me@nbrogi.com :-) EDIT: I think your comment below is too deeply nested and it doesn't let me reply. However: I think a mailing list is useful even for personal project. In the event that the project gets traction, it would allow you/m…

Sure! Will do. Honestly, I was just building it for myself, so no mailing list. But I'd be excited to see how you like it.

The problem I'm aiming to solve is nested route animations, and allowing for different animations to be applied depending upon the previous route in history.

Re: Learn React by building a web app

#17

Post by ng12 »

amriksohata wrote: post #8

I fear that by the time I'm good enough at react, another library will come out

Eh, React is 5 years old. I've been writing it professionally for 3. I'm not worried.

And honestly -- React doesn't have the same pain points jQuery/Backbone/Angular1 did where I couldn't wait to move on after 6 months. We'd have to see an absolutely massive paradigm shift before I'd regret writing my apps in React.

Re: Learn React by building a web app

#18

Post by DimitriMikadze »

nkkollaw wrote: post #6

One thing completely missing from courses is how to handle animations. Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

Hey, sorry to hear that, i thought it was more of a CSS topic then React's and because of that i have not recorded lesson regarding animations. I don't know if it help you, but in most cases i use CSS transitions with classname manipulations and lifecycle methods if needed.

Re: Learn React by building a web app

#19

Post by eat_veggies »

nkkollaw wrote: post #6

One thing completely missing from courses is how to handle animations. Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

Pose [0] was posted on HN a few days ago. I haven't tried it, but its API looks super clean. HN Discussion [1]

[0] https://popmotion.io/pose/

[1] https://news.ycombinator.com/item?id=16701756

Re: Learn React by building a web app

#20

Post by face_mcgace »

nkkollaw wrote: post #6

One thing completely missing from courses is how to handle animations. Most React apps have no animations whatsoever (including mine, because I have no idea how to implement them), but they're important for usability IMHO.

http://airbnb.io/lottie/ the perfect solution (works for React and React Native too).
Post reply on HN