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)