Learning React for Dummies

The holidays have been a little hectic for me, but when are they ever not? I've had my share of eggnog and political arguments (that I won btw), but now it's time to get back to that sweet clanky sound of my mechanical keyboard 😎.

I started my journey as a coder about a year ago and really started to spend all of my time (30-50 hours a week) coding for at least the past six months now. I feel like I've gotten a very solid handle on HTML, CSS, & the primitive concepts of Javascript for basic static websites as I've built a few real world projects with them now.

My next personal project is going to be a Job Board and I feel like I'm ready to learn a front-end framework. I'm going with React & then maybe down the road I will take a look at Svelte but for now I have React will work just fine.

I originally was introduced to React back about 9 months ago when a friend & I were attempting to code one of our startup ideas. Soon realizing that we had skipped ahead of so much necessary background knowledge to ever actually write any code on our own, I scrapped what we were doing and started working on my first real-world freelancing project that I got paid for. Now, I'm finally ready to actually start learning react and build something awesome with it.

So, what is React?

React is a javascript framework that allows you to create really complex user-interfaces.

React works by breaking down objects into pieces of code called Components.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

Components take in parameters called props (properties) & return a hierarchy of views to display via the render method. Each Component is encapsulated and can operate independently.

The render method returns a description of what you'd like to see on the screen, React takes this & displays the description.

We write React with JSX, this allows us to write JS expressions alongside of our html & css.

Passing props from parent elements to their children elements is how information flows in React.

Components use state to remember things. They can have state by setting this.state in their constructors.

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => console.log('click')}>
        {this.props.value}
      </button>
    );
  }
}

this.state should be considered private to the React Component that it's defined in.

To collect data from multiple children, or have 2 child components communicate with each other, you need to declare the shared state in the parent component.

When a components values no longer maintain their own state, but rather they receive it from a parent component, they are now considered Controlled Components.

Function Components are simpler components that only contain a render method.

Function Components can take in props as input & return what should be rendered instead of having to define a class that extends React.Component.

function Square(props) { 
    return (
         <button className="square" onClick={props.onClick}>
                {props.value}
     ) </button>
}

With Function Components we can access props with props.eventHandler versus this.props.eventHandler.

Well this is it for now. This is some of the very basic fundamentals of React, truly understanding how state and props work feel like should be my main focus over the next week. Maybe I will show how to do the Tic-Tac-Toe example from React's documentation next week. That is also where the example code for this article was found and also what I've been using the most to cement some of these concepts in my head.

Learning React for Dummies

Week 1