React + React Native. Based on material by Danilo Filgueira

Transcription

1 React + React Native Based on material by Danilo Filgueira

2 Prerequisites JS and ES6 HTML and CSS NPM/YARN and NODE

3 React A Javascript library for creating reactive and composable UI components Whenever some specified data change, React components re-render their associated UI React components are chainable or composable in a tree-like fashion <Cmp1> <Cmp2> <Cmp4> </Cmp4> </Cmp2> <Cmp3> </Cmp3> </Cmp1>

4 Anatomy of a React Component State Those data whose manipulation defines the business logic of your application Props (properties) Those data provided to a component by its parent ReactiveUI The reactive UI associated with the component

5 Components as JS classes We can define React components by using an ES6 class that extends React.Component import React from react ; class MyComponent extends React.Component { constructor() { super(); // This constructor defines the state of the component render() { return(// This defines the reactive UI associated with the component) my_method() { //This is a custom method

6 State this.state holds the state of the component and must be initialized in the constructor using a JS object literal State must be changed using method this.setstate that accepts a new state this.setstate merges the current state with the given one It intersects the states and if something is in common, it changes properly the current state constructor() { super(); this.state = {notes : [] my_method() { const mynotes = /*Here you construct the notes you want to set*/ this.setstate({notes : mynotes);

7 State this.setstate is not synchronous React may batch multiple state changes to guarantee better performance this.setstate performs a shallow object comparison to set the new state: this.state = { notes : [note1, note2], filter : NONE this.setstate({notes : [note3]) { notes : [note3], filer: NONE

8 Props Named values that a parent component makes available to one or more of its children Syntax in the parent component Props are accessible in children components using: this.props.prop_name React reserves certain props for special purposes

9 Reactive UI Whenever the state of a component or its props change, the UI associated with the component should be re-rendered React maintains a virtual representation of the UI (Virtual DOM) of all the components and uses it to understand what pieces of UI need to be re-rendered These pieces of UI are those defined using the state or the props of the application <div> <h1>{this.state.title</h1> <p>{this.props.paragraph</p> </div>

10 JSX Every piece of UI should be defined properly JSX helps solve the problem An in-js HTML-like syntax to represent pieces of UI Since JSX is translated into JS method calls, it can be freely interpolated with JS and so we can define pieces of UI that depend on components state and props, using the { syntax

11 First example import React from 'react'; class App extends React.Component { render() { var mystyle = { fontsize: 100, color: '#FF0000' return ( <div> <h1 style = {mystyle>header</h1> </div> );

12 Composite components and JSX A React component can embed several subcomponents and its UI is also the UI of its child components To define the UI of a composite component, we can use JSX and the name of the child components There exist special built-in atomic components that map directly to HTML DOM elements They have the same name as their HTML counter parts and their props USUALLY map to HTML attributes HTML mapped components come with special props used for signalling DOM events like click, etc These props expect a reference to a function or method to be executed to handle the event

13 import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = { header: "Header from state...", content: "Content from state..." render() { return ( <div> <h1>{this.state.header</h1> <h2>{this.state.content</h2> </div> ); export default App; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getelementbyid('app'));

14 Decorator components and JSX We may want to define a component that takes other components and decorates them or extend their functionality For example, a component (BorderCmp) that adds a border to input components We can use JSX and we can then access inside BorderCmp the input components using this.props.children

15 Example render() { const ui_fragment = <p classname= htmlclassprop >{this.state.text</p> return ( <div> <h1>{this.state.title</h1> <SubComponent aprop={4+5/> {ui_fragment <button onclick={this.handler></button> </div> ) handler(e) { console.log( Horay! );

16 Things to be careful about JS expressions can only be interpolated in JSX When we pass a reference to a function/method as a prop, it will be executed in the context of the component that receives it If we need a different behaviour <button onclick= {this.handler.bind(this)> </button> bind should be used for atomic HTML-mapped elements, as they do not retain any context

17 Again import React from react ; class MyComponent extends React.Component { constructor() { super(); //This constructor defines the state of the component render() { return(//this defines the reactive UI associated with the component) my_method(){ //This is a custom method

18 Stateless components React components that do not maintain a state but render certain UIs based on input props const MyComp = (props)=> { return ( //My reactive UI )

19 Controlled components React imposes a pattern for manipulating certain atomic components that map to certain HTML DOM elements like <input><select><textarea> etc... constructor() { super(); this.state = {value : render() { <input value={this.state.value onchange={this.changevalue.bind(this) /> changevalue(event) { this.setstate({value: event.target.value)

20 Inter-components communication <Root> <Cmp1> <Cmp2/> <Cmp3/> </Cmp1> </Root> We must use props We can pass functions or methods as props and specify in which context these functions must be executed We must use the parent component and props to implement sibling to sibling communication

21 PropTypes and DefaultProps We can set run time type checkings for props using the prop-types library We can also set default values for props classmycomponent extends React.Component {... MyComponent.propTypes = { prop1 : PropTypes.string, prop2 : PropTypes.func MyComponent.defaultProps = { prop1 : This is a default value

22 Component Lifecycle methods A React component inherits methods triggered during certain events of its lifecycle We can implement these for our own purposes componentdidmount() { //Triggered when the reactive UI has been outputted for the first time componentwillunmount() { //Triggered when the component is going to be destroyed shouldcomponentupdate(nextprops, nextstate){ //Can be implemented to describe custom state analysis for instructing react when it is necessary to update the UI

23 React Native React + atomic components that map directly to native UI elements for IOS or Android You write your business logic in JS and React, but the UI components are rendered natively on IOS or Android

24 React Native architecture Native (Java/C++/Swift) Native Bridge (Java/C++/Swift) JS VM

25 React Native A library Binds JSX to ios Cocoa Touch Android UI Custom Layout system Comprises a suite of technologies Architecture is scalable Extensible

26 React Native Components They have the same characteristics of React ones, but atomic components are different: they map to Native UI elements <View> is a generic container of other UI elements <Text> is a piece of text <Image> is an image <Button> is a button <FlatList> is a list that renders only visible elements <Switch> is a switch

27 React Native Comes with a bunch of atomic components, nevertheless They do not cover all the desidered functionality (e.g, a component for a MapView is not available) To solve this problem leverage the community! Most of the atomic components are platform agnostic, but some are not We can implement our own atomic components by leveraging React Native helpers for Java and Swift

28 Styling React Native components export default class App extends React.Component { constructor(){ super(); render() { return ( <View style={styles.container> </View>); const styles = StyleSheet.create({ container: { flex : 1, backgroundcolor: '#fff',, ); React Native offers a Stylesheet API that works in a way similar to CSS React Native adopts the flexbox specification for layouts

29 import React, { Component from 'react'; import { AppRegistry, Text, View from 'react-native'; class Blink extends Component { constructor(props) { super(props); this.state = {showtext: true; // Toggle the state every second setinterval(() => { this.setstate(previousstate => { return { showtext:!previousstate.showtext ; );, 1000); render() { let display = this.state.showtext? this.props.text : ' '; return ( <Text>{display</Text> );

30 export default class BlinkApp extends Component { render() { return ( <View> <Blink text='i love to blink' /> <Blink text='yes blinking is so great' /> <Blink text='why did they ever take this out of HTML' /> <Blink text='look at me look at me look at me' /> </View> ); // skip this line if using Create React Native AppAppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

31 Networking React Native lets you do HTTP requests and WebSockets using the fetch (Promise based) and WebSocket APIs fetch(' => response.json()).then((responsejson) => { return responsejson.movies; ).catch((error) => { console.error(error); ); var ws = new WebSocket('ws://host.com/path' ); ws.onopen = () => { // connection opened ws.send('something'); // send a message ; ws.onmessage = (e) => { // a message was received console.log(e.data); ;

32 React Native APIs React Native makes available a series of APIs for using native functionalities Vibration API Keyboard API Geolocation API...