Build Your Own React

In this post I’ll create a full working version of step by step. It won’t be an efficient version but it give you a glimpse to how react works under the hood. If you’re familiar with react / web / dom etc.. you can go ahead and skip to step 1. Alternatively if you’re the video type, you can check out my talk on . Abstract- react youtube Intro Before writing react apps, like many others, I wrote in angular. The thing about angular is that if you want to be a good angular developer you need to know how angular works. The more you know, the better you’ll be. With react though, it doesn’t seems to be the case. You learn about class components and stateless components. You learn about props and state and that you should never change the props. Then you learn that in case you want something to be dynamic you call and that’s pretty much it. Excluding lifecycle methods and other small features there is not a lot more you need in order to write good react apps. There’s no doubt that the learning curve of react vs angular is much smaller. setState But, I became a programmer because I like knowing how stuff works. What makes things tick. It doesn’t matter if it’s the international space station, tesla car or a vending machine. When I see something that interests me, soon then after I start questioning how it works. The same happened with react. I saw a great talk about react under the hood and I thought to myself.. That’s doesn’t look so complicated.. I can try it out. What is react anyway? Before we’ll dive in writing react we should know what is it that we want to build. As I see it, react is a library for building dynamic trees. In the web use case react will build a DOM tree. However it doesn’t have to be DOM. With , react builds a native app hierarchy of ui controllers. You could even write in react. react native arduino apps What is a DOM tree anyway? DOM stands for document object model. Every html document is built from elements that are called “dom elements”. The is a dom element. Also and etc. The tree has a root, usually the html tag. Every node in that tree has its own properties and it may have children which are also dom elements. For example. In the following image you can see a part of an html document and its representation as a tree of objects. _ _ _ _ _ _ A few words about react and jsx If you’re already familiar with react you probably use jsx. So a simple component can look like this: const mySimpleComponent = () => {return Hello World ;} After running babel or your other favorite transpiler this component will look like this: const mySimpleComponent = () => {return React.createElement(‘h1’, null, `Hello World`);} A special babel plugin will transpile the jsx call to the underlying js api that react provides. In our case the tag got transpiled into a call where the first argument is the tag name, the second argument is the properties and the third is its children. React.createElement Let’s look at a bit more complicated jsx example: Which will result in: React.createElement(`div`, {style: {color: yellow}},React.createElement(Title, {text: `I'm a title`}, null),React.createElement(Person, {name: `moki`}, null)); Now that we’re in sync we can start building our own react. Step 1- DOM elements (Hello World) First, I’ll create a host html document for my app. It will load my version, for the app’s logic and it will have a div with id to attach my react app to. react.js app.js root The way we’re going to build react will be in what I like to call ADD. It’s like TDD but instead of Test Driven Development it’s stands for Application Driven Development. In each step I’ll show the that I would like to render. Then I’ll implement it in the file. app.js react.js My first looks like this: app.js In order for this code to work I will need to implement and React.createElement ReactDOM.render *ReactDOM is a separate module from react but for the sake of simplicity I’ll write them both together. Let’s do this. Here’s my : react.js And we got an hello world working! You can see the result . here Step 2 — Render non DOM elements or as we like to call them in react `components` We want to add support for stateless components 2.1- : app.js The only thing changed here is that now the can be a function. In case it is, we’ll invoke it. element : react.js * result Not all children are born equally. We want to add support for non plain text children. Let’s refine the way we handle children. 2.2- : app.js : react.js *result - Add support for class components 2.3 : app.js As we did with the stateless components. We will find out if it’s a class and in case it is, we’ll create a new class instance and call its render function. react.js: * result It’s time for some good old refactor. Our function is getting too long. Let’s extract some methods out. Also, let’s create a for miscellaneous functions such as , etc.. 2.4- anElement react-utils.js isClass isStatelessComponent Step 3- Props and State To recap, up until now we rendered dom elements, stateless components and class components. Let’s add props and state to the mix Stateless component props 3.1- : app.js This one is easy. We just need to pass in the props to the component (function) : react.js * result Class component props 3.2- : app.js You should notice that the class now extends . I did this so I will have a common parent class for all of my react classes for purposes such as assigning the props on the class instance. Hello React.Component class: Component Now that we have the Component class, we’ll pass the props in the constructor and we’re done. Attributes 3.3- This simple component should show an alert on button click. : app.js As with the children, we’ll iterate over the attributes and set event listeners to attributes that starts with on* and set attribute for the rest. : react.js * result Refactor. became too big. We’ll extract out and functions. Also we can clean the code a little bit using lodash. 3.4- handleHtmlElement appendChild appendProp State 3.5- We’re ready to write a real react app. Let’s write a counter app. It will have two buttons to increment and decrement the counter and will present the current value : app.js To make this work we need to implement the function. My naive algorithm will delete the entire dom on every call and will render it again. For that I will need to save a reference to the root react element and to the root dom element. setState setState react.js Next I would like to save the classes that I’ve created so when happens I won’t create them again and lose my state. To achieve this I will do the following: reRender Hold a cache of the instantiated classes When handling a class. In case of a match, return the cached instance Instead of calling render straight away return an object with a special flag that marks it as a react class. When appending a child node. If it’s a react class call its render : handleClass : handleChild * result That’s it. We have our own working react. Don’t believe me? Check out that I took from the web. I didn’t changed anything except for the references to the real react and react-dom. this todo app The todo app doesn’t impress you much? How about ? this minesweeper game Now what? Let’s reflect on what I’ve showed you a little bit. The react version I wrote… It doesn’t seem super efficient. On every call to I clear the entire dom and creates it from scratch. Also the first thing you hear when someone talks about how react works is the mysterious virtual dom. I didn’t write anything virtual in my code nor did I mention it. setState Time to face the truth Time for some performance analysis. I timed the time for first render of the minesweeper game both with my react and with the real react. The results are going to surprise you. It seems that my react is doing about 2.5 times better than the real react. But let’s hold our horses for a minute. If we continue to play we can see the time it takes for every to finish. With my react it takes between 2–8 ms as opposed to 0.01ms for the real react. This difference is why we love react and use it so often. Besides being super intuitive and easy to learn, it’s very fast and keep getting faster. setState The react algorithm First my algorithm: on every re-render I Clear the dom Render the DOM from scratch If we look at the code we will see that everything we wrote was . We didn’t use any html or other languages. So what if, instead of creating the dom elements straight away we will keep a tree model of the dom made by javascript objects. It’s very easy to represent our DOM as a javascript object right? We saw that in the beginning. javascript So a better algorithm will be: Call render on the js tree model Read the current dom Figure out the changes Apply only these changes on the dom This will make things faster. But we’re smarter than that. We want to keep our reads and writes to the dom to as minimal as we can. We already have a js tree model (let’s call it virtual dom from now) that reflects the way our dom should look like. So we can have an even better algorithm. On re-render, the idea here is to have two virtual doms one always represents the current dom and the other will represent the future dom. On reRender: Create a new virtual dom Figure out the difference between it and the current virtual dom (diffing between two js tress can be done pretty fast) Apply only the changes on the real dom The process of diffing and merging the diffs into the real dom tree is called reconciliation. And this is how react really works. Fiber You might have heard about . Fiber is the new reconciliation algorithm the guys at react are working on. It should be out soon. The idea behind fiber is simple. Up until now the reconciliation process was linear. Once it started you couldn’t stop it. Fiber aims to change that. The motivation for it is priorities. We realize there are some changes that are more important than others. For example, if you have a text node that needs to be change and a heavy animation to draw. It’s important that you will draw the animation first otherwise the user will notice the ui lagging. If the text node will change in a few ms delay the user won’t notice it. Fiber has a built in interrupt mechanism. Think of it as a pause button. At any given moment during the reconciliation. React can tell fiber to pause, do other calculations such as animations and then continue. This will cause our apps to look much more fluent. fiber The beauty of it all is that it’s totally transparent to the developer. The reconciliation algorithm is an implementation detail. We saw that with my own lousy implementation of it. The apps worked but not very well.. The simplicity of react’s api and the complexity of its implementation is what makes it such a powerful tool. All the code you’ve seen on this post is available . Catch me on twitter at if you have any questions or just to say hi :) here @ofirdagan2