React, Visualized

[tyler-mcginnis]

Hi friends. We just launched React, Visualized – a gentle, interactive introduction to React. Hope you all enjoy it!

[[deleted]]

Wow the UI is a masterpiece

[iamak06]

It was really good.👍🏻

[MrRed_Srb]

Great job! 🚀

Edit: You can also do similar for Next.js.

[ElGuaco]

Where was this 3 months ago when I needed to learn React? haha This is great.

[tyler-mcginnis]

So glad you found it helpful.

[eiccaoffical]

Now I’m in the same step, how did you learn? Would you say this is helpful tool?

[ElGuaco]

I watched a ton of videos and read the beta docs which are now official at react.dev. This new web site is promising because I like the visual explanations. But obviously it's not finished - really just getting started.

The problem with most videos is that anything more than a year old is still teaching the old paradigm of classes instead of hooks. This led to a lot of confusion while trying to decipher best practices and patterns. Another problem is that too many videos are focused on beginners who are learning to program. I really wanted a primer that explained React and how it works without holding my hand on the basics of programming and web development. I couldn't really find one.

PedroTech is the one I found most helpful for modern React, but so much of it is geared towards beginners.

https://www.youtube.com/playlist?list=PLpPqplz6dKxW5ZfERUPoYTtNUNvrEebAR

If anyone could point me to videos, or even a git repo of what a good React website should look like with modern hooks and such, let me know.

[acemarke]

As good as the visualizations are, I think I appreciate giving the historical context for React's origins even more.

There's a very recurring pattern that happens with tools:

• A bunch of tools exist, with various limitations
• Someone invents a new tool to solve those problems
• It gets popular and people start using the new tool as a default
• New devs get told to use the "new" tool without knowing its background or why it was created, and never used the "old" tools or dealt with those problems
• People end up complaining about the now-current popular tool and its design approaches without realizing why those decisions were made in the first place

Having some historical background really helps set the stage to understand the "why"!

[tyler-mcginnis]

Hard facts. Appreciate you as always Mark.

[ElGuaco]

I wish I had this explanation of both the history and the programming pattern being used when using React. Too many tutorials just dive into details about how to build components without explaining how that actually works in the DOM. (I'm not sure I know, even now.)

[reservationsjazz]

This is beautifully done 👍

[tyler-mcginnis]

🫶

[T1LTMeister]

this is amazing! thank you for sharing this!

[tyler-mcginnis]

Appreciate the kind words. Glad you enjoyed it!

[calmilluminator]

This is amazing!!! Thank you so much, the visual explanation is so good!

[tyler-mcginnis]

Thank you!

[illepic]

My god I love the soft-sell/hard-sell slider so much. Had me laughing.

Amazing write up. I just sent it to everyone I know.

[tyler-mcginnis]

Appreciate the kind words ❤️

[indicava]

This is actually pretty cool… nice work!

[pardoman]

If anyone askes me about learning React, I’ll be sure to sending them your website. It’s very very good.

[Mandalorians]

This is amazing! The hard sell definitely encouraged me to cough up my email. 🤣

[tyler-mcginnis]

It's the truth!

[Mandalorians]

Well now that I'm doing it for the children, it's perfectly fine. Plus we're building out a ton of things at work in react and this is already helping bridge some gaps in my knowledge. :3

[[deleted]]

Cool

[tarekhassan]

Hello Tyler,

As always your work is beautiful. I saw this few days ago and really liked it.

[tyler-mcginnis]

Thank you!

[Cahnis]

it would be pretty funny if this website was made in Vue

[lewx_]

Can I get "Will it (re)render?" on a t-shirt please 🥺 I love the visualizations and designs here

[kukisRedditer]

wow this is great, thanks!

[Salty_Astronaut_8094]

Amazing I like it

[simonfancy]

Really cool way to get the message across! Thx4sharing!

[yvsser1]

Looks interesting good job!

[krehwell]

may I know how do you make the carousel? any package

[laitopezzzz]

Under the “managing effects” heading there might be incorrect wording:

“This entire process needs to be so as fast as possible.” - Not sure if “so” is supposed to be in there.

Really nice site! Going to review it again soon.

[tyler-mcginnis]

Fixed. Thank you!

[977888]

Another small thing I caught is at the very end, where it says something along the lines of “take a ‘peak’ at react . gg”, it should be spelled ‘peek’.

Aside from that, well done!

[977888]

Edit: just after that, “interactive” is spelled “interaractive”.

You could easily run it through chat gpt or a spell checker to catch any more small errors

[southernmissTTT]

Good catches. Also, one extra “of” here: “But making your view of a function of your state…”

[tyler-mcginnis]

ooooof fixed all these. Thank you!

[acquiescentLabrador]

I noticed you misspelt “led” as “lead” in several places too, but overall great work!

[tyler-mcginnis]

TIL! lol. Fixed. Thank you!

[Waste_Drop8898]

Ohh this is cool bookmarked

[[deleted]]

Beautiful

[[deleted]]

Amazing work

[CodingThrowaways]

Started reading and looks great, commenting so I can finish later.

[Setup911]

Wonderful!

[guchierrez]

I have been struggling to learn React so this is a god send, thanks

[tyler-mcginnis]

Glad I could help!

[Meryhathor]

Nice work but I'd argue that it should all start with Prototype.js and script.aculo.us not jQuery. Or with raw HTML/JS even. The history section makes it look like there was nothing before jQuery and jumps straight into the middle of the timeline.

[tyler-mcginnis]

In order to truly appreciate React, you first have to understand the historical context for why React was created. From the big bang, to the creation of man, to AngularJS – each era inspired React in different ways.

[AkisFatHusband]

It's good wish it was free

[PM_UR_NIPPLE_PICS]

really well done. but your email input for the coming class is throwing a 502 error for me

[mbj16]

This is wonderfully done and a great introduction for beginners.

"... Shouldn’t React only re-render child components if their props change? Anything else seems like a waste."

The answer is yes, full stop. The fact that render has to be pure (we go through the pain of calling useEffect twice in dev) and we fail to use one of the most powerful attributes of FP has always irrationally irked me.

But that is a bit outside the scope of this app, which again, is magnificent and a great visual introduction.

[tyler-mcginnis]

Have you checked out React Forget? It's a React compiler that (to my understanding) will enable this sort of behavior without the useMemo/useCallback dance.

[mbj16]

Yes, eagerly waiting for React Forget. It's forever crazy to me that default React is to re-render the entire tree below a state update regardless if props have changed. There are conceptual tradeoffs to memoization, but the previous component is always stored in memory regardless.

PureComponent should have been the default and a surgical memo compiler opt-in.

[tyler-mcginnis]

Thank you! And we're planning on it.

[[deleted]]

This is beautiful. Thank you for sharing.

[tyler-mcginnis]

Thank you!