Understanding React
What is React?
Virtual DOM
Event and Data binding
Web components
Why use React?
Much more control over UX of application
Good framework for large applications
Significant amount of Ecosystem code
Fast!
React's place in greater web ecosystem
Pure Frontend library
The V in MVC
100% javascript
React Vs. similar libraries
React Vs. Ember.js
Ember is significantly larger in scope
Ember includes model framework - React doesn't
Ember includes Routing framework
React vs. Angular
Angular is larger in scope
Angular has builtin routing
Angular has built in http handling
Angular has assorted functionality
React vs. JQuery
React is orthogonal in scope
React has little DOM handling
JQuery plays well with React
React Basics
Rendering to DOM
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);JSX Templates
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);Components
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}Combining Components
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}Event binding
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}State handling
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}React Design Philosophy
Hold your state at the top level
State drips down into components via props
No built in state management
Helps keep global state consistant
Minimize Local State changes
State changes add complexity
React tries to be "pure"
Components do a good job managing local state - keep state within them
Have the dumbest components possible
It's cheap to have more components
It's tempting to stick a lot of logic into a single component
Throw subcomponents at any problem that gets complex
What React is good at
Single page apps loading from an api
When everything client side is React all pieces play well with each other
The default use case
Complex single page work flows
Collecting data for form submission
Self contained sub apps have well defined borders
Better UX with React is easy
Single pages that shift with user input or over time
React is a very good template language
Is very good at redrawing in response to state changes
Can propagate changes down to ensure consistency
What React is not good at
Global touchups of existing applications
React wants to own a defined scope
Moving data into and out of React is possible but annoying
Doesn't play to the strengths of React
One off components in existing applications
React does best with systems of components
Probably overkill for a single element
Support needed to make React work
What concrete steps go into adding React to an existing application
Compile Step
Create React app can setup a scaffold
Without a compile step no JSX, no ES6
Forced to use single large file
Possible but lose out on a lot of functionality
ES6 knowlege
React is strongly biased for es6
Much easier and more fun to write es6
lingua franca of react world
API to feed data
Although you can load with data, better to sip from API
Strong support for async state updates
Truly complex applications require defined backend interaction
Node installed on build and develop boxes
Almost all React based tech uses node
Yarn/Npm for all third party package installs
All current build tools run via node
Testing considerations
Integration testing is hard
Pure architecture focus makes unit testing easy
Jest is officially supported solution, but others work
React has no built in testing soultion
SEO considerations
Will pay a small penalty - render time at the very least
Server side rendering options exist for single page apps
Check out next.js
Google supports JS rendering
Large Ecosystem players
Large number of small community libraries to handle specific ux cases - E.G. calendars, enhanced inputs, css
Large libraries make significant changes to structure and scope of React project
Facebook support ensures lots of fundamental libraries
Large and diverse ecosystem
State management libraries
Flux pattern rebuilt by community - Reflux is current popular library
Also check out mobx
Facebook supplies flux
Routing libraries
React router
Used when changing page url or complex state trees
Introduce significant complexity
Developer tools
es6linter is react ready
React developer chrome extension
Most editors have JSX mode
React Native
Instagram, Facebook, Airbnb
Build IOS/Android applications w/ web tech
Fully featured apps
React VR
Still pretty early
Build Rift applications w/ web tech
React office-ui-fabric-react
React components to match office UI
Officially supported library
Good React/Sharepoint example
https://github.com/waldekmastykarz/spfx-react-fabric-trendinginthissite
Use webparts framework to include self contained JS app
Sharepoint framework includes es6 libraries such as promises
https://blog.mastykarz.nl/building-sharepoint-framework-client-side-web-parts-react/
Understanding React
By Ben Beecher
