Tutorial by Examples

props are used to pass data and methods from a parent component to a child component. Interesting things about props They are immutable. They allow us to create reusable components. Basic example class Parent extends React.Component{ doSomething(){ console.log("Parent comp...

defaultProps allows you to set default, or fallback, values for your component props. defaultProps are useful when you call components from different views with fixed props, but in some views you need to pass different value. Syntax ES5 var MyClass = React.createClass({ getDefaultProps: ...

propTypes allows you to specify what props your component needs and the type they should be. Your component will work without setting propTypes, but it is good practice to define these as it will make your component more readable, act as documentation to other developers who are reading your compone...

Instead of var component = <Component foo={this.props.x} bar={this.props.y} />; Where each property needs to be passed as a single prop value you could use the spread operator ... supported for arrays in ES6 to pass down all your values. The component will now look like this. var compon...

The "child" components of a component are available on a special prop, props.children. This prop is very useful for "Compositing" components together, and can make JSX markup more intuitive or reflective of the intended final structure of the DOM: var SomeComponent = function ...

Sometimes it's really useful to know the type of child component when iterating through them. In order to iterate through the children components you can use React Children.map util function: React.Children.map(this.props.children, (child) => { if (child.type === MyComponentType) { ......