I work with React every single day. I try my best to follow various guides, discussions , videos, blog posts, personal learnings, etc in order to write good and maintainable code, yet I've rarely had to dig into the framework like I've had to for other types of frameworks and libraries in order to achieve the same goal. I really appreciate this about React. After just learning the foundations, like props and state, classes vs stateless components, and a little about lifecycle methods you are already on your way to writing a decent React app.

But I couldn't help but look at a typical component and wonder what the hell was going on. I mean, it all pretty much looks like vanilla JavaScript. Well, apart from JSX, nothing looks super out of the ordinary... right? So where is all this React magic coming from? How do these lifecycle methods get called? Where is setState defined?

I recently rebuilt my own Redux/React-Redux and I use some of the learnings in both code and new patterns from that on a daily basis. This made me realize that I needed to do the same thing for React.

In the spirit of that, together we will be building a mini React clone. It is hopelessly naive, but it follows for the most part the same design and naming conventions of React.

Let's Get Started!

You can find the completed code here

It might be advantageous to realize that React is a very helpful library for building out dynamic trees. For web apps we are using it to build a DOM tree or for React Native we are using the same React engine to build out a native app hierarchy of ui controllers.

(Web app vs native app using React)

In order to give the most value from this I'm going to rely on Pareto's Principle, or the 80-20 rule, or in any situation, 20 percent of the inputs or activities are responsible for 80 percent of the outcomes or results. I'm going to show you from a high level how the React trees are formed, respond to some lifecycle methods, and to some degree how they get updated through setState.

Let start with a component!

In the code snippet below, there's a JavaScript class called App with a single function called render. React and ReactDOM and their APIs aren't built yet, but we expect it to return a div with a message in it. The createElement function will return us an object that will represent a dom element. The ReactDOM.render function will set the base node and then recursively make its way down the tree.