Okay, imagine you find a new framework, let's say it's React. You Google the tutorials, build a HelloWorld project and start to use it in company projects.

Now you are familiar with that framework, what should you do?

There are several choices. But for me, I just want to down the rabbit hole and see what's beneath the surface.

How do setState works?

How to design the lifecycle and what's the right time for hooks?

How to organize such a big project?

What's the right way to test it?

Why or why not to have that feature?

In order to answer those questions, I decided to read the source code. The best way to learn is to teach, so I write this series to show you how I read the code and what I got from it.

Even if you can just read and see what I found, I highly recommend you to try it by yourself. You need to get your hands dirty to really learn something.

I will record the actions I take, like download source code from xxx and go to file xxx and find xxx. You can replay them by yourself.

In this series, I won't try to explain everything. My purpose is to help you understand React's structure and how it works. I will leave some functions or files for you to read in practice sections.

If you have any questions and advice, feel free to contact with me! You can use issue as comment, or email me at [email protected].

Everyone who is familiar with web frontend development can read this series.

If this is your first time reading source code, you can learn how to read them.

If you are a React user you can understand the daily used framework well.

If you have read the source code by yourself, you can check whether I'm right, and maybe you can get a different view.

Feel exciting? Okay, here we go!

• Start with the Messy Build Process
• How Render Works
• How setState() Works - part 1
• How setState() Works - part 2
• How setState() Works - part 3
• Events
• React vs Vue
• Conclusion

CC BY-SA 4.0