Developer Primer: React
Cody Lawson & Josh Peterson
Josh Peterson
Cody Lawson
UI/UX Engineer
Denver, CO
Software Engineer
Denver, CO
The Paradigm
1
State & Props
2
JSX
3
Integrating with ArcGIS
4
The Paradigm
what the user sees
your code
application state
UI
=
ƒ( )
state
<App>
<h3>What's the answer?</h3>
<input value={state.answer} />
</App>state = {
answer: "42"
}UI
ƒ( )
state
State & Props
State
Props
-
Set from within the component
-
Not mutated directly – updated via a setter function
-
Triggers re-render when updated
-
Read only
-
Passed from parent component
-
Triggers re-render when updated
JSX
"React embraces the fact that rendering logic is inherently coupled with other UI logic"
-
Similar to a template file in other frameworks
-
JSX is a syntax extension for JavaScript
-
Makes it easy to understand large DOM trees
-
Not valid HTML - it must be compiled to regular JS
return <h1>Hello, {this.props.name}</h1>;return React.createElement(
'h1',
null,
'Hello, ',
this.props.name
);=
return (
<div>
<h1>To Do:</h1>
<ol>
{todosArray.map(todo => (
<li>{todo}</li>
))}
</ol>
</div>
);Use JS methods to build UI elements with component state and props!
Integrating with ArcGIS
To the docs!
More React sessions...