My introduction to react: fun, dynamic webpages

In the first phase at Flatiron school we learned the fundamentals of JavaScript, which to be honest was pretty hard to wrap my head around. Until we were applying these concepts to real world things, creating our own websites, a lot of them didn't make a whole lot of sense to me.

JavaScript is difficult for me because there's many ways to produce the same result, which is sort of a double-edged sword. JSX and React was lifechanging for me. I got to read code that had that familiar "HTML" feel but produced complex JavaScript flavored webpages.

For instance, If I wanted to render a list to the DOM using JavaScript I would have to do something like this:

JavaScript

This function is assuming I have an array of objects. I'll be fetching data from an API, and then creating a card with each with the details..

// imagine listDiv is my container holding the cards
const dogs = [ 
{name: "Bug" image: "doggoimage.com/bug"},
{name: "Stella" image: "doggoimage.com/stella"}]

document.addEventListener("DOMContentLoaded", () => {
const dogCard = (dog) => {

const card = document.createElement("div")
card.className = "card"
listDiv.append(card)

const name = document.createElement("h3")
name.textContent = dog.name
card.append(name)

const image = document.createElement("img")
image.className = "good-doggo-image"
image.src = dog.image
  }
// fetch request here....
}

That's a lot of work! You might ask yourself, why should I learn react? It's just another way of doing the same thing. The above code is referred to as imperative; We are manually manipulating the DOM to achieve a specific result. With imperative programming we are telling the DOM what do to, every step of the way. This leads to repetitive code that's harder to read.

With JSX in React, I can achieve the same results with less repetition, and with its unique under-the-hood workings, I can re-use each "JSX component" over and over again without re-writing it.

Lets say we have a component called , I want to render a dog card for each of my dog objects like we did above in JS.

React

Assuming the same dog array of dog objects above..

import React, { useState } from "react"

export default function DogList(){
const [doggos, setDoggos] = useState([])

fetch("doggoimage.com")
  .then(r => r.json)
  .then(dogs => setDoggos(dogs))

const renderedCard = doggos.map((doggo) => {
  return (
    <DoggoCard name={doggo.name} image={doggo.image} />
  )
})
     return (
       <div className="card-container">
       {renderedCard }
       </div>
  )
}

Now! with all that set up, we can go down one level to our child component, the card itself. While above we set up that data that is going into each card, we can use the child component as a template for how we want that data to look.

import React from "react"

export default function DoggoCard({ name, image }){
    return (
      <div className="doggo-card">
        <span className="doggo-name">{name}</span>
        <img alt={name} src={image} />
      </div>
  )
}

This might look like the same amount, or even more work to do, but with JavaScript you'd have to do so much more to make edits, add things, even re-write the original code over and over. This format does a lot of work for us under the hood and enables us to focus on styles and the fun parts of web development. React also allows us to add unique functions to our components with only a few lines of additional code. Want to have an alternate image when you click on a card? Easy! Just add an onClick event listener to the card template and do what you want!

import React from "react"

export default function DoggoCard({ name, image }){
    return (
      <div className="doggo-card">
        <span className="doggo-name">{name}</span>
        <img 
          alt={name} 
          src={image} 
          onClick={(e) => console.log("You clicked me!")}
         />
      </div>
  )
}

Of course that console log doesn't really do much, but you get the idea. You could replace that function with a multitude of other things, even pass in a function from within another JSX component.

Conclusion

My experience with react at first was daunting, it was hard enough learning the basics of JavaScript, let alone translate that into a whole new world of syntax. If you're like me, and you have some experience with HTML then this syntax doesn't look to foreign after all. Once you get the hang of everything that's going on, you'll realize the reason why React is so popular in the web development community. Taking puzzle pieces and plopping them into place is a satisfying feeling. Creating the bones of your web-app with React becomes super easy, allowing you to spend the rest of your time trying to decrypt the mysteries behind CSS ;).