React has been named the front-end library to learn in 2016! React Native has also picked up tremendous steam as a way to build cross-platform apps with React. In this talk, Rami will do a quick 5 minute introduction to React's core concepts. Following, Rami will introduce React Native, discuss the differences between React & React Native, and show you how to build a simple Android application. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal.
5. • Introduction to React
• Introduction to React Native
• Building Apps with Flexbox
• Using the List View
• Builtin Components
• Demo Walkthrough
• Tools
@RAMISAYAR
10. • React can be used on both
the client and server side.
• Uses a Virtual DOM to
selectively render subtrees of
components on state change.
@RAMISAYAR
11. • Adds this weird thing to your HTML called JSX.
• Let’s you write HTML-ish tags in JavaScript to simplify creating
components.
var HelloWorldComponent = React.createClass({
render: function(){
return ( <h1>Hello, world!</h1> );
}
});
And you can use ES6 classes instead of calling createClass()
@RAMISAYAR
12. • Added attributes are called props and can be used to render
dynamic data.
var HelloNameComponent = React.createClass({
render: function(){
return ( <h1>Hello, {this.props.name}!</h1> );
}
});
ReactDOM.render(<HelloNameComponent name="Rami"
/>, document.getElementById('app'));
@RAMISAYAR
13. • Every component has a state object and a props object.
• Functions & Objects:
• getInitialState – Return value is the initial value for state.
• setState – Sets the state and triggers UI updates.
• getDefaultProps – Sets fallback props values if props aren’t supplied.
@RAMISAYAR
14. • React events are attached as properties and can trigger
methods.
• Data flows unidirectionally via the state and props objects.
• React seams to rerender the whole app on every data change
but really it only ends up rerendering the parts that changed.
@RAMISAYAR
16. • React Native is like React but instead of using web components
that you build yourself… you use native components instead.
• React Native allows you to use the same React concepts but
instead build native iOS and Android applications.
• There is also support for the Universal Windows platform and
Tizen platform.
@RAMISAYAR
20. • All components have a style prop that accepts a JavaScript
object.
• You can use StyleSheet.create() to create a more complex style
sheet object that you can reference in your components.
@RAMISAYAR
22. Take a look at JavaScript style libraries: jss, cssx, jscss, react inline styles,
radium & more..
@RAMISAYAR
23. • Mobile viewports have fixed dimensions.
• React Native allows you to use the flexbox algorithm to layout
components, just like on the web*.
* A few exceptions. The defaults are different, with flexDirection
defaulting to column instead of row, and alignItems defaulting to
stretch instead of flex-start, and the flex parameter only supports a
single number.
@RAMISAYAR
24. • Displays vertically scrolling list of structured data.
• Only renders elements currently on screen.
• Extremely useful components that we will see in our demo.
@RAMISAYAR
26. • React Native provides the Fetch API for your networking needs.
• Fetch will seem familiar if you have used XMLHttpRequest or
other networking APIs.
• The XMLHttpRequest API is built in to React Native.
• React Native also supports WebSockets for full-duplex
communication channels over a single TCP connection.
@RAMISAYAR
29. • Nuclide is a package on top
of Atom to add support for
React Native, including
remote debugging.
• nuclide.io
@RAMISAYAR
30. Extension for Visual Studio
Code that allows you to debug
your code, quickly run react-
native commands from the
command palette and use
IntelliSense to browse objects,
functions and parameters for
React Native APIs.
github.com/Microsoft/vscode-
react-native
@RAMISAYAR
32. • No Need to Fork! Command-line Generator
• Apps, Components/Styles, Containers
(smart components), Screens
(opinionated containers), and more...
• ALL CODE works with iOS and Android
• Redux State Management
• Optional Redux Persistence (uses
AsyncStorage via redux-persist)
• Reactotron Ready
• Included Common Libs:
• react-native-vector-icons
• react-native-animatable
• react-native-i18n
• react-native-drawer
• apisauce
• reduxsauce
• react-native-maps
• rn-translate-template
• Included Developer Libs:
• reactotron
• AVA
• enzyme
• react-native-mock
• mockery
• nyc
@RAMISAYAR
33. • A cloud service that enables Cordova and React Native
developers to deploy mobile app updates directly to their
users’ devices. FREE.
• http://codepush.tools
@RAMISAYAR
36. • Introduction to React
• Introduction to React Native
• Building Apps with Flexbox
• Using the List View
• Builtin Components
• Demo Walkthrough
• Tools
@RAMISAYAR