1. Virtual DOM
1.1. React.createElement
1.1.1. What is a React element?
1.1.1.1. Element is the smallest building block.
1.1.1.2. Represents what the smallest piece of the UI will look like.
1.1.2. Returns an object that represents the DOM element.
1.1.3. Allows React to do some performance optimizations
1.1.4. React.createElement(type,. [props], [...children])
1.2. Representation of the UI kept in memory and synced with the DOM
1.3. React creates a virtual representation of your User Interface (in what we call a Virtual DOM) and then ReactDOM is the library that efficiently updates the DOM based on that Virtual DOM
1.3.1. The reason why the Virtual DOM exists is to figure out which parts of the UI need to be updated and then batch these changes together. ReactDOM receives those instructions from React and then efficiently updates the DOM
1.4. ReactDOM is the glue between React and the DOM.
1.5. VirtualDOM vs DOM
1.5.1. What is DOM?
1.5.1.1. Data Object Model
1.5.1.2. The DOM is an abstraction of a page’s HTML structure. It takes HTML elements and wraps them in an object with a tree-structure — maintaining the parent/child relationships of those nested HTML elements. This provides an API that allows us to traverse nodes (HTML elements) and manipulate them in a number of ways — such as adding nodes, removing nodes, editing a node’s content, etc.
1.5.2. What is VirtualDOM?
1.5.2.1. The Virtual DOM is a light-weight abstraction of the DOM. You can think of it as a copy of the DOM, that can be updated without affecting the actual DOM. It has all the same properties as the real DOM object, but doesn’t have the ability to write to the screen like the real DOM. The virtual DOM gains it’s speed and efficiency from the fact that it’s lightweight. In fact, a new virtual DOM is created after every re-render.
1.5.2.2. Reconciliation
1.5.2.2.1. React is creating the virtual representation of your UI in the memory, and then ReactDOM receives that and syncs your UI (and the changes to it) to the DOM. This process is called reconciliation.
1.5.2.2.2. Reconciliation is the processing of syncing the Virtual DOM to the actual DOM.
1.5.2.2.3. Reconciliation is a process to compare and keep in sync the two files (Real and Virtual DOM). Diffing algorithm is a technique of reconciliation which is used by React.Reconciliation is a process to compare and keep in sync the two files (Real and Virtual DOM). Diffing algorithm is a technique of reconciliation which is used by React.
2. React Native
2.1. React Native is the glue between React and native apps. React Native is outside the scope of this course but as you can see, React is the library that lets you write reusable UI and then:
2.1.1. ReactDOM makes this UI visible in the browser.
2.1.2. React Native makes this UI visible in a native app.
2.2. It's important to remember that the React library has nothing to do with a web browser:
2.2.1. Whereas React Native binds the idea of React to a native app (example: native android, native iOS).
2.2.2. ReactDOM binds the idea of React to a web browser (example: Firefox, Chrome, Safari, Edge, etc.).
3. Key Terms
4. Useful Resources
5. ReactDOM
5.1. How to install ReactDOM
5.1.1. npm install react-dom react
5.1.2. import ReactDOM from "react-dom";
5.1.3. How much does ReactDOM weigh? ReactDOM weighs 119KB. So in total, React + ReactDOM weigh 12.5 + 119 = 131.5KB.
5.2. We use ReactDOM to render (visualize) our React Elements on the page.
5.2.1. To do that, you have to tell ReactDOM where to render these elements. We call that element the root.
5.2.1.1. <div id="root"></div>
6. Why use React?
6.1. Better compatibility with Typescript
6.1.1. More readable code and reduces the amount of type errors. Catch subtle bugs.
6.2. More readable code and reduces the amount of type errors. Catch subtle bugs.
6.3. Pure functions, that have no side effects. JSX encourages more functional Code. Vue we must define a method for the entire component
6.4. More functional Paradigm
6.4.1. Pure functions, that have no side effects. JSX encourages more functional Code. Vue we must define a method for the entire component
6.5. React as a more pure javascript implementation is rewarding to me as a javascript specialist. Vue abstract this somewhat. However the downside to combining markup with logic is maintaainability. Simple changes to presentational logic become harder. This is thinking behind my use of smart and presentational components though. Everyting is a tradeoff.
6.6. It's javascript centric rather than HTML centric. All require the user to learn library specific ways of doing simply things like conditionals and loop in HTML
7. What is React.js?
7.1. React is a JavaScript library for building User Interfaces
7.2. It is only responsible for view layer of the applications
7.2.1. Only for rendering UI (text, text boxes, buttons, etc.) as well as updating the UI whenever it changes.