Laboratorio Avanzato di Programmazione II

Lesson 03: React fundamentals

Prof. Antonio S. Calanducci

Corso di Laurea in Informatica, Unict
Prof. Antonio S. Calanducci
Anno accademico 2017/18
 Outline
React vs React Native

Components

Component composition

Properties (or props)

ES2015: Constants and arrow functions

Challenges
 What is React
“A JavaScript library for building User Interface”
Features:
Declarative (vs imperative)
Component based
Library for the View layer (as part of a full MVC framework)
can be used with any other libraries
doesn’t provide out-of-the box data management, server
communication, routing, etc
very popular for Web Development (React.js)
 What is React Native
A framework that uses the React library to render native
(mobile) components. Ex:
• <Text> renders UILabel (on iOS) and
Android.widget.TextView (on Android)
• <View> renders UIView (on iOS) and Android.view.View (on
Android
• <Image> renders UIImageView (on iOS) and
Android.widget.ImageView (on Android)
 React.js vs React Native hello World

import React from 'react';

import ReactDOM from 'react-dom'; import React from 'react';
import { AppRegistry, Text } from 'react-
function HelloWorld { native';
return (
<h1>Hello World!</h1> function HelloWorld {
); return (
} <Text>Hello World!</Text>
);
}
ReactDOM.render(
<HelloWorld />, AppRegistry.registerComponent('HelloWorld'
document.getElementById('root') , () => HelloWorld);
);
 React Component
In React everything is a Component
• a function that renders some User Interface part

We build apps composing components

Built-in components (provided by React Native):

• Text, TextInput, FlatList, View, Image, etc
• https://facebook.github.io/react-native/docs/components-
and-apis.html
 Component creation
React.createElement(<component>, <props>, <children>, ...)
 JavaScript XML (JSX)
A declarative markup language to define component’s layout
• looks like HTML/XML and JavaScript mixed together

JSX is not browser compatible

• A compiler/transpiler is needed to convert to ES5 (that
browser understands)
• Babel is the most used one (https://babeljs.io)
• You can mix JS code into JSX with {}
Component creation with JSX
 Component composition
Break down interface into ShoppingCart
components

Start by the biggest one

• composed by smaller
components
OrderItem
 UI Breakdown
Iterate the process until you can’t break down in smaller
pieces:
Quantity

Thumbnail ProductInfo Subtotal

Six components:
• ShoppingCart, OrderItem, Thumbnail, ProductInfo,
Quantity, Subtotal
 Properties (or Props)
Components can be customized when they are created, with
different parameters. These creation parameters are called
props.

The most common prop is style

https://facebook.github.io/react-native/docs/props.html

The built-in components provides many props. Check out the

documentation for each component
 Properties for custom components
every component can take a props object that provides access
to the props passed in by the parent/consumer

function HelloWorld (props) {

return (
<Text style={styles.text}>Hello World, {props.title}!</Text>
)
};
function App() {
return (
<View>
<HelloWorld title="React Native" />
</View>
)
}
 Passing props to children
Props are passed using the attribute syntax of JSX (inherited from XML):

<Title text="Hello World!"/>

• Strings can passed directly, for other data types use curly braces {} to wrap the
values.
• Boolean values can be simplified with just the property name (presence = true,
absence = false), like in HTML




 <Title
text="Hello World!"

 highlighted
fontSize={24}

 />
 Variable declaration
Variable scopes:
• JavaScript (ES5)
• global scope / function scope
• var to define a variable

• Modern JavaScript ES2015

• global scope / function scope / block scope
• let to define a variable

Best practice: prefer let

 Constant declaration
use const to create a constant that cannot be re-assigned or
redeclared

block-scoped
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

// NOTE: Constants can be declared with uppercase or lowercase, but a common

// convention is to use all-uppercase letters.

// define MY_FAV as a constant and give it the value 7

const MY_FAV = 7;

// this will throw an error

MY_FAV = 20;

// will print 7
console.log('my favorite number is: ' + MY_FAV);
 Arrow functions (ES2015)
Shorter syntax for function expressions
handy to define “one-line” function when there is only 1 statement (can omit parenthesis
too)
const sum = (a, b) => a + b;
sum(3,5);

const incrementer = i => i + 1;

incrementer(5);

const saluta = () => console.log("Ciao!");

saluta();

const nomeCompleto = (nome, cognome) => {

let fullName = nome + " " + cognome;
return fullName
};

nomeCompleto("Mario", "Rossi");

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/
Arrow_functions
Questions
 Challenges
Geek:
• build a <Card> component that takes in two props (title
and image); images are local
• renders 3 Cards with your preferred programming
languages

Nerd:
• renders more that 3 Cards enabling scrolling; images are
remote

Hacker:
• renders a list of Cards taken from an array