build with purpose

Simply Learning React

A Basic Learning Path

Learning React has always seemed daunting to me. I’ve downloaded several ‘quickstart’ projects in the past and quickly become overwhelmed. With the huge chain of dependencies I wasn’t able to get a clear picture of how it all worked. So I dropped it. I still used Ramda and other functional programming libraries, but I just passed React by because it wasn’t approachable.

Then Redux’s author, Dan Abramov made a post titled “You Might Not Need Redux” in September. He suggested that many of the benefits offered by Redux aren’t actually required to make an app but that he additional features and limitations promote some really amazing tooling and workflows. One quote that stood out:

”… if you’re just learning React, don’t make Redux your first choice.”

Suddenly a huge weight was lifted. Another tool that made React difficult to learn might not actually be needed! Hearing this was all the motivation I needed to give React another try.

Thinking in React

I started by going to the “Thinking in React” tutorial link that Abramov referenced in the article. It laid out the problem of designing a webpage to display the inventory of some store and suggested starting by breaking it down into components.

Component Breakdown

I’m pretty familiar with Angular Components so I felt right at home with the concept. The emphasis in the article is to organize the components in a hierarchy to visualize how elements are contained within eachother on the page. Squares encompasing other colored squares contain that element. I found this idea really helpful for designing websites in general.

Static React

The second section covered setting up a React app to visualize the data, ignoring state. At this point I realized that I have no idea how to build a react application with babel. The code was there, but I didn’t really know how to run it. So I did a bit of googling. Eventually I settled on this tutorial for setting up a dead simple React app with Webpack because I’d been meaning to check out Webpack for a while.

When I finished the tutorial I created another .jsx file, added it to my main.js file, added another div to my index.html page, and started plugging away on the second section. My goal here was still primarily to learn React after all and I could come back to more Webpack coolness later.

Going through this section the basic patterns on writing a React application became pretty clear to me. New components can be used like simple HTML tags and are created like this:

class MyComponent extends React.Component {
  render() {
    // logic to execute during the render step
    return (
      <!-- tags and other components with bindings -->
    )
  }
}

It looks similar to render loops found in games where the render function is run any time there are changes that may update what is displayed. Bindings look like this:

<h1>{this.props.title}</h1>

Also pretty similar to other frameworks and libraries like AngularJS and Moustache. I really liked how, unlike in Angular, there don’t seem to be directionality and functionality based on how the bindings are written.

At the end of the section there was a Brief Interlude talking about the difference between state and props. I read it and didn’t quite get it still. I found another github page did a better job of explaining it here. If it still isn’t clicking below is my take:

State is used for variables that change within a component. State is represented as a javascript object and it can change only be changed within the component that own’s it. State can be passed down to sub-components so that they can use this state. When this happens those components receive those values as props.

Props are read-only and are passed into a component through its constructor when it is created. The component is updated when these props change and it doesn’t have the ability to control them directly. Instead, one pattern is to pass down a function from the component that controls state for the sub-component to call when state should change.

There’s more to it but that’s enough to work with for this example.

Reactive State

The third section is pretty short and covers the decision making behind choosing which elements should control state. This really helped drive home the state vs. props concept for me.

Now, the fourth section has us adding state to the model we’ve created and introduces us to a new part of our Component. The constructor:

// inside MyComponent
constructor(props) { // <- look props!
  super(props)
  this.state = { // <- look state!
    // object definition of state
  }
}

This felt pretty similar to extending objects in Java with inheritance. Setting the state also seemed pretty straight forward.

Inverting the Flow

The final section covers the ‘Inverse Flow of Data’ where we work to update the state from sub-components. We need to register these functions in our constructor and use this.setState() to update the state:

// inside MyComponent
constructor(props) {
  // ...
  this.handleChange = this.handleChange.bind(this)
}

handleChange() { // <- basically a function
  this.setState({
    // changed attributes passed in as an object
  })
}

Thus concluded the article which gave me a great place to get started with React minus all of the extra crap included in those quickstarts. I actually kept working on this page a little bit more and added functionality to search without case-sensitivity. The style was also still a little bit lacking wo I added in some Material-UI components and style. The changes required a few tweaks and moving some things around which helped solidify a couple things. The result is below:

json-endpoint-diff

React All The Things!

So now I knew React! But it still didn’t really feel like it.

Later that week I came up with an idea for a tool I wanted to have for a big database migration I’m currently involved in. I wanted an easy way to compare the JSON output between a migrated endpoint and the original in a visual way. I used the techniques outlined in the article and came up with something awesome!

Check it out on Github

json-endpoint-diff


json-endpoint-diff

I think this is a great testiment to how easy it was to get started and productive with React. I like how my code is output from my Javascript rather than from templates and I like how I can use existing programming constructs like Array.map() to create repeating components in my render function.

I’m really excited to keep working with React and I’ll be posting more content here going forward as I keep learning.

Make my day and share this post:

Other posts to peak your interest:

  • Understanding Visual Testing
  • The Redux Saga Black Box
  • What my college degree gave me
  • Technical Leaders Enabling Stronger Teams
  • Finding Your Gateway to Learning Vue
  • Why Write Server Rendered Frontend Apps
  • comments powered by Disqus
    © 2019. All rights reserved.