React components: Difference between revisions
Line 94: | Line 94: | ||
= Return Types = | = Return Types = | ||
<blockquote> | <blockquote> | ||
React requires that a single top-level element is returned by each component.< | == Elements == | ||
<blockquote> | |||
Generally, React requires that a single top-level html-element is returned by each component. | |||
<syntaxhighlight lang="javascript"> | |||
function Person extends React.Component { | |||
render() { | |||
return ( | |||
<table> | |||
<tr><th>...</th></tr> | |||
<tr><th>...</th></tr> | |||
</table> | |||
); | |||
} | |||
} | |||
</syntaxhighlight> | |||
</blockquote><!-- Elements --> | |||
== Lists == | == Lists == | ||
<blockquote> | <blockquote> | ||
You may return a list of elements to some compound types, like lists.<br> | |||
Each item requires a <code>key</code>. | |||
<syntaxhighlight lang="javascript"> | |||
</syntaxhighlight> | |||
</blockquote><!-- Lists --> | </blockquote><!-- Lists --> | ||
== Fragments == | == Fragments == | ||
<blockquote> | <blockquote> | ||
Fragments are a special wrapper type that allows you to return multiple top-level html-elements in one clump. | |||
You can use either of the following tags: | |||
* <code><React.Fragment>...</React.Fragment></code> | |||
* <code><>...</></code> | |||
<syntaxhighlight lang="javascript"> | |||
<table> | |||
<tr> | |||
<Columns /> // <-- fragment with several items | |||
</tr> | |||
</table> | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript"> | |||
import React from 'react'; | |||
function Columns(props) { | |||
return ( | |||
<React.Fragment> | |||
<td>foo</td> | |||
<td>bar</td> | |||
<td>baz</td> | |||
</React.Fragment> | |||
); | |||
} | |||
</syntaxhighlight> | |||
</blockquote><!-- Fragments --> | </blockquote><!-- Fragments --> | ||
</blockquote><!-- Return Types --> | </blockquote><!-- Return Types --> |
Revision as of 23:44, 22 August 2021
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()
Return Types
Elements
Generally, React requires that a single top-level html-element is returned by each component.
function Person extends React.Component { render() { return ( <table> <tr><th>...</th></tr> <tr><th>...</th></tr> </table> ); } }Lists
You may return a list of elements to some compound types, like lists.
Each item requires akey
.Fragments
Fragments are a special wrapper type that allows you to return multiple top-level html-elements in one clump.
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> ); }
Lifecycle Methods
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.Check out the tutorial.
TODO:
Why can't the constructor/destructor be used?
class Foo extends React.Component { componentDidMount() { ... } componentWillUnmount() { ... } }
DOM Events
You can subscribe to DOM events with callbacks similarly to javascript.
except that events are in camelcase
and callbacks are defined as methods rather than strings.See https://reactjs.org/docs/handling-events.html
class HelloWorld extends React.Component { sayHello() { console.log('hello') } render() { return ( <button onClick={() => this.sayHello()}> Say Hello </button> ); } }