What is React, and What Do I Use It For?

For new developers, it can be very overwhelming to read about a new technology every time they go on the internet. You were told HTML, CSS and JavaScript were the cornerstone of Web Development, so what's all this nonsense with React? When I started, I was honestly a bit irritated that every time I thought I had become competent as a developer, a new technology seemed to pop up. In this article we'll look at what exactly React and other technologies of it's nature aim to accomplish, and why they're so ubiquitous in our space.

React is a JavaScript library, made to help you create User Interfaces. There are similar technologies like Angular, Vue and Svelte to name a few. You may hear it referred to as a JavaScript "Framework" (as some others like Angular actually are) and while this is incorrect, the distinction isn't meaningful enough to cover here. I'd like you to establish a solid foundation of knowledge on React before getting into the more abstract details. I'll cover React here primarily as it's the Library I'm most familiar with, but for now just know that React, Vue, and Angular are all very similar in their philosophy. They are akin to Pepsi, Coke, and RC Cola in this sense.

Everything that happens when you write a React Application (more on why I said "application" in a minute) can be done in regular JavaScript. It would be more difficult, but it's important to note. Everything that you write in React will be transformed into vanilla JavaScript. React is not a language. The "how" for now is not terribly important, and I will cover that in another post further down the road. When you decide to create your first React Application, using "Create React App" will take care of all of the behind the scenes magic and allow you to focus on learning the syntax and nuances of the Library. However, despite the fact that React is "just" JavaScript, it gives you a new special syntax to work with, called JSX. JSX mimics HTML in appearance, but since the core philosophy of React is geared towards creating reusable components, this is extremely powerful. Moreover, It allows you to describe the way that your application should work and let the "compiler" create all of the lower level code for you.

What exactly is a reusable component, though? Say for example, you want to create a card that displays some sort of information on your site. Conventionally, you'll write out all of the code to make the card every time you need it. Even if you copy and paste and just change the details, the point remains. In React, you would simply make a "Card" component. Components are unassuming and reusable. Every time you need a card, you just grab your card component and use it. This means writing the code once and using it the same way you'd use an HTML element. Let's look at a quick example below.

HTML

<div class="card-class">
    <img src="./somepath-or-url"/>
    <h3 class="title-class">Some card title</h3>
    <p class="desc-class">Some card description</p>
</div>

JSX

<Card 
    image="./somepath-or-url"
    title="Some card title"
    description="Some card description"
/>

Now you may not understand how to arrive at the JSX but that's fine, since this is a conceptual overview. In this example the difference doesn't jump off of the screen as being particularly useful, although the JSX seems much more readable. But now imagine a component with 200 lines of code instead of 5. This makes React Applications very developer friendly.

So why do I keep calling them "Applications"? Well, React and websites created using vanilla JavaScript do differ a bit by default, as React does something extremely powerful out of the box. On a normal website, every time you navigate to a new page, your device will have to ask the server for the new page that you want. Once your device receives the new page, it's going to have to ask the server for the rest of the resources on the page. If this doesn't make sense, don't put too much though into it. The key point is that there is a lot of communication going on between your device (the client) and the server on a conventional website. With React Applications, there is actually no such thing as seperate pages. There can be the illusion of seperate pages, but that is it. React uses what's called a virtual DOM to manage what is shown on your screen. So initially, your device receives one huge file that needs to build everything. This takes more time than a conventional website, but the tradeoff is that once it's loaded, that's all the communication you need to have with the server. You can disconnect from the internet and still navigate the application. Some things may not work correctly, but the point remains. So, React, Vue, Angular, etc all create what are called "Single Page Applications" or SPAs for short. There are pros and cons to this of course, but it's very powerful nonetheless.

So now you know a bit about what React is and how it works, but why should you learn it? Well, as I alluded to before, the developer experience of React as opposed to vanilla JS with HTML and CSS is night and day to me, once you get comfortable with the ecosystem (which is a bit much in the beginning, admittedly). A JavaScript framework/library is one of the most important tools a modern developer can have in their toolbox, as they're so ubiquitous in our space that they can even be used to write native applications using something like React Native. They also allow us to tap into high level concepts like state, which determines how our application should look at different points in it's lifecycle. Now, this isn't to say every time you need to make a website that you should use React. Like every tool, there is a time and place. But React can be thought of as a swiss army knife of sorts in this analogy. Also if you're planning on ever trying to get a job in web development, the trends speak for themselves.

Have any questions? If something here didn't quite make sense, feel free to contact me directly!