React && React Native workshop

React && React-native
A basic introduction
11 Nov 2017

What is this about?
• This workshop wont help you be a better coder
• This workshop wont make you an expert in React
Native
• The UI of the slides wont get better over time

Brief intro
• Hello, I am Stacy
• I work at Govtech,
Government Digital Services,
DCUBE
• https://imstacy.com
• https://github.com/stacygohyunsi
• https://medium.com/@stacygoh

ReactJS
A JS library for building user interfaces, open sourced
by Facebook

Motivation behind ReactJS
Previously for AngularJS…

Motivation behind React
AngularJS uses dirty checking
scans the scope for changes

Need to modify the DOM
tree incessantly and a lot

React Concepts
• Component based
• Virtual DOM
• JSX
• Immutability
• One way data ﬂow

Virtual DOM
It is lightweight JavaScript object which is a copy of
Real DOM.

How ReactJS works
Render an element
Every single virtual DOM object gets updated

Two Virtual Doms
Current State
VD
Previous State
VD

“Difﬁng” algo
By comparing the new virtual DOM with the earlier
version, React ﬁnds out exactly which virtual DOM
objects have changed
Now, React smartly updates only those objects on the
real HTML DOM.

Virtual DOM
Previous
state
Current
State

Virtual DOM
Previous
state
Current
State
DOM
Updates only
relevant
changes

Virtual DOM
Previous
state
Current
State
DOMTrigger event
Updates only
relevant
changes

JSX
• JSX stands for JavaScript XML
• A templating language
• Embed any javascript inside of a JSX template by
wrapping it in curly braces (these: {})

JSX
const element = <h1>Hello, world!</h1>;
function formatName(user) {
return user.firstName + ' ' +
user.lastName;
}
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);

Babel
Compiles JSX
React.createElement() calls
Construct the DOM

const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

Example of Immutability
this.state= {
passengers: [
'Simon’,
'Taylor’
]
}
Suppose we want to add a passenger called Vincent to the
passengers array…

let updatedPassengers = this.state.passengers;

let updatedPassengers = this.state.passengers;
updatedPassengers.push('Vincent');

‘Push’ mutates the state
directly

let updatedPassengers =
this.state.passengers.concat('Vincent');

Create copies of the objects in this.state and
manipulate the copies
Map, ﬁlter and concat => non-destructive array
methods => methods that will return a new object
or array with the desired mutations

AngularJS
Change model -> modifies view
Change input field in view -> modifies model
Lead to cascading updates
Two way binding vs
Unidirectional data flow

create-react-app
https://github.com/facebookincubator/create-react-app

Creating a new application
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── registerServiceWorker.js

React commands
• npm start - Starts the test runner
• npm run build - turn it into a smaller (“minified”)
version that the browser can read
• npm test - test via Jest
• npm run eject - copies build dependencies,
configuration files and scripts into the app directory
(irreversible)

React Main Components
• Babel (for JSX)
• Webpack (a module bundler which takes modules
with dependencies and generates static assets by
bundling them together)
• Testing (Jest)

Index.js
import React from 'react';
import ReactDOM from ‘react-dom'; //
ReactDOM has one function in particular
that we want to use: render()
import App from './App';
import registerServiceWorker from './
registerServiceWorker';
import './index.css';
ReactDOM.render(<App />,
document.getElementById('root'));
registerServiceWorker();

App.js
import React from ‘react’;
const App = () => {
return (<div>Hello World!</div>);
};
export default App;

App.js
import React from ‘react’;
const App = () => {
};
export default App;
(Functional component)

React components must only return a SINGLE JSX
node at its root, so it’s very common to wrap up your
components into a single div that might have multiple
children underneath it.

HelloWorld.js
const HelloWorld = () => {
};
export default HelloWorld;

Props
Properties passed from the parent
<NewComponent prop={toBePassedIn}>

HelloWorld.js
const HelloWorld = (props) => {
return (<div>Hello {props.name}!</div>);
};
export default HelloWorld;

App.js
import HelloWorld from ‘./HelloWorld’;
const App = () => {
return (
<div>
<HelloWorld name=“Jan”/>
<HelloWorld name=“Vanessa”/>
</div>
);
};
export default App;

State == data that is going
to change

Functional components vs
Class components

Functional
const App = () => {
};
export default App;

Class
Local state is a feature available only to classes

import React, { Component } from 'react';
HelloWorld.js
class HelloWorld extends Component {
render() {
return (
<div>Hello {this.props.name}!</div>
);
}
}

HelloWorld.js
constructor(props) {
super(props);
//call out to its parent constructor
}
render() {
return (
<div>
Hello {this.props.name}!
</div>
);
}
}

HelloWorld.js
super(props);
this.state = {
greeting: ‘hello’
}
}
render() {
return (
<div>
Hello {this.props.name}!
</div>
);
}
}

super(props); //call out to its parent constructor
this.state = {
}
}
render() {
return (
<div>
{this.state.greeting} {this.props.name}!
</div>
);
}
}
HelloWorld.js

this.setState({
greeting: ‘Bonjour’
})
this.state.greeting = ‘Bonjour’;

...
frenchify() {
this.setState({ greeting: ‘Bonjour’ });
}
render() {
return (
<div>
{this.state.greeting} {this.props.name}!
<button onClick={this.frenchify}></button>
</div>
);
}
}
HelloWorld.js

HelloWorld.js
super(props);
this.frenchify =
this.frenchify.bind(this);
this.state = {
}
}
…
}

Common questions?
• How do I pass data up?
• You can pass the data up through a callback in
props, or use Redux
• What to learn next?
• ComponentWillMount, ComponentDidMount etc
• What UI Components to use with ReactJS?
• React-Bootstrap, Material-UI, React-strap

Sources:
• https://medium.com/@diamondgfx/learning-react-
with-create-react-app-part-1-a12e1833fdc

React Native Advantages
• JavaScript − Existing JavaScript knowledge 
• Code sharing − Share most code on different
platforms 
• Community − Community around React and
React Native is large
• Native Look and Feel

React Native Limitations
• Native Components − might need to write some
platform speciﬁc code
• Not even version 1 yet

Answer:
• Cordova: create HTML, style with CSS, and write
all the logic with JavaScript
• React-Native: Visual components (reusable UI
elements) are rendered as a native UI

3 threads
UI Thread JS Thread
Native
Modules
Thread

Method 1: create-react-native-app through Expo
(to use use custom native modules, you have to eject)
Method 2: react-native cli
(for the braver souls and those who never die before)
Environment for React
Native

Method 1
• npm install -g create-react-native-app
• create-react-native-app my-native-app
• cd my-native-app
• npm start
• Download Expo App
• Scan the QR Code

Method 2
• npm install -g react-native-cli
• react-native init reactTutorialApp
• cd reactTutorialApp
• react-native start
• (start in a new terminal) react-native run-ios
• react-native run-android

Method 2
• node/npm
• HomeBrew
• Watchman
• react-native-cli
• XCode/Android Studio

https://github.com/stacygohyunsi/
react-native-workshop.git

Core Components
• View
• Stylesheet
• Text
• Flexbox
• Image
• TextInput
• Fetch

• <View></View> == <div></div>
View

Styling
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
}
});

Text
• <Text></Text> == <p></p>

Flexbox
• flexDirection: column, row
• justifyContent: flex-start, center, flex-end, space-
around, and space-between
• alignItems: flex-start, center, flex-end

Image
<Image source={require(‘./test.png’)} />
<Image source={{uri: 'https://
facebook.github.io/react/img/
logo_og.png'}}

TextInput
Attributes:
• onChangeText: function
• value: string

Button
Attributes:
• onPress: function
• title: string

Fetch
fetch(url, {
method:
headers:
body:
}).then(() => {
….
})

Differences between React
vs React Native?

Answer:
• React-Native doesn’t use HTML to render the app
• Slightly different syntax e.g. onPress vs onClick
• Publishing

Additional exercises:
Movies app that fetches 25 movies that are in
theaters and displays them in a ListView.

Additional exercises:
• https://facebook.github.io/react-native/releases/
0.28/docs/sample-application-movies.html

What’s next?
• UI Component Libraries
Shoutem UI - 2,755 stars
React Native Elements - 7,657 stars
NativeBase - 6,512 stars

What’s next?
• React Navigation (https://reactnavigation.org/
docs/intro/)

What’s next?
• https://github.com/stacygohyunsi/react-native-guide

Additional resources:
• For integrating facebook login, location services,
etc into your react-native app
• https://github.com/stacygohyunsi/react-native-
guide

React && React Native workshop

More Related Content

What's hot

Similar to React && React Native workshop

Recently uploaded

React && React Native workshop