React components: Difference between revisions
No edit summary |
|||
Line 17: | Line 17: | ||
constructor(props) { | constructor(props) { | ||
super(props); | super(props); | ||
this.state = {name: "vaderd", id: 101} | this.state = {name: "vaderd", id: 101} | ||
} | } | ||
Line 31: | Line 31: | ||
</source> | </source> | ||
</blockquote><!-- Component Classes --> | </blockquote><!-- Component Classes --> | ||
= Parameters = | |||
<blockquote> | |||
Components are expressed as [[xml]] tags.<br> | |||
Parameters are passed parameters using [[xml]] tag attributes.<br> | |||
Within the component, they are axposed as attributes on the <code>props</code> variable. | |||
<syntaxhighlight lang="javascript"> | |||
ReactDOM.render( | |||
<Description name="Alex" />, // <-- use component | |||
document.getElementById('root') | |||
); | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript"> | |||
function Description(props) { | |||
return <p>hello, {props.name}</p>; // <-- access props in component | |||
} | |||
</syntaxhighlight> | |||
</blockquote><!-- Parameters --> | |||
= Lifecycle Methods = | = Lifecycle Methods = | ||
Line 93: | Line 113: | ||
this.handleCollapseClicked = this.handleCollapseClicked.bind(this) | this.handleCollapseClicked = this.handleCollapseClicked.bind(this) | ||
} | } | ||
handleExpandClicked() { this.setState({ collapsed: false }) } | handleExpandClicked() { this.setState({ collapsed: false }) } | ||
handleCollapseClicked() { this.setState({ collapsed: true }) } | handleCollapseClicked() { this.setState({ collapsed: true }) } | ||
Line 99: | Line 119: | ||
return button | return button | ||
} | } | ||
button() { | button() { | ||
let button | let button |
Revision as of 20:30, 22 August 2021
Component Functions
function Description(props) { return ( <h1>Description</h1> <p>{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> ); } }
Parameters
Components are expressed as xml tags.
Parameters are passed parameters using xml tag attributes.
Within the component, they are axposed as attributes on theprops
variable.ReactDOM.render( <Description name="Alex" />, // <-- use component document.getElementById('root') );function Description(props) { return <p>hello, {props.name}</p>; // <-- access props in component }
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> ); } }
Element Variables
You can configure a component to manage it's display based on a state variable.
In this way, it fully encapsulates it's behaviour.TODO:
untested
const Button = styled.button class MyButton extends React.Component { constructor(props) { super(props) this.state = { collapsed: false } this.handleExpandClicked = this.handleExpandClicked.bind(this) this.handleCollapseClicked = this.handleCollapseClicked.bind(this) } handleExpandClicked() { this.setState({ collapsed: false }) } handleCollapseClicked() { this.setState({ collapsed: true }) } render() { return button } button() { let button if (this.state.collapsed) { button = <Button onClick={this.handleExpandClicked} /> } else { button = <Button onClick={this.handleCollapseClicked} /> } return button } }