Quick Intro to React.js

React.js Feb 07, 2020

Alright, if you're a web developer, you've probably heard of this thing called React.js. If you're a web developer you also definitely know about HTML/CSS (or so I hope).

So what IS React?

Not too hard to answer, to be honest. React is a web framework that people use to build frontends, which can be used in things like websites, or even desktop apps! They also have a library for building mobile apps, called React Native, but that goes beyond the scope of this blog post.

So to understand React, you gotta first understand normal JS. Ever heard of the DOM? The DOM is the Document Object Model—how JavaScript interacts with a webpage to make it interactive. Essentially, when you run JavaScript on an HTML page, each element is an HTMLNode. For example, look at this web page:

How google.com looks in Chrome Inspector

Now, if we log the document through console using console.dir to get all the properties:

It logs an object! Totally unexpected, right? Okay, maybe not.

The point is, the document to JavaScript is an object that can be manipulated. New elements can be created via JavaScript, elements can be deleted, or updated via JavaScript as well.

So then if JavaScript can do all that, what's the issue?

Well the real issue is that any time you perform an update for any small part of the DOM using regular JavaScript, the whole page re-renders. This means that even if you have a small update—a counter, for example, that keeps incrementing—the entire page re-renders to update what you see. This issue is solved by React.js and its honestly innovative (and honestly much cleaner-looking) approach to the solution.

Getting into React.js

So React has this whole concept of state, and you're gonna hear about it and see it all the time when dealing with React. State is exactly what it sounds like: the current state of your application or page. In a very simplistic example, let's look at an average person, for example. If we had a state attribute to see whether they are awake or not (let's call it "status"), we'd set status to "AWAKE" when he or she is awake, and to "SLEEPING" when he or she is asleep.

In the context of code, let's go back to the counter app. Here's some example React code for how state would be used:

In this code, let's take a close look at a few parts. First of all, there's the useState function: what is it? Why? How??

useState is a function known as a React Hook, since it lets us as developers "hook in" to React's features. We use useState to define an initial state for something for our app, and then we get two things in the form of an array: the first item, which is count in this case, is the variable containing the current value of that state.

You'll notice that I use a constant declaration for it though, so how do we change the value of count? Well, you use the second item returned by useState, which is the setter function, or in this case setCount. What setCount allows me to do is update the value of count and trigger a re-render of the specific component where the state was changed.  This is very important because it means that React offers a significant performance increase over traditional JS, which as we said, re-renders the whole page on every update. I won't get into how React does this, but if you're interested, I recommend reading up on React's Virtual DOM.

So because of setCount, I'm able to define those two functions increment and decrement. Now that I have the state and its respective functions set up, I can start to build up the actual frontend!

In the return statement for a function in React, you return HTML, essentially. If you only wanted to return one line, no need for the brackets, but as you can see I'm returning multiple lines. One catch in React: you can only have ONE element that you return. So how do we return multiple lines of code? Simple: we use a grouping element, or in this case div, and put all the code inside there.

Inside the div element, you'll see some h1 text, and then you'll see something funky: {count}. Only curly braces in React are how you inject plain ol' JavaScript into the HTML. So when I put {count}, I want to show the value of the variable count inside the h1 text. But, I'm not limited to variables, I can also inject functions! Take a look at the button elements for incrementing and decrementing the counter: I inject functions into the onClick properties.

Quick note: In React, all properties are camelcase, so onclick turns into onClick. Also unrelated to this, but because class is a reserved word, when defining an HTML class as a property for a React HTML element, you use className.

Alright, so we basically have our app, or our component, set up. How do we actually get it to render? Simple. We use the ReactDOM.render function, which takes in some code and an HTML object to mount onto. So to pass a React component as code, we literally just do <Counter />, where Counter can be the name of any component. I could also do <Counter></Counter>, but I prefer the shorter syntax since I'm not sticking anything inside Counter.

Alright, so now that we've finished coding the stuff in React, how do we compile it? In my opinion, best thing to do is to use this thing called create-react-app. Just install that as a global NPM module into your terminal, and then you can go ahead and say create-react-app test which creates a folder test in the current directory, and installs all the necessary modules and even sets up a boilerplate file structure for you!

Inside the test directory, run npm start. This starts a server on localhost:3000 that automatically reloads when you make changes! Pretty neat, right? It also automatically opens it in your default browser. Anyways, go ahead and edit src/App.js.

In the first line where it says import React from 'react';, be sure to change it to import React, { useState } from 'react'; since we'll be using state in our app. All you really need to do after is take the contents of what's in the Counter function, and paste it inside the App function, replacing all of its contents. The end product should look like this:

Well, once that's done, save the file and visit localhost:3000 in your browser! If you did everything right, the counter should be up and running. React is a fun language to use and can simplify a lot of things so if you are interested in it, I definitely consider learning more about it since there's so much depth you could go into. Thanks for reading and have a great day!

Arnav M. (giant flying kitty)

17 year-old living in the Bay Area. Obsessed with learning and honing skills when it comes to coding. Currently proficient in Node.js and React.js, while learning a lot more! Part of Nexus Creative.