Blog

Back

An introduction to React

By Marcos Mellado on 8/4/2016

Everybody is talking about React, the Javascript framework developed at Facebook. The framework has grown tremendously since it's release and it's started to be adopted by tons of people, including companies like Airbnb, Coursera, Dropbox and many others.

In this blog, I will be sharing a little bit about my experience onboarding with React, from figuring out how it works, all the way to using it to build a full website.

It's important to understand that React is not for everyone. In my case, coming from a Computer Science background made it easy to understand its concept, but talking to designer friends, I realized it wasnt as straight forward to everyone.

I started to look into React about a couple of months ago. I wanted to learn a new framework that would be not only useful in my career but also fun to play with. After checking a bunch of job boards online, I realized that today, React was one of the top 3 most required skills for front end positions, making it an easy choice amongst all other frameworks. I found Angular and Ember to be part of this list too, but I use Angular at work already and having friends who work on Ember, I wanted to try something different.

My first interaction with React was through a course in Code School which I highly recomend. After a few minutes of watching the videos, I learned that it wasn't going to be as straight forward compared to other frameworks I've worked with. For starters, React was designed thinking of ES6, which at the moment I was unfamiliar with. On top of that, React introduced Javascript XML, or JSX, a new syntax for writing markup that I would have to learn as well.

After diving into both ES6 and JSX, I felt ready to start figuring out my way around React.

The fountation of every React applications is that itconsist of Components, which are pieces of markup that will be displayed on the browser. These are the equivalent to Views in other MVC frameworks.

On top of that, every React application has a state object. This is read by the Components to learn what is happening around the app and know what to do about itself.

This bring the first big difference between using React other frameworks. Instead of having event listeners, we modify the state of the application and re-render the component based on it.

Let's compare the traditional Event Listener vs the React state using a hamburguer menu as an example. In a traditional environment, you would attach an event listener to your hamburguer menu button. When clicking on the button you would likely toggle a class "open" in your menu to have the menu change it's styles via CSS.

With React the approach is very different. Within your Component, you define a function to change the state of your app. When the state changes, React will try to re-render the Component, at which moment we woud check the state of the app and render the component with the necessary class. Something along the lines of:

....
   
_updateNavState() {
  setState({
    isNavOpen: !this.state.isNavOpen
  })
}

render() {
  let navStatus = this.state.isNavOpen ? 'nav-open' : '';
  return(
    <div className="menu">
      <button onClick={this._updateNavState}>Toggle Menu</button>
      <ul id="hamburguer-menu" className={navStatus}>...</ul>
    </div>
  )
}

...

Now, it's easy to question why is this a better approach. First of all, this allows us to keep our application's state within the Application and not in the DOM. This makes it a lot easier to maintain your code and fully abstract any logic from it.

The second reason is because React is very smart about how it renders your markup. When the application's state changes and React gets ready to re-render, React makes a diff between the current rendered markup and the anything new. If the markup changed in any way, React will re-render JUST THAT PART. If no changes happen after the state change, react won't bother in rendering anything new. This is possible because of React's Virtual DOM, a virtual copy of the DOM which it can use to compare and then update the DOM tree. This also beneficial to your application's performance.

I will dive deeper into building a react component in another post. For now, we are left with the following details

  • React is built with Components
  • React apps have a state object that's shared across components
  • React uses the state object to update the DOM instead of traditional event listeners
  • React's Virtual DOM helps improve your application's performance.

I got to reiterate that I'm no expert in React and this post is the result of my personal experience. Let me know in the comments if you've had any experiences with React and how you feel about it.