2. What is ReactJS?
• Library for Web Apps (from Facebook)
• Provides the “V” in “MVC”
• component-based architecture
• ES6/JSX (HTML embedded in JavaScript)
• 400 components available:
https://github.com/brillout/awesome-react-components
3. Advantages of ReactJS
• highly efficient
• easier to write Javascript via JSX
• out-of-the-box developer tools
• very good for SEO
• easy to write UI test cases
• http://www.pro-tekconsulting.com/blog/advantages-
disadvantages-of-react-js/
4. Disadvantages of ReactJS
• ReactJS is only a view layer
• ReactJS into an MVC framework requires configuration
• learning curve for beginners who are new to web
development
• Scaffolding is usually needed for transpilation
5. What are Transpilers?
• They convert code from one language to another
• Babel (formerly 6to5):
+converts ES6 (some ES7) to ECMA5
+ appears to be the de facto standard
• Traceur (Google):
+ converts ES6 to ECMA5
+ used by Angular 2
NOTE: JSX is transpiled by ECMA5
6. Typical Set-up Tools
• Node and npm (installing JS dependencies)
• Babel (in HTML Web pages)
• Webpack (highly recommended)
• NB: you can use Gulp instead of WebPack
• https://www.eventbrite.com/e/react-js-foundation-
hands-on-workshop-tickets-27743432353
7. React App (MyWebPage.html)
<!– The core React library -->
<script src="https://fb.me/react-15.0.0-rc.2.js"></script>
<!– The ReactDOM Library -->
<script src="https://fb.me/react-dom-15.0.0-rc.2.js">
</script>
<!– For transpiling ES6 code into ES5 code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js">
</script>
10. The render() Method in ReactJS
• Contains one top-level “root” element
• a <div> is often the top-level element
• render() is invoked when a state change occurs
• NB: a <View> is the top-level element in React Native
11. Using “Props” in ReactJS
<div id="hello"></div>
• <script type="text/babel">
• var Hello = React.createClass({ // deprecated in 0.14.3
• render: function () {
• var name = this.props.name;
•
• return ( <h2>Hello {name}</h2> );
• }
• });
• ReactDOM.render(<Hello name="Dave"/>,
• document.getElementById('hello'));
• </script>
12. Property Types in ReactJS
propTypes contains properties and their types:
propTypes: {
width: React.PropTypes.number,
height: React.PropTypes.number
//other1: React.PropTypes.string,
//other2: React.PropTypes.array.isRequired,
},
13. Property Types and Validation
How to throw an error if any property is negative:
propTypes: {
width: function(props, propName, componentName) {
if(props[propName] < 0) {
throw new Error(propName+" cannot be negative");
}
}
},
14. The “getDefaultProps()” Method
<div id="container"></div>
<script type="text/babel">
var Hello = React.createClass({
getDefaultProps: function () {
return { y : 456 }
},
render: function () {
return (
<h2>x = {this.props.x} y = {this.props.y} </h2>
);
}
});
ReactDOM.render(<Hello x={123}/>,
document.getElementById('container'));
</script>
16. SVG in ReactJS (part 1)
<div id="mysvg"></div>
<script type="text/babel">
class MySVG extends React.Component {
constructor () {
super();
}
// more code in the next slide…
23. Working with Lists (2b)
class ListOptions extends React.Component {
render() {
return (
<li>{this.props.value}</li>
)
}
}
ReactDOM.render( <UserList/>,
document.getElementById('container')
)
24. Sometimes we Need JavaScript Functions
• Use map() to apply a function to an array of items:
a) Returns a new array with ‘transformed’ elements
b) You specify the function
• Use filter() to return a subarray of items:
involves conditional logic (defined by you)
• Other functions: merge(), flatten(), reduce(), …
• NB: you can combine them via method chaining
25. The ‘map’ and ‘filter’ Functions
var items = [1,2,3,4,5,6,7,8,9,10,11,
12,13,14,15,16,17,18,19,20];
var even = [], double = [];
even = items.filter(function(item) {
return item % 2 == 0;
});
console.log("even = "+even);
double = items.map(function(item) {
return item * 2;
});
console.log("double = "+double);
31. ReactJS: Lifecycle methods
Consider the following scenario:
A Web page contains GSAP code to animate SVG elements
The SVG elements are dynamically generated
There is no static SVG content
Q: where do you place the GSAP code?
A: in the componentDidMount() method
32. Working with State (1a)
class MyInput extends React.Component {
constructor() {
super();
}
componentWillMount() {
this.state = {value: 'Hello There!'};
}
handleChange(event) {
this.setState({value: event.target.value});
console.log("value: "+this.state.value);
}
33. Working with State (1b)
render() {
var value = this.state.value;
return <input type="text" value={value}
onChange={this.handleChange} />;
}
}
ReactDOM.render(
<MyInput />,
document.getElementById('myinput')
);
34. Update List of Users (1)
class UserList extends React.Component {
constructor() {
super();
this.userList = ['Sara', 'Dave', 'John', 'Sally’ ];
this.addUser = this.addUser.bind(this);
}
componentDidMount() {
this.setState({user: ""});
}
addUser() {
var user = this.refs.user.value;
//console.log("user = "+user);
this.setState({user: user});
this.userList.push(user);
}
40. Retrieving Github User Data (2)
render() {
if (this.state.loading) { return <span>Loading...</span>; }
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var userInfo = this.state.data;
return (
<ul>
<li>Username: {userInfo.login} </li>
<li>Followers: {userInfo.followers} </li>
<li>Following: {userInfo.following} </li>
<li>Created at: {userInfo.created_at}</li>
</ul>
)
}}}
41. Retrieving Github User Data (3)
ReactDOM.render(
<UserInfo
promise={$.getJSON('https://api.github.com/users/ocampesato')} />,
document.getElementById("userinfo")
);
42. What about React Routing?
• Routing: how to access different parts of an app
• Static routing and Dynamic routing
• http://rwhitmire.com/react-routify
• ReactRouter v4 contains major changes:
https://github.com/ReactTraining/react-
router/blob/v4/README.md#v4-faq
43. Heroku and create-react-app (1)
https://github.com/facebookincubator/
a FB endorsed and supported way to build real React apps
Zero configuration deployment to Heroku:
https://blog.heroku.com/deploying-react-with-zero-
configuration
https://github.com/mars/create-react-app-buildpack#usage
45. Higher Order Components
• Define functions that take a component as an argument
and then return a component
• https://medium.com/javascript-inside/why-the-hipsters-
recompose-everything-23ac08748198#.ojvtuun57
• Now let’s take a detour to ES6….
46. What about ES6?
• Arrow functions and let keyword
• Block scopes
• Classes and inheritance
• Default parameters
• Destructured assignment
• Generators, Iterators, Maps, and Sets
• Promises and Rest parameters
• Spread operator
• Template Literals
47. ES6 let and Arrow Functions
• let square = x => x * x;
• let add = (x, y) => x + y;
• let pi = () => 3.1415;
• console.log(square(8)); // 64
• console.log(add(5, 9)); // 14
• console.log(pi()); // 3.1415
48. ES6 Class Definition (part 1)
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
calcArea() {
return this.height * this.width;
}
}
• var r1 = new Rectangle(5,10);
• var r2 = new Rectangle(25,15);
49. ES6 Class Definition (part 2)
• console.log("r1 area = "+r1.calcArea());
• console.log("r2 area = "+r2.calcArea());
• Test this code here: http://babeljs.io/repl/
• More Examples:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Classes
50. Browser Status for ES6
• Modern IE: https://goo.gl/56n7IL
• Mozilla: https://goo.gl/iSNDf9
• Chrome: https://www.chromestatus.com/features#ES6
51. Other Useful ES6 Links
https://github.com/lukehoban/es6features
http://kangax.github.io/compat-table/es6/
https://dev.modern.ie/platform/status/?filter=f3f0000bf&search=es6
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_i
n_Mozilla
https://medium.com/@bojzi/overview-of-the-javascript-ecosystem-
8ec4a0b7a7be
Next we’ll discuss application state….
52. Application State can be Complicated
• Suppose a ReactJS has many components
• What if state is required in multiple components?
• Where is state maintained?
• resembles a C++ class hierarchy a “thick” base class allows for
easy access, but some things don’t belong in the base class
• One solution: store state outside the app (Redux)
53. ReactJS + Flux (Facebook)
• Flux is a pattern (Facebook)
• unidirectional data flow
• Many implementations of Flux are available
• Redux is an implementation of Flux . . .
54. ReactJS + Redux (Facebook)
• Redux is an implementation of Flux
• the most popular implementation (at least 15 others)
• Mobx (simpler alternative) and Alt
• “advanced state management”
• Actions, Dispatcher, reducer, and Store(s)
• Reductor: Redux for Android
55. ReactJS + Redux (Facebook)
• How Redux works:
• Create a Redux store
• Dispatcher passes Action and Store to Reducer
• Reducer updates the Store
• View is notified and updated accordingly
56. Redux versus Mobx
• Redux: influenced by functional programming
• Mobx: influenced by OOP and Reactive Programming
• More detailed comparison of Redux and Mobx:
1) http://www.robinwieruch.de/redux-mobx-confusion
2)https://medium.com/@sanketsahu/if-not-redux-then-
what-fc433234f5b4#.38tus3hai
3) http://blog.bandwidth.com/using-react-js-for-front-end-
development
57. ReactJS + GraphQL (Facebook)
• GraphQL: a server-side schema for graph-oriented data
• Can “wrap” NoSQL and relational stores
• GraphQL server processes data requests from clients
• Data is returned to client apps
• http://githubengineering.com/the-github-graphql-api/
• NB: GraphQL does not need Relay (but Relay needs GraphQL)
58. GraphQL versus REST
• GraphQL is a “finer-grained” alternative to REST
• REST is all-or-nothing: an “entity” is returned
• GraphQL returns a subset of elements of an “entity”
• Falcor from Netflix: GraphQL alternative (without a schema)
59. GraphQL: What it isn’t
• GQL does not dictate a server language
• GQL does not dictate a storage/back-end
• GQL is a query language without a database
60. GraphQL: What Does it Do?
• It exposes a single endpoint
• the endpoint parses and executes a query
• The query executes over a type system
• the type system is defined in the application server
• the type system is available via introspection (a GQL API)
61. GraphQL Server Structure
GraphQL servers have three components:
• 1) GraphQL “core” (JavaScript and other languages)
• 2) Type Definitions (maps app code to internal system)
• 3) Application code (business logic)
62. GraphQL Core: Five Components
• 1) Frontend lexer/parser: an AST [Relay uses parser]
• 2) Type System: GraphQLObjectType (a class)
• 3) Introspection: for querying types
• 4) Validation: is a query valid in the app’s schema?
• 5) Execution: manage query execution (via the AST)
63. The GraphiQL IDE
• https://github.com/skevy/graphiql-
app/blob/master/README.md
• https://github.com/skevy/graphiql-app/releases
• OSX: brew cask install graphiql
66. GraphQL Queries
• query EmpNameQuery {
• emp {
• fname
• lname
• }
• }
• The result of the preceding query is here:
• {
• "data": [{
• "emp": {
• "fname": "John",
• "lname": "Smith"
• }
• }]
• }
67. GraphQL Websites
• Apollo: http://www.apollostack.com/
“consolidates” data (removes duplicates in a tree)
• Reindex: https://www.reindex.io/blog/redux-and-
relay
• Scaphold: scaphold.io
• Upcoming SF conference: http://graphqlsummit.com/
68. GraphQL Websites
• Apollo: http://www.apollostack.com/
“consolidates” data (removes duplicates in a tree)
• Reindex: https://www.reindex.io/blog/redux-and-relay
• Scaphold: https://scaphold.io/#/
• GraphiQL: https://github.com/skevy/graphiql-app
• GraphQL conference: http://graphqlsummit.com/
69. ReactJS + Relay (Facebook)
• Relay: a “wrapper” around client-side components
• Data requests from a component “go through” Relay
• Relay sends data requests to a GraphQL server
• Data is returned to client application
• Data is displayed according to application code/logic
71. What is React Native? (Facebook)
• Facebook toolkit for cross-platform native mobile apps
• https://facebook.github.io/react-native/
• You write custom JSX code for Android and iOS
• Update contents of index.android.js and index.ios.js
• Invoke react-native from command line
• Update cycle: Mobile app is updated via “hot reloading”
72. React Native Components
• https://github.com/react-native-community/react-native-elements
• Buttons
• Icons
• Social Icons / Buttons
• Side Menu
• Form Elements
• Search Bar
• ButtonGroup
• Checkboxes
• List Element
• Linked List Element
• Cross Platform Tab Bar
• HTML style headings (h1, h2, etc...)
• Card component
• Pricing Component
73. React Native Installation
• iOS apps: make sure you’ve installed Xcode
• Android apps: install Java/Android/NDK:
set JAVA_HOME, ANDROID_HOME, and NDK_HOME
• Now install react-native:
[sudo] npm install –g react-native
• Create an application:
react-native new FirstApp
Start an application: react-native run-android
74. More Stuff About React Native
• Top-level element in render() must be a <View> element
• You can create custom native components (Android&iOS)
• Supports Flux/Redux/Relay/GraphQL
• React Native with Redux:
https://github.com/ReactConvention/react-native-redux-
starter-kit
75. React Native IDEs/Toolkits
IDES: Deco (open source) and XDE (from Exponent)
Very good “Starter kits” (with lots of components):
ignite: https://infinite.red/ignite
nativebase: https://github.com/GeekyAnts/NativeBase
react-native ble: https://github.com/Polidea/react-native-
ble-plx
react-native-bg-geo:
https://github.com/transistorsoft/react-native-background-
geolocation
77. Some Useful Tools/IDEs
• Select an IDE:
+WebStorm 10: free 30-day trial ($49/year)
+Visual Studio Code (free)
+ Atom (free) with atom-TypeScript extension
• Command Line Tools:
+ npm, npmjs, gulp, grunt (older), broccoli,
+ webpack, browserify (older), jspm+systemjs
https://github.com/addyosmani/es6-tools
78. Useful Technologies to Learn
• Main features of ES6 (and methods in ECMA5)
• Sass/Bootstrap 4 (previously: less)
• https://react-bootstrap.github.io/
• D3.js for Data Visualization
• React Native (=ReactJS for Native Mobile)
• https://egghead.io/react-redux-cheatsheets
79. Recent/Upcoming Books and Training
1) HTML5 Canvas and CSS3 Graphics (2013)
2) jQuery, CSS3, and HTML5 for Mobile (2013)
3) HTML5 Pocket Primer (2013)
4) jQuery Pocket Primer (2013)
5) HTML5 Mobile Pocket Primer (2014)
6) D3 Pocket Primer (2015)
7) Python Pocket Primer (2015)
8) SVG Pocket Primer (2016)
9) CSS3 Pocket Primer (2016)
10) Angular 2 Pocket Primer (2017)