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...
Developer Primer: React
Cody Lawson & Josh Peterson
Developer Primer: React
By Josh Peterson
Developer Primer: React
As the ArcGIS platform evolves, there are more integrations and touch points with 3rd party technologies than ever before. The goal of this spotlight series is to give you a frame of reference on some of this tech so that you are primed to dive in when you hear about them around the geodev community. This talk will focus on the React JavaScript framework, which is insanely popular in the world of web dev and is used to build Esri products like Experience Builder, StoryMaps, and Analytics for IoT.
