React components
Documentation
component docs https://reactjs.org/docs/react-component.html fragment docs https://reactjs.org/docs/fragments.html list docs portal docs https://reactjs.org/docs/portals.html
Components
Component Functions
function Description() { return ( <h1>Description</h1> <p>{this.props.paragraph}</p> ) }<Description paragraph="a very long..." />Component Classes
class Employee extends React.Component { constructor(props) { super(props); this.state = {name: props.name, id: props.id} } render() { return ( <div> <h1>Name: {this.state.name}</h1> <h2>ID: {this.state.id}</h2> </div> ); } }<Employee name="vaderd" id="101" />
Attributes
this.props
Parameters are passed parameters using xml tag attributes.
Within the component, they are axposed as attributes on thethis.props
variable.ReactDOM.render( <Description name="Alex" />, // <-- use component document.getElementById('root') );function Description() { return <p>hello, {this.props.name}</p>; // <-- access props in component }this.state
this.state
is a special object property to store UI related info.
The component will be re-rendered every time thethis.setState()
is called.class Thing extends React.Component { constructor(props) { super(props); this.state = { collapsed: false }; } render() { if (this.state.collapsed) { <p>collapsed</p> } else { <p>expanded</p> } } }this.setState({ collapsed: false }) // good: update state this.state = { collapsed: false } // bad:
Render Types
Elements
Generally, React requires that a single top-level html-element is returned by each component.
class Person extends React.Component { render() { return ( <table> <tr><th>...</th></tr> <tr><th>...</th></tr> </table> ); } }Lists
You may render() a list of elements to some compound types, like lists.
Each item requires a uniquekey
so react can keep track of CRUD operations with list items.class ListItems extends React.Component { render() { var items = [ {key: "a", text: "aaa"}, {key: "b", text: "bbb"}, {key: "c", text: "ccc"}, ] return items.map((x) => <li key={x.key}> // key={foo} lets react update changes {x.text} </li> ); } } class MyList extends React.Component { render() { return ( <ul> <ListItems /> </ul> } }Fragments
Fragments are a special wrapper type that allows you to return multiple top-level html-elements in one clump.
They do not need to be a homogenous collection of top-level elements.You can use either of the following tags:
<React.Fragment>...</React.Fragment>
<>...</>
<table> <tr> <Columns /> // <-- fragment with several items </tr> </table>import React from 'react'; function Columns(props) { return ( <React.Fragment> <td>foo</td> <td>bar</td> <td>baz</td> </React.Fragment> ); }Null (force no render)
If a component's
render()
returnsnull
,
then it won't render anything, even if it is included in a page.The official-docs use a debug-info as an example (you'd only want to render if in development environment).
class DebugInfo extends React.Component { constructor(props) { super(props); this.state = {debugEnabled: true}; } render() { this.debugEnabled ? <p>debug info...</p> : null; } }
Lifecycle Methods
NOTE:
An alternative to lifecycle methods is react hooks.
React components have methods to mount/unmount behaviours when the object is first created or destroyed.
These can set/unset timers to auto-update the object.
These behave similarly to constructor/destructor as hooks, except their events correspond with adding/removing them from the DOM.Check out the tutorial (might need to scroll to methods).
class Foo extends React.Component { componentDidMount() { ... } // runs after first 'render()' componentWillUnmount() { ... } // runs if object is removed from the DOM }