React + Redux web app developments?

Oh! Finally angels are here, the time I have decided to become a react developer I thought that it might be tough. I struggled for a long time trying to understand what React is and how it fits in the web application architecture. This post is what I wish someone had told me but as the time passing I realized that react is an angel between demons :D

React is love :)

What is React ? React, Angular, Ember, Backbone comparisons. How to handle data? What about the server? What the heck is JSX? What is a “component”? and blah blah…

Please! stop your self right there.

The most important thing is that React vs Angular has no sense. React is just a view layer, it a rendering library not a framework like Angular. Angular is a complete framework including a view layer, unlike React . That is why React is so confusing to understand, for some developers it’s emerges as a complete frameworks, but to be clear it’s just the view.

React provides some function to essentially render HTML. That’s all React outputs, HTML.

The Love

1) You can tell how and what to render in you application in a single source file.

For example: 
In your app header you want to show the user name.

<header>  
<div class="username">
Not Logged In
</div>
</header>

$.post('/login', credentials, function( user ) {
// Modify the DOM here
$('header .username').text( user.name );
});

This code is a really mess, in React you need this.

render: function() {  
return <header>
{ this.state.name ?
this.state.name :
<span>Not Logged In</span> }
</header>;
}

It is amazing, isn’t it?

If you’re writing React, you have access to a more powerful styling construct than CSS class names. You have components.
michael chan

2) Makes components easily and understandable.

The mix of HTML / JavaScript might make you squirm. Working with JSX makes components in really nice manner.

Traditionally you separate views from functionality. So, you have to trace complex flow from JS > HTML > JS > bad-news-sad-time.

Tying functionality directly to markup and packaging it in a portable, self contained “component” will make you happier and less filthy in general. Your JavaScript has intimate knowledge of your HTML, so mashing them together makes sense.

Components written by different people should work well together. It is important to us that you can add functionality to a component without causing rippling changes throughout the codebase.
Facebook React Team

The Hates

1) Don’t forget that React is only the view so you can’t get these.

  • An event system (other than vanilla DOM events).
  • Any AJAX capabilities whatsoever.
  • Any form of a data layer.
  • Any application framework at all.

Redux

The most annoying part of React development is Flux. It’s far more confusing than React. The name Flux is a pretentious barrier to understanding. Flux is a concept, not a library but there are two known of the implementation of flux concepts one is alt.js and the other one is redux.js. I am gonna talk about redux.

Redux life cycle
Flux is a pattern not a framework.

Flux is annoying one to implement but the Flux concept is really simple.

That your view triggers an event let say user types a name in a text field, that event updates a model, then the model triggers an event, and the view responds to that model’s event by re-rendering with the latest data. That’s it.
Redux has caught on so much that it’s not just being used for React anymore. You can find Redux architecture implementations for other frameworks, including Angular 2.
Eric Elliott,

Should I Use React?

The answer is yes.

Reasons:

  • Works great for teams, strongly enforcing UI and workflow patterns
  • The UI code is easily readable and maintainable.
  • Componentized UI is the future of web development, and you need to start doing it now.

You should think twice before you switch:

  • React learning curve is really steep it will slow you down tremendously at the start. Understanding how props, state, and component communication works is not straightforward.
  • As we all hate IE React too. React does not support any browser below IE8.
  • If your web application doesn’t have very much dynamic page updating, you will be implementing a lot of code for a very small benefit.
  • You will reinvent a lot of wheels. React is young, so you’ll have to build large component libraries from scratch. Does your application have drop-downs, re-sizable windows, or light-boxes? You’ll probably have to write those all from scratch.

That’s It! :)