Thank you, this is a gem for those who genuinely want to learn how React works behind the scene

@JSerJSer

Жыл бұрын

Thanks! you made my day

Thanks jser, this is really awesome and i have no words how glad i am finding this content and enjoying learning in and out of react

This is freaking COOL. Great job. Keep going, man.

Been looking for this!!

@JSerJSer

Ай бұрын

sorry to keep you looking!

This is awesome, I'm on the journey of deep diving into React internals, thank you for sharing this!

great job. I leaned a lot

love this walkthrough, keep it up

Thanks a lot man, this is much better than hundreds of react projects playlists available on this site, this is a truly unique content.

@JSerJSer

3 жыл бұрын

Glad I can help. Actually I learned so much from making this video

Thank you! I've learned a lot, love this walkthrough :))

@JSerJSer

3 жыл бұрын

Glad it helps~

OMG why am i watch this video yet? Thank you, I have learned a lot.

good share!

Thank you so much for your work, i always wanted to know how react worked behind the scenes but the source code seemed intimidating, this is perfect

@JSerJSer

26 күн бұрын

This debugging video is pretty rough, check of my React Internals Explorer jser.pro/ddir/rie?reactVersion=18.3.1&snippetKey=hq8jm2ylzb9u8eh468

Incredible, add a thanks button. This is exceptional content

This is so cool, how I wish my English was at a level where I could understand it...

Very deep understand how to react works. Thanks a lot JSer

@JSerJSer

Жыл бұрын

you made my day, check out my full series jser.dev/series/react-source-code-walkthrough

Thank you for doing this. It's really great.

@JSerJSer

2 жыл бұрын

Glad it helps

An awesome React journey. Chinese Frontend Developer Here. Hope there are more videos like this.👍

@timzhao8974

2 жыл бұрын

哇哦，羡慕你英语真好。

I cant believe this exists. This is so amazing. I hope you know how great this service is. What you are doing is amazing for us junior developers. Thank you so much.

@JSerJSer

3 жыл бұрын

Hi fanatic, so glad it helps. Yeah, I'm also junior developer ~

@kostas_x

2 жыл бұрын

Junior and senior developers alike! Amazing work. Thank you!

Thank you

@JSerJSer

9 күн бұрын

You're welcome!

Thanks

@JSerJSer

5 ай бұрын

Thank you for your thanks!

It's difficult for me to learn React source code. I don't understand many thing even after watching this video because I just written some simple react demos so far. But your video is really awesome and encourages me to learn React source code.Thank you very much!!! At least I know how to debug react now~🔥🔥🔥

@JSerJSer

2 жыл бұрын

Rome is not built in a day. I started with knowing nothing about React internals and here I am, hang on and don't give up

Thanks for your video, I will start my React source code walk through😂

@JSerJSer

2 жыл бұрын

Awesome, looking forward to seeing yours

Amazing!

I started code in 10 Feb 2022, react in April and know I watch your videos

@JSerJSer

2 жыл бұрын

Welcome and good luck to your developer career

awesome !!!!! thanks

Thanks, Buddy, a lot.

Surprise!! You are a boss, really

@JSerJSer

3 жыл бұрын

haha , wanna be a boss , not yet though

Noice 👌👌

thank you so much for your video! I tried to redo what you have done in the video but I cannot track my functions flow in the waterfall as they all renamed and became like Ds, Ms, Ja ...... I think it is because of webpack and it help me to renamed my functions ?! may I know how can I have my original function name revealed in the waterfall ?

I want to debug the source code like you, but I can't see the specific function names in my call stack. Most of them are anonymous. What's the reason? The react version I am using is 18

nice video!

@JSerJSer

2 жыл бұрын

Thank you! Cheers!

hi at 8:43 you say element is JSX representation, it should be element is React element as object, and i think (not 100% sure) $$typeof is used to have a unique key for every element, which helps differentiate two different type of lets say div,p,buttons etc, it also helps in xss by preventing serialization and deserialization of react component in an unsafe manner

@JSerJSer

2 жыл бұрын

"type" is used to different element type, $$typeof is for type of fiber node, you can find all the list here github.com/facebook/react/blob/main/packages/shared/ReactSymbols.js#L16-L32 things like REACT_PROVIDER_TYPE, REACT_SUSPENSE_TYPE

What react version you used in these videos? Thanks for creating great contents!

@JSerJSer

3 жыл бұрын

Until the video of Transition, it is 17

@kaiwenxiao7728

Жыл бұрын

@@JSerJSer Hi, can you tell which version completely? Thanks!

Could you provide the source code about the video, tks for your work!

which version is your react source code，I download the v16.14， it seem a little different

@JSerJSer

2 жыл бұрын

it was 17 I believe, well we should look at 18

I love you

hi i download the latest react from website and followed your step, there is not "render" phase in performance waterfall, only "Evaluate Script", how can I see all these function calls of react.development.js edit: there is weird! the function calls only show "Evaluate Script" or "Compile Script" in Chrome(I disabled all extensions), but seems ok in Chromium

@JSerJSer

2 жыл бұрын

I guess you are trying production build? you can try the dev build

@zemingtai733

2 жыл бұрын

@@JSerJSer Still got this issue with a dev build.😵‍💫

@qianqian-dc3gr

Жыл бұрын

me too

Performance logs at 4:21 in my case does not have that entire subtree after AppendChild. I dont know why....In your video the tree after AppendChild > Evaluate Scrip > (anonymous) > render > .... certain depth. But for me, my performance chart only shows Evaluate Script > Compile Code(so many of this tasks at this level) and nothing beyond this depth. Need some help @JSer

@JSerJSer

2 жыл бұрын

what build are you trying ? you should try the dev build, rather than the prod build

@mayanksavaliya9100

2 жыл бұрын

@@JSerJSer React 17.0.0-dev and the Steps I did 1) Cloned repo 2) Checked out to this 17.0.0-dev branch 3) ran "yarn install" 4) and then did "yarn build react/index,react-dom/index --type=UMD" 5) Opened dev.html file from fixtures/packaging/babel-standalone/dev.html Am I missing something?

@JSerJSer

2 жыл бұрын

oh, yeah I can reproduce it... but I don't know why it is changed.... need to figure it out would you mind raise it in our discord channel ? we might get help from the community discord.com/channels/939144723023679579/939144723023679584

@mayanksavaliya9100

2 жыл бұрын

@@JSerJSer I will. Thanks

@zemingtai733

2 жыл бұрын

@@JSerJSer The discord channel seems not valid anymore. Any update?

Hi Jser, How did you open dev.html after build step?

@JSerJSer

9 күн бұрын

I think html has nothing to do with build step? does this post help ? jser.dev/2024-07-01-esm-react/

@ravikumar-sharma-k

9 күн бұрын

@@JSerJSer yes, it did help, I found it, the earlier build steps didn't work because of new react version. Thanks

Can u share some other similar source code walkthrough video or Blog s

@JSerJSer

2 жыл бұрын

Hi Akh, what do you want to know about? maybe I can give it a shot

Is this still valid in 2024? Or the code has changed already?

@JSerJSer

2 ай бұрын

I think the basic architecture didn't change.

@rachitshukla30

2 ай бұрын

Thank you 😊

From BFE.DEV discussion to here, your channel is definitely underestimated! :)

@JSerJSer

3 жыл бұрын

Hi glad to hear that!