My Adventure in Learning React

Starting off

Learning what I would at the time consider an "entire new language" as part of the coding program that I was a part of felt extremely daunting. I had a whole 3-4 weeks of JavaScript, HTML, and some self-taught CSS as my tools and I still felt like I knew nothing going into it. I would like to quickly go over some of my initial thoughts going into learning React and how I feel after my first day in React.

Day one, what is React and what did I learn during my first few days?

React is an open-source front-end JavaScript library made for building user interfaces. Its major focus is making things easier to compile and mix JavaScript and HTML into what is called JSX, which is a syntax extension that looks very similar to HTML with the additions of JavaScript in the form of Components. Overall it is a much more "full-package" approach to maintaining all of the work you are doing while also making most of what you create modular and reusable across your entire project. JSX is currently maintained by Meta (formerly Facebook).

Outside looking in everything sounded promising. Fully understanding what we were going to do and easily understanding the basics almost before hearing it. First I will go into what goes into a Component so we can see what it is and how it is used.

import React, {useState, useEffect} from 'react'  //imports? hooks?
import '../App.css';
import Biscuits from "./Biscuits"


function MeowMeow({purr}) {   // functions, we got this one chief. caps?

    const [meow, setMeow] = useState("") // huh?

    useEffect(() => { // Useeffect? why not just Fetch
    fetch('http://localhost:3000/meows')
        .then(r => r.json())
        .then(setMeow)
    },[])

    function changeMeowState = () => {
        const newMeow = meow + "meow"
        setMeow(newMeow)  // But why tho
    }

    return (
        <div><Biscuits changeMeowState={changeMeowState} purr={purr}/></div> // The hell? HTML in my JavaScript where is my document.createElement()
    )
}

export default meowmeow  // what?

The comments in the code above are probably most people's reactions to seeing their first component. But it is much more intuitive than you think once you start diving deeper. At first, I was like what is all this random extra stuff I need to do? But very much like everything else in coding it is there for a good reason, otherwise, it would not work.

Reacthooks(), Props, and Imports

This was the first true problem I had with learning React. Just understanding the new syntax and funky stuff we could do was fun but stressful at times. Until the moment when things finally clicked I was as lost as the first day in JavaScript.

But all I needed was to understand some of the key differences from what I had already learned previously The first few lines of text in a Component are where you can pull in other things from outside the file you are working on. The first thing that is needed since React is a library is to import that library here so React can read and use our code. You can also quickly add .css, image, video, etc. files into your Components. You can even import other Components!

One of the most important parts of the first few lines is declaring which Reacthooks you are going to be using in the current file. The React hooks we learned about on day one had the functionality of rendering and updating the DOM for us as well as grabbing data from a back-end server(in our case a local .json). Where the hook useState() is responsible for updating the local data(state) and the DOM, useEffect() was responsible for taking that data and making it persistent through refreshes by updating our .json.

The real meat is the function you create with all of the imported information and what it returns and exports. You can see that you put your standard JavaScript mixed in with your new fancy Reacthook functionality into the function but we can quickly notice a few key differences. React components are usually outside the standard naming convention and are capitalized for each word. For file, function and export names I would advise using the same name for each so it helps you keep track of things. Because things can and will get busy quickly.

The export looks like something else we are familiar with but with some new flavor. this is our JSX. The HTML, JavaScript and .css soup. It allows you to quickly add your JavaScript and CSS functions to the things you need and allow for passing data down through components. For example, we are passing the Component "Biscuits" that we imported from another file and passing a function that we made here down with it as well as "purr" which is a Prop that was previously passed through our Component "MeowMeow" from its parent/s.

You should now begin to realize where this is going. React is making things much simpler to read and find the code you are trying to use or look for as well as making things reusable across your program. It also allows you to move your information throughout. But at the same time, it can lead to this giant tangled web that takes an extremely trained eye to traverse well. All of this code spaghetti outputs for the most part the same HTML that is even now showing up on your screen.

I lost more than the average amount of sleep trying to understand how to correctly use useState() and the passing of data through props. For the most part that was the brunt of the change besides the slight change in syntax. React is just a better, more intuitive way of creating web apps that cut out a large amount of redundant busywork code that was in base JavaScript and HTML. Overall I still feel like I have only seen the beginning of what React can do and I look forward to the next few weeks of my crash course.