8 ms·

Show HN: Build your first real world React.js application

261 points by mxstbr 10y ago

omnivore 10y ago
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.
acemarke 10y ago
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.
pavlov 10y ago
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.
- eschutte2 10y ago
  How would you do playback and automatic undo/redo without encapsulating your state transitions?
  - pavlov 10y ago
    Instead of storing an action descriptor stack, you can also implement undo/redo by storing all past versions of the model on the server. I know surprisingly complex applications with large data sets that do this. The important point of course is that any large data should reside in separate immutable storage, so that the top-level model (which gets serialized for each action) remains as lightweight as possible.
    - eschutte2 10y ago
      Yes, AKA "poor man's undo."
      - pavlov 10y ago
        Why ask the question if you knew the answer?
- trnmura 10y ago
  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.
  - yawgmoth 10y ago
    It's not so bad if you keep your exported consts in a file with JsDoc comments.
  - 10y ago
primaryobjects 10y ago
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 10y ago
  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 10y ago
    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.
jcoffland 10y ago
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 10y ago
  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 10y ago
    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.

261 points by mxstbr 10y ago

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.

acemarke 10y ago

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.

pavlov 10y ago

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.

eschutte2 10y ago
How would you do playback and automatic undo/redo without encapsulating your state transitions?
- pavlov 10y ago
  Instead of storing an action descriptor stack, you can also implement undo/redo by storing all past versions of the model on the server. I know surprisingly complex applications with large data sets that do this. The important point of course is that any large data should reside in separate immutable storage, so that the top-level model (which gets serialized for each action) remains as lightweight as possible.
  - eschutte2 10y ago
    Yes, AKA "poor man's undo."
    - pavlov 10y ago
      Why ask the question if you knew the answer?
trnmura 10y ago
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.
- yawgmoth 10y ago
  It's not so bad if you keep your exported consts in a file with JsDoc comments.
- 10y ago

primaryobjects 10y ago

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 10y ago
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 10y ago
  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.

jcoffland 10y ago

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 10y ago
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 10y ago
  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.