Learn React: Build a Working File Tree and Manage State
One of the features of React is its use of a virtual DOM. The virtual DOM is why React can update the web page’s Document Object Model (DOM) so quickly.
React takes two snapshots of the actual DOM. When a component is updated on the virtual DOM, it’s not yet updated on the DOM. The changes are compared with the second snapshot of the DOM, this one is a pre-virtual DOM update, allowing React to see where the updates were made and easily update the actual DOM. This process is much quicker than traversing the entire DOM. Here is an awesome YouTube video with more detail on this process.
The public/index.html (in the GitHub repo) is where this application connects to the DOM. The id “root” on line 11 in this file is where this happens. Root or app are very common names for this id but it can be named anything.
Under the Hood
ReactDOM.Render is a react method that renders a React app to a webpage. ReactDOM.render takes two parameters, the element and the container. In src/index.js, you can see we are rendering the BasicApp element to the “root” container discussed in the previous section. This is a great article with more detail on ReactDOM.render.
index.html and index.js are standard in React applications. For a more detailed breakdown on the file structure of React applications and how they work together, this is an excellent article. This one dives deep into boiler plate files in the npx-create-react-app so some of it doesn’t apply here, but the general themes and concepts are the same.
Before moving on, I suggest adding an HTML button to the page. You can see changes in the browser by saving the updated code file and refreshing the browser.
State and Components
A component is a basic building block of React. A UX is a set of components. (I chose class components for this first go around. Later on, I’m going to refactor this with functional components and hooks, but the older class components do a great job of illustrating the lifecycle methods and really help with drilling in React concepts before moving on.)
What Is State?
For our example, there is a simple array of tasks. As we move forward this will change to an empty object as we will be adding a deleting state dynamically through a text input box on the browser side.
Note the differences in the App.js vs. the BasicApp.js. The BasicApp.js is simple and doesn’t have any real functionality. The page was designed to introduce JSX and won’t be used moving forward.
How Components Work?
Check out line 17 in App.js. This page, though still simple, illustrates that flows one way — from parent to child.
In index.js, comment out the <BasicApp> and the BasicApp import and uncomment <App> and the App import and you can see
React’s unidirectional data flow is one of its main features. Here is a great article if you’d like to read more about it.
The basics are covered! You have a working file tree and components. What can you do over the next week to get more familiar with rendering React components to the DOM? How can you manipulate state? Can you map though an object or add another component?
Next week, we will add a text input box and manipulate state through the web page, add clickable functions, and learn about lifecycle methods.