React components: Difference between revisions
No edit summary |
|||
Line 1: | Line 1: | ||
= Component Functions = | = Components = | ||
<blockquote> | |||
== Component Functions == | |||
<blockquote> | <blockquote> | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Line 11: | Line 13: | ||
</blockquote><!-- Functions --> | </blockquote><!-- Functions --> | ||
= Component Classes = | == Component Classes == | ||
<blockquote> | <blockquote> | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Line 31: | Line 33: | ||
</source> | </source> | ||
</blockquote><!-- Component Classes --> | </blockquote><!-- Component Classes --> | ||
</blockquote><!-- Components --> | |||
= props | = Attributes = | ||
<blockquote> | |||
== this.props == | |||
<blockquote> | <blockquote> | ||
Components are expressed as [[xml]] tags.<br> | Components are expressed as [[xml]] tags.<br> | ||
Line 51: | Line 56: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</blockquote><!-- Parameters --> | </blockquote><!-- Parameters --> | ||
== this.state == | |||
<blockquote> | |||
<code>this.state</code> is a special object property to store UI related info.<br> | |||
The component will be re-rendered every time the <code>this.setState()</code> is called. | |||
<syntaxhighlight lang="javascript"> | |||
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> | |||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript"> | |||
this.setState() | |||
</syntaxhighlight> | |||
</blockquote><!-- Element Variables --> | |||
</blockquote><!-- Attributes --> | |||
= Lifecycle Methods = | = Lifecycle Methods = | ||
Line 94: | Line 127: | ||
</source> | </source> | ||
</blockquote><!-- DOM Events --> | </blockquote><!-- DOM Events --> | ||
Revision as of 20:49, 22 August 2021
Components
Component Functions
function Description() { return ( <h1>Description</h1> <p>{this.props.paragraph}</p> ) }Component Classes
class Employee extends React.Component { constructor(props) { super(props); this.state = {name: "vaderd", id: 101} } render() { return ( <div> <h1>Name: {this.state.name}</h1> <h2>ID: {this.state.id}</h2> </div> ); } }
Attributes
this.props
Components are expressed as xml tags.
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()
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> ); } }