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.
An extension of JavaScript, JSX is essentially a JavaScript/ HTML combo and the building block for React. JSX allows you to code HTML and JavaScript in the same file and dramatically cuts down coding time. In our application, the text from BasicApp.js is shown in the browser. The “Welcome to This Tutorial” heading is simple text within h1 tags inside a React class component. Under the hood, Reacts library reads this as React.createElement(‘h1’, {}, “Welcome to This Tutorial”).
Check out this video which shows the side-by-side visual of JSX code and its vanilla HTML/ JavaScript counterpart. For more details about JSX under the hood, check out this article as well.
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?
Simply put, state is a JavaScript object that holds the data you want to display on your site. In class components, state is set up with a constructor function. In our repo, the App.js file is where the state is located. Lines 6-8 and 10-11 in that component are standard in-class component state but what’s inside the state varies by application.
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 this instance, App.js is the parent and TaskComponent.js is the child. The way we pass state from parent to child is by naming it on the component and then putting it in curly braces to let React know to expect JavaScript and title it with the naming convention as you would with anything else. this.state is the name of the object and then tasks is the key and we are referencing the value. Take a look at the TaskComponent.js page and you can see how the specific elements are referenced.
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.
Next Steps
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.
