React Ramblings 00001

Embrace the Suck

Posted on Jul 16, 2018

Learn React, they said. It will be fun, they said.

Learning new things is fun, but can be overwhelming at times. Being a noob and knowing it comes with it's advantages when first learning. Thankfully I'm still pretty new to React so I have zero ego at all with it and don't feel ashamed googling every error message that pops into the console.

So picking up a "new" (I know, I'm late to the party) library shouldn't be that much of a struggle. 

It turns out I was super wrong and I don't know nothin' about anything.

Me

Some things I'm having a hard time with so far: all of the new syntax and how data gets passed between components. Remembering to import and export everything. Not altering the state the wrong way - but those are other blog posts.

Notice how many digits are in the title of this page. I fully expect to run into that many problems. And it's kind of nice going into something knowing it's a massive mountain to climb and being okay with stumbling along the way.

Okay, what's the problem

React uses components. Components are pretty cool re-usable chunks of code that you can pass properties to and update content in an even cooler way.

Component-ize all the things.

Me, internally

So after componentizing(?) every inch of this example weather app I'm working on, I realize that I have a lot of components that get passed something and render that something out (a header component with a logo and name, in my case). They don't have any state. So these components don't really need to be full-blown components.

Converting to functions

So I start refactoring these class components into functional components using the react docs. Shouldn't be too difficult, right?? 

component Header.js
class Header extends React.Component {
    render() {
        return (
            <header className="mainHeader">
                <h1>{this.props.name}</h1>
                <img src={this.props.logo} alt={this.props.name} />
            </header>
        );
    }
}
Functional Header.js

To make the class component into a functional component, I started by replacing the entire `class Header extends React.Component` with a `function Header(props)`. Then removed the render method. Then removed `this` from the keys. Made the function into an ES6 arrow function, removed the return then put the first parenthesis on the line as the arrow function making it an implicit return! Neat!

const Header = props => ( 
  <Header className="mainHeader"> 
    <h1>{props.name}</h1> 
    <img src={props.logo} alt={props.name} /> 
  </Header>
);

Disaster

Aaaaaaaand I get no error and the page silently slips into a spinning wheel of death.

After a lot of head scratching and googling to no avail, I realized that I accidentally capitalized the HTML "Header" element and React thinks this is a component inside of itself.

Component-ception

So, this is what we have now.

const Header = props => ( 
  <header className="mainHeader"> 
    <h1>{props.name}</h1> 
    <img src={props.logo} alt={props.name} /> 
  </header>
);

So my 30 second job turned into me not knowing wth to do for longer than I care to admit. This is the first stupid problem that frustrated me to the point of needing to take a break. 

I know this is a pretty simple error, but writing this blog post is helping me never make this mistake again. Be prepared for many, many more posts like this.