javascript

First react app

davide

Jun 4, 2016 • 2 min read

So it's been two days that I'm trying to figure out how React works and how to use it for my projects.

I have to admit that I don't like React and I prefer to work with frameworks like Angular or Ember.
I know that most of the people that will read this will think "oh but is like comparing Apples with Oranges!!!" and is right because React is only the UI library, but with the set Redux / React-router can be considered as a barebone framework.

The app obviously is a Todo list ,it implements a login using Google and Facebook and a private Todo management, is only one page because I couldn't make the react-router to work properly but it's a first step. I haven't used Redux and co because I wanted to approach React gradually, maybe in the next project.

Conclusion

I'm used to the two-way binding so I've found React verbose in the fact that you have to communicate passing props to children components, this is code that you add and more code = potentially more bugs, plus I'm a lazy bastard, maybe this can be solved using Redux but I haven't tackled this yet.

I've found the documentation online not really good or too overwhelming, I mean the react-router example on github doesn't even work and the latest version of the package for redux-router is bugged and there is an issue closed in which they say to use v1.0.0beta3 as a fix https://github.com/acdlite/redux-router/issues/119 , does not look like a fix to me though because on npm they still ship the bugged one, and the official React docs are mixed between ES5 and ES6 (I started to write code in ES5 than when I switched to ES6 and webpack I had to fix some stuff ), and the examples are reeeeeeeeally basic.

The App code is on github at https://github.com/david1983/first-react-app
and the actual app is on http://davideandreazzini.co.uk:8000

Feel free to try it and if you find bugs, anti-patterns used, errors or if you want to comment this article please explain and refer to a some sort of documentation where i can check, otherwise you can click CTRL+W just right now.

Thank you