Notes from a beginner: React.js
A javascript library for building user interfaces
Read these (in order):
- Getting Started
- Tutorial
- 9 things every React.js beginner should know (From 24 Jan 2016)
Additional references:
React.js was created by the folks at Facebook. It is only intended to be used for creating "views". For "state" and "logic", consider Redux.js.
Components
render a data model. Components can be composed of sub-components (child components). For example, to render a table, you could create a table component that is composed of a column heading component and one or more row components. Most components should take data fromprops
and render it. Try to keep components as stateless as possible. Sometimes, however, you need to respond to user input, a server request or the passage of time. In these cases you usestate
.
Props
are a way of passing data from a parent component to a component.
Notes from Interactivity and Dynamic UIs
State
should contain data that a component's event handlers may change to trigger a UI update.this.state
should only contain the minimal amount of data needed to represent your UI's state. Do not include the following instate
: Computed data, React components, duplicated data from props.
These come from this gist.
-
getInitialState() : The object returned by this method sets the initial value of
this.state
-
getDefaultProps() : The object returned by this method sets the initial value of
this.props
. -
render() : Retuns the jsx markup for a component. Should not update
this.state
orthis.props
. -
mixins[] : An array of objects each of which can augment the lifecycle methods
-
statics : Functions that can e invoked on the component without creating instances.
-
componentWillMount() : Invoked once before first render.
-
componentDidMount() : Invoked once after the first render.
-
componentWillReceiveProps(nextProps) : Invoked whenever there is a prop change. Called before render.
-
shouldComponentUpdate(nextProps, nextState) : Determines if the render method should run in the subsequent step. Called before a render. Not called for the initial render.
-
componentWillUpdate(nextProps, nextState) : Called immediately before a render.
-
componentDidUpdate(prevProps, prevState) : Called immediately after a render.
-
componentWillUnmount() : Called immediately before a component is unmounted.