Are You There DOM? It’s Me, React.

Daniela Sandoval
Oct 7 · 5 min read

A quick look into what is React and its benefits for your future web projects.

Picture this. You just finished learning all about DOM manipulation and have begun creating neat SPAs (single page applications) with the help of good ole JavaScript, HTML, and CSS. As the complexity of your site increases, your index.html file grows and you find yourself having to endlessly scroll through it and occasionally get lost. This occurs because every single part of your site is now found in a single linear file. It’s fine if you’re just exploring around a website using Developer Tools and traverse through a linear HTML file, but when you have different moving parts, pop ups, click events, and need to reuse blocks of code, this can become unbearable for developers as they create interfaces. With the help of React, we switch from a huge wall of code, to compartmentalized, reusable, and easy to navigate components.

Defining React ⚛︎

“A JavaScript library for creating user interfaces” — React

React allows developers to break down their site down into smaller interactive components. It was initially released in 2013 by Facebook so it’s cool to think that by using React, a project can have the same foundation as a $508 billion application. If your web site/project was a battleship, React would be the legos that help bring your battleship to life. Each piece has their own behaviors and can be as interactive as you want it to be. By using or importing them into your JS files, you can decide where to use them. Although they collectively make up a web site, each component still retains its own interactivity and state its currently in because you are essentially writing what each component should do and look like. This is what makes React declarative leaving the “how exactly my JS code turn into HTML” to React (we’ll touch on this later).

Features 📋

Components

In React the pieces that make up a website are referred to as components. Components are containers that will render something onto our page. A component can include a blog post, a navbar, and even a small clap button. Components can also encapsulate other smaller components kinda like a Russian nesting doll. By declaring what components can do and how they should look like, components become reusable and we use them again. In React, components resemble an HTML tags when they are called.

What we previously saw as just ONE tweet, can now turn into a collection of smaller components! 🤯

Props and State

Remember the lego analogy I made? Legos are already pre-made and we unfortunately can’t have a pegasus shaped lego, React allows us to customize the contents of our components by giving them data referred to as props. This means that instead of hardcoding values into components, they become dynamic by accessing the props passed to them. If I wanted my pegasus lego have a prop of my name, I can tell my component that it should have a dynamic name prop as long as I pass it in as an attribute. In order to access the prop values, components can do so by using dot notation kinda like seeing itself as a giant object with properties. React components can maintain any changes to itself and data through state . While a component is on the page, it is susceptible to change depending on the amount of user interactivity. This means we can keep track of whether or not a button has been clicked or even the current input values of a form. By using both props and state, components are no longer just static divs, but instead become highly interactive and dynamic divs.

Virtual DOM

When a user interacts with a site, some interactions can cause the entire page to refresh because the DOM is trying to update itself due to a change on it. This behavior may not be desirable and can cause performance issues when we have more than just yourself using your site. When using React, it creates a Virtual DOM (a virtual copy of the current DOM stored in memory) and compares any changes made to it in order to only update the DOM in places that actually need updating. React does this by comparing using a diff algorithm to compare the previous virtual DOM to the current one. This is extremely helpful for a web page because it cuts down on loading time and processing power that can be better used for the other 100 things your user can do on a page.

You after you’ve learned about what React has to offer (I hope)

Under the Hood

Photo by Alexandre Debiève on Unsplash

In order for our components to even show up on our page, React uses a method called render() that requires a return value of JSX. What does that mean? When in our component file, developers are able to write JS that resembles HTML by using JSX which is an extension of JS or a dialect of JS. Gone are the days of manipulating a element’s innerHTML and string interpolating everything. React’s render() method will display what appears on our screen, but it needs to know what to show which will be written in JSX. React then takes that JSX, translates it into regular JS, and finally turn into into readable HTML so that the DOM understands what we want shown. Turning our fancy JSX to regular JS is done through a compiler called Babel!

All Together Now!

Now that we know what components are, what they can do, and how exactly they do things here’s an example of what a component might look like!

If you’re a bit scared about the HOW of React, try creating a react app on CodeSandbox

Closing Thoughts 💻

A cool way to see just how prevalent React is on the internet is by installing the extension React Developer Tools. By entering sites that use React such as Facebook, Twitter, or Instagram, opening up Developer Tools (option + command + i) will allow you to inspect components through a component tree. This post is written as a general overview of React and a highlight of some key features, but like all unfamiliar libraries, they will require some time reading over docs. It also has a “tell me like I’m 5” vibe because I know how daunting a new library can be. Luckily, React has throughly documented how to get started and use the library to build your own React app.

The Startup

Medium's largest active publication, followed by +524K people. Follow to join our community.

Daniela Sandoval

Written by

Software Developer | Flatiron Alumni | Proud cat mom! 🐈 💻 ✨

The Startup

Medium's largest active publication, followed by +524K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade