Several months ago I was new to React. As an experienced developer of classic javascript, one of the most objectionable things about the newer thick client frameworks such as React and Angular is the need to build the client side application to see changes. Let's face it, we are used to only having to refresh the browser page. Fortunately for us the community has has helped us out with this issue, specifically the Create React App community.
Following the instructions on the Create React App website, you will install Node.js, follow all their instructions and just like magic suddenly the browser refreshes every time you make a change, but how does this happen? The answer is more simple and more complex than you think.
1) Node.js, React, and Webpack are watching your code and transpiling it - It's no secret that React delivered to the browser is quite different than what you wrote. Your tsx code has to be changed to jsx and your jsx code has to be changed to javascript, and this javascript has to be packed up for delivery to the browser. Since you don't feel like doing this on your own some automation is in order, fortunately you will not have to think about this, just know that it is happening.
2) A socket has been created on the browser back to the server - This is where the real magic is because by creating a socket with the server, communication can be pushed to the browser instead of having the browser poll the server, which would be far more messy. So everytime you change your code, the chain reaction described in step one happens and then a message is sent up the socket to tell the browser to refresh the page.
There is a really interesting wrinkle to step 2. If you load your page and then fire up your DOM inspector you will not see this socket, which is super confusing. However, if you force a refresh of your browser page with the inspector open you will then see the socket. A bug perhaps in Chrome?
So there it is, a peak behind the curtain. Happy coding.
For more information on the latest frameworks, check out this article Common Frameworks for 2022.
Top comments (0)