Home
Don't use Pages to navigate to pages. Use the sidebar links below. Pages contain extra info that isn't required.
Everything is a Node, and everything is a Graph. You would be surprised at how much can be represented using a Graph. Google Maps structure data as a Graph, with Vertices connecting Edges. Additional information can be stored in Vertices or Edges as Props, which may include distance, traffic level etc. To find the shortest distance from one Vertex to another, we can use a Traversal algorithm to figure that out.
A web page is also represented as a Tree, which is a more specialized form of a Graph. The DOM tree contains the root node, with children containing more nodes. We can also traverse the DOM tree to find elements closest to one another.
The core idea is to transform 1 tree representation to another. We start out with a JSON tree involving node data. To be able to render this json data to the DOM, we Traverse the tree and map each node to a React component.
The goal of building an application becomes the task of constructing a tree data structure. Imagine a visual web builder with grid layout. Selecting a block is the same as selecting a Node in the Tree. Re-ordering cards in a 3 column layout is same as re-ordering the children nodes of the parent containing those blocks. When we edit a block, we are editing the Props.
As you can see in this dependency graph (nx dep-graph), you can see that the Renderer is the main point of entry. Use this diagram as a mental map when you go through what each module is responsible for. Also keep in mind of the direction of the dependency.