My Experience Learning React JS

Introduction

Out of the handful of programming languages I have dabbled in so far JavaScript has been the most interesting so far, but after learning about React I have come to realize just how little I knew. Before learning about React I barely read about libraries thought they were hardly used and so I never really learned much about them however, since learning React JS I have learned much more about libraries and frameworks. Tools like React really reinforce the feeling that programming has endless possibilities and a big reason I got into programming was because I loved the style of creativity that came with it.

Learning about React

When I started learning React, my first impression was like living with an organized person after living with a very unorganized person. While I didn't know it when programming with base JavaScript now that I have worked with React, base JS almost gives me eye strain. I still enjoy base JS however, the more that I used React it supported my thoughts on how much better it felt to work with. React is a very helpful library with some amazing features, the feature I favorited and is overall, one of if not the most used features, has to be useState.

React State

The useState hook is something every React developer will use constantly and can be used in a plethora of ways. To use state you have to first import it from React wherever you are trying to use the hook like so:

import React, { useState } from "react";

The useState hook returns an array with two variables, the current state and a setter function.

const [value, setValue] = useState(0)

Note: When using destructuring like above the names inside the brackets can be anything but the first variable will always represent the current state and the second variable will always be the setter function

Whatever is in the parentheses after useState is the initial state, in this case, it's 0. Currently, since the setter function has not been used, value === 0 but the setValue function allows you to change the state.

setValue(1)

console.log(value)
//Output: 1

Whatever is in the parentheses after the setter function will become the state's value. The value passed to the setter function can be just about anything like an array, object, or a string:

setValue("Hello, world!")

/*
setValue(["bob", "joe", "Dre"])

setValue({
   "username": "Jane",
   "password": "1234GoodPassword",
   "email": "[e-mail]"
  })
> Note: To access this ^ data is the same as normal arrays and objects. So value[0] would return "bob" and value.username would return "Jane".
*/

console.log(value)
//Output: "Hello, world!"

An important part of using the setter function is that when called, the component the state is in will re-render and if the component has any children components they will re-render as well. This is very helpful when using useState for things like controlled forms. Controlled forms are very common use for React State and allow you to track the information in forms, here's an example.

import React, { useState } from "react";

function ControlledForm(){

   const [formValue, setFormValue] = useState("")

   return (
     <form onSubmit={e => e.preventDefault()}> 

       <input type="text" value={formValue} onChange={event => {
         setFormValue(event.target.value)} />

    </form>
   )
}

export default ControlledForm

In the example above the state is set to an empty string so the text input is blank initially. The formValu will always be what is typed into the text input because every time something is typed it activates the onChange and sets the formValue to what is typed (event.target.value). Because setFormValue re-renders the component the user will always see the updated formValue. The controlled form method is extremely convenient and allows for precise control over various data types.

useEffect

The useEffect hook is used to create side effects wherever you need them. The hook takes in a callback function(the side effect) and a dependency array. Here are some example's of the useEffect hook:

import React, { useEffect } from "react";

useEffect(() => {
   console.log("I will run once after the component loads")
}, [])

useEffect(() => {
   console.log("
     I will run once after the component loads and every time the 
     'value' is changed after
    ")
}, [value])

In the example above the first useEffect's empty array tells it to only run the first time and the second useEffect's array tells it to re-run as a side effect of the 'value' prop being changed. There are many uses for the useEffect hook but are most commonly used for data fetching and DOM updates.

Conclusion

While I still have a lot to learn I have thoroughly enjoyed my time using React. The various hooks in React made my experience much more interesting compared to base JavaScript. I'm very proud that I get to become a part of such a brilliant community. In my time learning I keep getting surprised by how far programming has come in the short time it has been around. For a much better explanation of React and its hooks please refer to the React Docs.