By my title, you're probably wondering if this is an article about political theory. It's even better--or worse! We're talking about React! Based on my studies in college, I never thought I would be writing about programming over political theory, but here I am, and I'm pretty happy about it!
When I first started learning how to code in Javascript, I found it a bit frustrating how the interaction between the user and the browser was so dry. "Why isn't what I'm typing directly affecting the DOM?" I wondered. I figured since I was new that it was just something I didn't understand, but I was still curious. Then, I had a meeting with a coding instructor to get some help on a lab. When he looked over my code, and said parenthetically, "Hmm...this is a bit redundant but probably not worth teaching you to write it better. It won't be necessary once you get to React anyways." At that point, I was too overwhelmed to wonder what React was, but I had an idea that it would provide some sort of answer to my curiosity.
And it did!
WHAT IS REACT?
React is a framework (or library) used on the front end of programming. It is entirely built out of vanilla Javascript, and it allows us to construct websites in particular ways. With JSX, the code that is used in React, you can construct building blocks for websites, known as components, that not only allow you to easily construct pleasantly organized websites but also facilitate direct user manipulation of the website (what I was talking about earlier!). It does this through what is called a Stateful Component!
WHAT IS A STATE?
To understand a state component in React, it's useful to understand a prop. For a parent component to pass useful information to a child component, it uses props. These props cannot change unless their parent allows it. Their parents are strict! On the other hand, states allow us to update information in the component (the building blocks of webistes) without informaiton from the parent. Think of them as the disobedient children when compared to props. Essentially, states turn the DOM from static to dynamic because they allow users to directly manipulate the DOM.
HOW DOES A STATE WORK?
In order to use a state, you must import it from react.
import React, { useState } from "react";
Let's say we want to create a button that, when pressed, adds to a counter. That counter starts at 0 and increases by 1 each click. In order to do that, we must create a Counter function and initialize the state inside of it.
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState[0];
return <button>{count}</button>
}
This code might look at a little strange at first. Why do we do it this way? We could always write it this way:
const countState = useState(0) // this gives [0, setStateFunction]
const count = countState[0];
const setCount = countState[1];
While this this exactly the same as the code above, the former is much cleaner. Essentially, useState creates an array, where the first [0] value is the default state, and the second [1] value is the function that can change that state. By destructuring in the first former code, we are able to create this array in a clean way. In our example, count has a default state of 0, and setCount gives us the ability to change this count.
So, if setCount allows us to change the value of count, let's create a function inside Counter that allows us to do that.
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
return <button>{count}</button>;
}
Not only does this new function add to our count variable, but it also automatically re-renders. What makes state so powerful is that it allows us to manipulate the DOM without having to find any buttons or forms. It allows us to change the screen without having to interact with things behind the scenes.
React provides us with state, which allows us to directly change what is on our screen without having to directly tamper with the HTML. This allows to write more powerful, versatile, and cleaner code. In understanding state, I now see how a majority of websites I interact with work! When I began to understand it, it felt like I was actually a computer programmer because I was understanding how things work now, whereas before I was just learning how to write Javascript. I hope after this article you feel a little more like a computer programmer, too!
SOURCES
Top comments (0)