
Show HN: Build your first real world React.js application - mxstbr
http://academy.plot.ly/#react
======
pavlov
Nice tutorials. I've been playing around with React, and I like it overall...
But I can't wrap my head around Redux. Could someone explain it to me so I
might finally see the light?

My problem is this: I just can't understand why I'd want to manipulate state
in an unsightly switch statement like this one from Chapter 4 of the original
post:

    
    
      switch (action.type) {
        case 'CHANGE_LOCATION':
          return Object.assign({}, state, {
            location: action.location
          });
        case 'SET_SELECTED_TEMP':
          return Object.assign({}, state, {
            selected: {
              temp: action.temp,
              date: state.selected.date
            }
          });
        case 'SET_SELECTED_DATE':
          return Object.assign({}, state, {
            selected: {
              date: action.date,
              temp: state.selected.temp
            }
          });
        default:
          return state;
      }
    

This reminds me of Win32 event loops with their window message handler
switches... And that's a scary association.

What's the point with dispatching these fragile "stringly-typed" selectors,
when you can just have real functions doing setState() updates on the relevant
component?

I'm not trying to be snarky -- I know I'm missing something major here.

~~~
trnmura
I find this string pattern terrible as well. As the application grows, there
are lots of reducers with lots of strings, and it gets really confusing. It
feels like this is inherited from Flux
([https://facebook.github.io/flux/](https://facebook.github.io/flux/)),
Facebook's initial solution to handling state.

On the other hand, you have all the state logic on reducers... If actions were
to dispatch state-modifying functions, it wouldn't take long for the code to
become really confusing.

~~~
dandelany
I'm not sure why everyone is getting hung up on the fact that this is
implemented with strings and a switch statement. Who cares? Use constants. If
JS had enums we would use them, but it doesn't.

The point is that there are a finite, well-enumerated set of possible state
changes, which are all localized in one place: the reducer. Whether you call
them "DO_THING" vs. constants.actions.DO_THING (which could be an integer or
whatever you want) or whether you use a switch statement vs. if block vs.
dictionary lookup is entirely up to you.

~~~
sotojuan
I'm not sure why but a lot of developers think or are taught that switch
statements are old fashioned or even bad.

~~~
ramchip
Probably because programmers new to OO tend to use them when
inheritance/interfaces would be cleaner (case cat, case dog, etc.)

------
acemarke
Surprisingly few comments so far. My take: Max Stoiber is a fantastic
contributor to the React ecosystem. His React-Boilerplate project is a solid,
well-designed starting point for production application development. This new
tutorial is well written, makes good use of the new Create-React-App tool to
simplify the learning curve, and covers several topics in good depth to get
someone started.

------
jcoffland
I find I am more productive with vue.js. It is much less intrusive on my
coding style. I believe react.js is mainly popular because of FB's support.
Much in the same way Angular became so widely used due to Google backing. I
too have fallen for the myth that Open-Source projects backed by huge
companies are always better. Do your homework. Don't believe the hype.

~~~
jeff_marshall
Would you mind sharing your rationale?

As someone approaching web front end development from a clean slate (es6 isn't
the monster I though javascript to be, though there are some warts), can you
tell me what vue does better than the alternatives (e.g., react)?

I'm building my first prototype of a web-based application right now, and
sticking with raw ES6 to keep the cognitive load down (relative to javascript
+ a framework), but I'm likely to switch to one framework or another to get
ride of some of the boilerplate I see happening.

~~~
jcoffland
You should try it out. There's no good way to answer the important questions
with out putting in some effort. but... Vue.js is really fast. It does not
require that you template your HTML in a special language like react. It works
well with Jade and Stylus. It's really well documented. It's stable.

------
primaryobjects
I just went through the first tutorial and it's well written. However, I just
had to try it with AngularJs and jQuery as well. Here are the results
[http://goo.gl/V0NvkC](http://goo.gl/V0NvkC)

In such a simple example, I think jquery wins. However, more complicated
solutions might be better suited towards frameworks like Angular and React.

~~~
Sacho
The jQuery app may seem "the simplest", but it has no notion of components -
[https://jsbin.com/jupagugofe/edit?html,js,output](https://jsbin.com/jupagugofe/edit?html,js,output),
whereas the
angular([https://jsbin.com/mepijibika/edit?html,js,output](https://jsbin.com/mepijibika/edit?html,js,output))
and
react([http://jsbin.com/gijigiqecu/edit?js,output](http://jsbin.com/gijigiqecu/edit?js,output))
apps do.

~~~
alexbanks
If you ever find yourself in a codebase featuring a group of "full stack"
enterprise developers, you'll find not a single component in an Angular
codebase.

------
omnivore
What I like that you've done is that start CTA in the right nav menu. Not just
that it's action oriented it just made me feel like I could start/play around
post-login without having to deal with a lot of redtape just to start using
it.

Which for any new tool is important. Good luck.

