My Adventures in React

I haven’t written anything in a while, and this is largely due to attempting to learn React.

For anyone who is unfamiliar, React, or React.js, is a JavaScript library used for building websites. Originally developed by Facebook, it is an extremely popular utility which allows websites to be built quickly, efficiently and provides a great framework for building responsive, interactive sites/apps.

All that being said, React is a pain-in-the-butt. For a beginner like myself, React has a pretty steep learning curve and it has nearly crushed my soul.

What Makes React Different?

I’d like to preface this by saying that React is not a new technology. It has been around for some time now, and has a huge following, so anything I have to say about what React is and what it can do has undoubtedly been covered extensively by people with much more skill & knowledge than I have.

With that in mind, here are some of my observations:

  • React uses small components to build big things
  • React components are written in JavaScript
  • JSX is used to write pseudo html inside JavaScript
  • React forces coders to learn good code.
  • React has components manage state, rather than the DOM

Let’s look at each of these things, so that maybe I at least can understand them better.

Small Components

I have read in several places that good React components do a single thing. If you need to do two things, build two components. I have tried to take this approach, and the result is I end up with a lot of tiny components. I like this because every component has a single task and when it comes to debugging I know quickly where to look.

Another advantage here is when I read other people’s code who have taken this approach, I can pretty quickly get an idea of what they are trying to achieve.

Components Are Written In JavaScript

Well, this one’s pretty self-explanatory. Most of my React apps have an html page consisting mostly of

<div id='container'></div>

The entire markup is created in JavaScript through the React component’s render() function. This all gets rendered to a ‘virtual DOM’, which I’m told is a pretty great thing but I don’t understand the process well enough to really comment one way or the other.

JSX

As I mentioned above, the usage of html is pretty limited with React, and instead the markup is created inside the JavaScript. Since you can’t just write html inside JavaScript, instead we use a type of XML syntax called JSX, which will look a lot like html and ends up accomplishing much of the same things. But it’s not html.

Learn Good Code

This is more about best practices. With JavaScript in general, it’s best to create functions which accomplish a single task. This makes it easier to reuse these functions whenever a need arises and makes debugging a bit easier. Since React is just JavaScript, this practice remains ‘best practice’.

I didn’t realize the usefulness of this until I built my last project. Part of it utilized a modal window for user input and in the course of development I was faced with the decision of building multiple, similar modal windows every time I needed one, or just reusing the first one I built and passing the necessary differences as arguments. Seeing as how the modal window ended up consisting of around 10 different components with all associated CSS and state, re-usability was looking like a pretty good option. I don’t know if this choice made me a better coder, but it used less code and felt pretty awesome when I finished it.

Components Managing State

There have been so many times, while building standard html/css/js(jQuery) pages that I’ve needed a certain bit of information and resorted to using JavaScript (or more often jQuery because I’m lazy) to access pieces of my html to find the information.

In React, this is frowned upon. State lives in the components and once something is rendered to the DOM it is as good as gone and forgotten. If you need information displayed in the DOM you store it as state, then access the state as needed. If the information needs to change, it changes as state and then React will update everything associated with that state.

For me, at first, this was really confusing. I had always looked at coding from an imperative perspective, and felt it necessary to micromanage every step along the way. One of React’s greatest strengths is that it is declarative rather than imperative. You tell React what you want to do and React just does it. No need to spell it out every step of the way. When your state changes, React triggers a re-render and the changes get pushed to the DOM. No muss, no fuss.

Best Of All

Since growing in popularity, folks are realizing that React is not just for websites. React Native allows coders to build iOS, Android and Windows Mobile apps using React. React VR, you guessed it, is a framework for building VR apps using React. The long and short of it is, if you have a DOM there’s a good chance you can use React to develop for it.

For anyone wishing to learn React, the React Fundamentals Course by Tyler McGinnis was an excellent resource. The material is presented in an easy-to-understand format and you get the feeling that Tyler really understands what he’s teaching.

2 thoughts on “My Adventures in React

  1. Pingback: NPM and Building Locally | Kyle Holm

  2. Pingback: Back To The Basics | Kyle Holm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s