React js

ReactJS for Beginners
Oswald Campesato
Consultant/Training:
www.iquarkt.com
ocampesato@yahoo.com

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

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/

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

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

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

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>

ReactJS “Hello World” (Old Style)
• <body>
• <div id="hello"></div>
• <script type="text/babel">
• var Hello = React.createClass({ // deprecated in 0.14.3
• render: function () {
• return ( <h1>Hello World</h1> );
• }
• });
• ReactDOM.render(<Hello/>,
• document.getElementById('hello'));
• </script>
• </body>

ReactJS “Hello World” (ES6 Class)
• <div id="hello"></div>
• class Hello extends React.Component { // recommended
• constructor () {
• super();
• }
• render() {
• return <div>Hello World</div>
• }
• }
• ReactDOM.render(<Hello/>,
• </script>

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

Using “Props” in ReactJS
<div id="hello"></div>
• 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"/>,
• </script>

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,
},

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");
}
}
},

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>

Handling Mouse Events
class MouseOverButton extends React.Component {
// constructor …
render() {
console.log("rendering button...");
return (
<button onClick={this.update}>ClickMe</button>
);
}
update() {
console.log("inside update");
}
}

SVG in ReactJS (part 1)
<div id="mysvg"></div>
class MySVG extends React.Component {
constructor () {
super();
}
// more code in the next slide…

SVG in ReactJS (part 2)
render() {
return (
<svg width="600" height="200">
<g transform="translate(50, 20)">
<rect x="10" y="10" width="160" height="80" fill="red"/>
</g>
</svg>
);
}
}
ReactDOM.render(<MySVG />,
document.getElementById("mysvg"));
</script>

Conditional Execution (1)
<div id="hello"></div>
class Hello1 extends React.Component {
render () {
return (
<h2>Hello World1</h2>
);
}
}

class Hello2 extends React.Component {
render() {
return (
<h2>Hello World2</h2>
);
}
}

ReactDOM.render(
<div>
{ Math.random() > 0.5 ? <Hello1 /> : <Hello2 />}
</div>,
document.getElementById('hello')
);

Working with Lists (1a)
class UserList extends React.Component {
render() {
return (
<ul>
<li>Sara</li>
<li>Dave</li>
<li>John</li>
<li>Sally</li>
</ul>
)
}
}
ReactDOM.render( <UserList/>,
document.getElementById('container')
)

render() {
return (
<ul>
<ListOptions value="Sara" />
<ListOptions value="Dave" />
<ListOptions value="John" />
<ListOptions value="Sally" />
</ul>
)
}
}

Working with Lists (2b)
class ListOptions extends React.Component {
render() {
return (
<li>{this.props.value}</li>
)
}
}
ReactDOM.render( <UserList/>,
document.getElementById('container')
)

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

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);

The ‘map’ and ‘filter’ Functions
var items = [1,2,3,4,5,6,7,8,9,10];
var result1 = items.filter(function(item) { return item % 4 == 0; })
.map(function(item) { return item * 2; });
var result2 = items.map(function(item) { return item * 2; })
.filter(function(item) { return item % 4 == 0; })
console.log("result1 = "+result1);
console.log("result2 = "+result2);

constructor() {
super();
this.userList = [ 'Sara', 'Dave', 'John', 'Sally’];
}
render() {
return (
<div>
<ListOptions2 names={this.userList} />
</div>
)
}
}

Working with Lists (1)
class ListOptions2 extends React.Component {
render() {
return (
<ul>
{this.props.names.map(function(name) {
return (
<li key={name}>{name}</li>
)
})}
</ul>
)
}
}

Echoing User Input in ReactJS
class Echo extends React.Component {
constructor() {
super();
}
render() {
return (
<input type="text" onChange={this.handleChange} />
);
}
handleChange(e) {
console.log(e.target.value);
}
}
ReactDOM.render(<Echo />, document.getElementById("content"));

ReactJS: Lifecycle methods
Before/during/after component ‘mounting’:
componentWillMount: function() {
this.doSomething1();
},
componentShouldMount: function() {
},
componentShouldUpdate: function() {
},
componentDidMount: function() {
},
componentWillUnmount: function() {
},

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

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);
}

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')
);

Update List of Users (1)
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);
}

render() {
return (
<div>
<ul>
<ListOptions options={this.userList} />
</ul>
<input ref="user" type="text" />
<button onClick={this.addUser}>Add User</button>
</div>
)
}
}

class ListOptions extends React.Component {
render() {
return (
<ul>
{this.props.options.map(function(option) { // options = userList
return (
<li key={option}>{option}</li>
)
})}
</ul>
)
}
}
ReactDOM.render( <ListOptions/>,
document.getElementById('container’))

Working with JSON Data Files (1a)
• class UserInfo extends React.Component {
• constructor() {
• super();
• }
• componentWillMount() {
• this.state = { loading: true, error: null, data: null};
• }
•
• componentDidMount() {
• this.props.promise.then(
• value => this.setState({loading: false, data: value}),
• error => this.setState({loading: false, error: error}));
• }

Working with JSON Data Files (1b)
render() {
• if (this.state.loading) {
• return <span>Loading...</span>;
• }
• else if (this.state.error !== null) {
• return <span>Error: {this.state.error.message}</span>;
• }
• else {
• let empItems = this.state.data.map( emp => {
• return <li key={emp.fname}>{emp.fname}</li>
• })
• return (
• <div>
• <ul>{empItems}</ul>
• </div>
• )
}}

Retrieving Github User Data (1)
• class UserInfo extends React.Component {
• constructor() {
• super();
• }
• componentWillMount() {
• this.state = { loading: true, error: null, data: null};
• }
•
• componentDidMount() {
• this.props.promise.then(
• value => this.setState({loading: false, data: value}),
• error => this.setState({loading: false, error: error}));
• }

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>
)
}}}

ReactDOM.render(
<UserInfo
promise={$.getJSON('https://api.github.com/users/ocampesato')} />,
document.getElementById("userinfo")
);

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

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

Heroku and create-react-app (2)
• npm install -g create-react-app
• create-react-app my-app
• cd my-app
• git init
• heroku create -b https://github.com/mars/create-react-
app-buildpack.git
• git add .
• git commit -m "react-create-app on Heroku"
• git push heroku master
• heroku open

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….

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

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

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);

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

Browser Status for ES6
• Modern IE: https://goo.gl/56n7IL
• Mozilla: https://goo.gl/iSNDf9
• Chrome: https://www.chromestatus.com/features#ES6

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….

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)

ReactJS + Flux (Facebook)
• Flux is a pattern (Facebook)
• unidirectional data flow
• Many implementations of Flux are available
• Redux is an implementation of Flux . . .

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

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

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

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)

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)

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

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)

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)

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)

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

GraphQL Queries (Interfaces)
• interface Employee {
• id: String!
• fname: String
• lname: String
• }
•
• type Query {
• emp: Employee
• }

GraphQL Queries
• GraphQL Query:
• {
• emp {
• fname
• }
• }
• Response data:
• {
• "data": [{
• "emp": {
• "fname": "John"
• }
• }]
• }

GraphQL Queries
• query EmpNameQuery {
• emp {
• fname
• lname
• }
• }
• The result of the preceding query is here:
• {
• "data": [{
• "emp": {
• "fname": "John",
• "lname": "Smith"
• }
• }]
• }

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/

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/

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

MERN: Mongo/Express/ReactJS/NodeJS
• http://mern.io/
• MERN starter app:
• git clone https://github.com/Hashnode/mern-starter.git
• cd mern-starter
• npm install
• npm start
• MERN CLI:
• [sudo] npm install -g mern-cli
• mern init myApp
• cd myApp
• npm install
• npm start

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”

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

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

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

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

React Native IDEs/Toolkits
reactpack: https://github.com/olahol/reactpack
heatpack: https://github.com/olahol/reactpack
create-react-app: https://github.com/facebookincubator/
fb testing tools:
https://facebook.github.io/react/docs/test-utils.html
enzyme:
https://medium.com/airbnb-engineering/enzyme-javascript-
testing-utilities-for-react-a417e5e5090f

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

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

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)

React js

Recommended

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to React js (20)

More from Oswald Campesato (20)

Recently uploaded (20)

React js