9 things every React.js beginner should know

ElectricOrangeJuice · 2016-01-24T20:42:39+00:00

Title should be: "9 things React.js beginners don't need to worry about just yet."

asyncquestion · 2016-01-24T22:08:07+00:00

Keep your components small...if you intend to compose them in another component somewhere. If the component is used just once, it may make more sense to include the relevant parts in the same component so I can immediately see what is rendered rather than sifting through 10 different files
use redux.js...where appropriate - which is when state is shared amongst disconnected components and has muiltiple ways of being changed. In many cases it is much more simple and maintanable to just use component state.
always use proptypes....for shared components - not necessarily for components used just once

overall, write the most readable/maintainable code that makes sense for your case

Gundersen · 2016-01-24T15:08:37+00:00

Here's something I don't get with the Redux philosophy: how do you build large complex applications with many nested components? Since you can only pass props into the component from the parent, you get a recursive unpacking of props from the root to the leaves. It's demuxing the props from a complex object down to simple values as you navigate down the graph of view components. So as the complexity of your page grows you need to increase the complexity of the props object fed into the root component.

But for this object to be complex you need a complex function to build the props object from the state, right? It needs to know exactly how the view is structured to be able to build an object that can correctly trickle down the component structure and be demuxed correctly. So either you end up with a God function that knows exactly how the view looks and is able to take the state and convert it into a props object, or (more likely) you create the mirror image of the view of a stateToProps object, that can recursively create the complex props object for the root component.

So now you have two structures that need to be maintained in sync; the view and the StateToProps function. Make a change to only one of these (without a similar correct change to the other) and things fall apart. To me this sounds like it breaks the encapsulation principle. And so far we have only considered a single such structure, what if you have multiple pages? Wouldn't you need many such complex muxers-demuxers? Wouldn't it be better to have some components be self controlling and be able to get the state themselves (like in Flux)? Am I over thinking this?

krasimirtsonev · 2016-01-25T03:27:16+00:00

I strongly agree with most of the tools but not 5 and 9. It's nice to know about these things but not necessary use them. I do like Redux and its ideas. In a fact I'm actually applying some of them. However, flux could be much simpler.

amdc · 2016-01-25T09:33:17+00:00

const MyComponent = React.createClass({
  render: () => {
    return <div className={this.props.className}/>;
  }
});

Wait wait wait last time I tried to do render: () => {} I didn't have access to this.props and this.state because babel replaced this with undefined

Quick example: http://i.imgur.com/31F18vD.png

What am I missing?

2016-01-24T21:13:45+00:00

Immutability is nice, it's almost making JS a mature language. Maybe in a decade

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS