A quick look into what is React and its benefits for your future web projects.
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 ⚛︎
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).
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.
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.
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.
Under the Hood
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!
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 (
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.