This past weekend I’ve decided on my next project and the technologies I plan to use to create it! React is one of them because of how much I’ve missed developing with it. I decided before I tackle a larger full stack project to start with something small to brush up on the fundamentals. When I ran “ create-react-app” in the terminal, I was greeted by a familiar boilerplate React app that I missed! When browsing through the App.js and Index.js files I noticed the render method and couldn’t help but google how rendering in React worked. Here's what I found!
The Initial Render
Every React application has a root DOM node that identifies the portion of the DOM that will be controlled by React. Adding components (known as child components) to this node allows you to make your application look and behave the way you want it to!
Once React is called to initially render, it has to convert the JSX you’ve written into pure JavaScript first. It does this by utilizing Babel. Babel is primarily known for its transpiling capabilities, however it is also used to convert JSX into JavaScript.
Rendering
When a change of state happens in a component, it triggers the rendering process for that component. Once triggered, React starts to collect all the components that triggered the re-render from the root of your App. However, even though the process's name is technically rendering, at this point, the DOM has not been modified.
Since we normally use JSX, the code will be transformed to React.createElement(...). The output of the createElement will describe how the application should look like in the next version of the render through the next stage called reconciliation.
In a short, reconciliation calculates the changes that need to be made in the application tree which makes the changes. Synchronously, React gets rid of past layout effects, runs the new layout effects. The browser then paints the DOM!
Thanks for stopping by, I hope you learned a bit. Talk to you next week!
Top comments (0)