A 4-hour long workshop on React & React Native in collaboration with Paypal and GeeksHacking

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

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

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

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

5. Motivation behind ReactJS
Previously for AngularJS…

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

8. X

10. Need to modify the DOM
tree incessantly and a lot

11. React Concepts
• Component based
• Virtual DOM
• JSX
• Immutability
• One way data flow

12. React Concepts
• Component based
• Virtual DOM
• JSX
• Immutability
• One way data flow

13. Components

14. React Concepts
• Component based
• Virtual DOM
• JSX
• Immutability
• One way data flow

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

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

17. Inefficient?

18. Maybe not…

19. Two Virtual Doms
Current State
VD
Previous State
VD

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

22. Virtual DOM
Previous
state
Current
State

23. Virtual DOM
Previous
state
Current
State
DOM
Updates only
relevant
changes

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

25. Pretty smart eh?

26. React Concepts
• Component based
• Virtual DOM
• JSX
• Immutability
• One way data flow

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

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

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

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

31. React Concepts
• Component based
• Virtual DOM
• JSX
• Immutability
• One way data flow

32. Immutability

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

34. let updatedPassengers = this.state.passengers;
Example of Immutability

35. let updatedPassengers = this.state.passengers;
updatedPassengers.push('Vincent');
Example of Immutability

36. But is it really correct?

37. ‘Push’ mutates the state
directly

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

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

40. React Concepts
• Component based
• Virtual DOM
• JSX
• Immutability
• One way data flow

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

42. A short exercise…

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

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

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

46. 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)

47. 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)

48. 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();

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

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

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

52. HelloWorld.js
import React from 'react';
const HelloWorld = () => {
return (<div>Hello World!</div>);
};
export default HelloWorld;

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

54. HelloWorld.js
import React from 'react';
const HelloWorld = (props) => {
return (<div>Hello {props.name}!</div>);
};
export default HelloWorld;

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

56. State

57. State == data that is going
to change

58. Functional components vs
Class components

59. Functional
const App = () => {
return (<div>Hello World!</div>);
};
export default App;

60. Class
Local state is a feature available only to classes

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

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

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

64. class HelloWorld extends Component {
constructor(props) {
super(props); //call out to its parent constructor
this.state = {
greeting: ‘hello’
}
}
render() {
return (
<div>
{this.state.greeting} {this.props.name}!
</div>
);
}
}
HelloWorld.js

65. How to change the state?

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

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

68. HelloWorld.js
class HelloWorld extends Component {
constructor(props) {
super(props);
this.frenchify =
this.frenchify.bind(this);
this.state = {
greeting: ‘hello’
}
}
…
}

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

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

71. React-Native

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

73. React Native Limitations
• Native Components − might need to write some
platform specific code
• Not even version 1 yet

75. What’s the difference?

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

77. 3 threads
UI Thread JS Thread
Native
Modules
Thread

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

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

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

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

82. Debugging

83. A short exercise…

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

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

87. • <View></View> == <div></div>
View

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

89. Text
• <Text></Text> == <p></p>

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

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

92. TextInput
Attributes:
• onChangeText: function
• value: string

93. Button
Attributes:
• onPress: function
• title: string

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

95. Differences between React
vs React Native?

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

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

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

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

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

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

103. Add ons: Redux

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