Prefer composition over inheritance, e.g. create basic components, then wrap them in a more specific one. For example create a Dialog component, and then put that in a WarningDialog component.
We strongly recommend against creating your own base component classes. favor composition over inheritance
all DOM properties and attributes (including event handlers) should be camelCased with the exception of exception is aria-* and data-*
dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM.
You can create a .env file declaring a constant of NODE_PATH pointing to where your src folder is, so that your import statements are absolute, e.g. import components/App.js instead of import ./components/App.js
Components must start with a capital letter
Variables with values starting in lower case letters are treated as DOM elements
Components declared as functions do not have states
Components declared to inherit from React.Component have state
Only use this.state.key='' in the constructor, else use this.setState()
Component props and state flow down
events are camelCased
event.preventDefault must be called explicitly
JSX expressions are wrapped in curly braces
Return null in your component if you don't want it to be rendered.
When printing collections in JSX, use your object's id first, and the array index as last resort
input form element values controlled by React are called controlled components
Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children)
Avoid using refs for anything that can be done declaratively.
Use controlled components in most cases to implement forms. A form element becomes "controlled" if you set its value via a prop
State and Props
Function components do not have state, only class components do
States are initialized in the constructor. It is set like so this.state = {key: VALUE}. Outside of the constructor, state is set using this.setState({key: VALUE}).
Controlled components are components where the value is set from the state <input value="this.state.key" onChange="this.onValueChange" />
Sharing state between siblings require the state to be lifted up to the parent
If you pass no value for a prop, it defaults to true.
a render prop is a function prop that a component uses to know what to render. <Mouse attr={(mouse) => ( <Cat mouse={mouse} /> )} />
If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.
You should not call setState() in the constructor(), use componentDidMount() instead
Think of setState() as a request rather than an immediate command to update the component.
Calls to setState are asynchronous - don't rely on this.state to reflect the new value immediately after calling setState.
Pass an updater function instead of an object if you need to compute values based on the current state e.g. this.setState((prevState) => { ... });
Events and Lifecyle
Event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event
Event callbacks that aren't in a function format and depends on the component, needs to call .bind(this)
Populate data with AJAX calls in the componentDidMount. This is so you can use setState to update your component when the data is retrieved.