Back to Posts

My two cents on React

Nikola Novakovic in Code

Recently ( in the past 5 months ) I've been wanting to play around with React. I tried to stay away from the hype and not to do it just because all of the cool kids are using it, rather because it will be valuable to me as an engineer and fun to code in of course.

I stumbled upon this course from @wesbos and I decided to jump in. I knew a bit of React before and some of the main concepts ( that's mostly why I wanted to learn React at the first place ) and I finished the course with a nice React app.

Here are some things I reallllllly liked about react:

1. Small composable components

I love the idea of small composable components. It just makes scaling and maintaining so much easier, rather then having everything in one big glued tightly coupled together pile of code. Here is an example of how you could compose compononents together:

//main app file
import NotFound from './components/NotFound';  
import App from './components/App';

var routes = (  
  <Router>
    <Route path="/some-url" component={App}/>
    <Route path="*" component={NotFound}/>
  </Router>
);
//app component
import React from 'react';  
import Header from './Header';  
import Car from './Car';  
import Comment from './Comment';

class App extends React.Component {  
  render() {
    return (
      <div>
        <div>
          <Header/>
        </div>
        <Car />
        <Comment />
      </div> 
    ) 
  }
}

It just uses native es6 import syntax and everything works.

2. Easy to test

The more I write software the more I don't want to ship software that has no or half broken tests. I think that there comes a time in every software writers life that he/she gets enough experience and wisdom to appreciate automated tests.

Since React preaches components and modularity, if written correctly, every component should be pretty straight forward to test.

Here is an example of a simple test:

import React from 'react';  
import expect from 'expect';  
import {createRenderer} from 'react-addons-test-utils';

import Header from './Header';

describe('Header', () => {  
  it('works', () => {
    let renderer = createRenderer();
    renderer.render(<Header name="Nik" />);
    let actualElement = renderer.getRenderOutput();
    let expectedElement = <div><h1>Nik</h1></div>;
    expect(actualElement).toEqual(expectedElement);
  });
});

3. React Native

I always loved hybrid apps but they always felt a bit slow compared to native builds. React Native changes everything and I was blown away how amazing it is and I honestly believe it will be one of the prime ways to write mobile ( maybe watch ;) ) apps.

There is a large number of great apps being built on it, some native devs moved to React and that's so exciting.

Well that sums up my experience with React. I am still fresh and new to it but I can see myself building apps with it in the future. I also need to brush up on Flux pattern and start using it with React. Can't wait to blog about that, until then sayonara fellow coders!

Software engineer that loves business side of things as well. Also lifts a lot of weights.

Read Next

Write better functions in Javascript