Scribd
Upload
105 views

Lezione03 Intro A React PDF

Here are some challenges to build upon the React Native concepts covered: Geek: Build a <Card> component that renders a title and image for each card. Pass in title and local image props and render 3 cards displaying your favorite programming languages. Nerd: Enhance the card component to render from a remote image source instead of local. Also add scrolling so multiple cards can be displayed beyond just 3. Hacker: Create an array of card data objects that include title and image URL. Map over the array in a parent component to dynamically render a list of cards based on the data, eliminating the need to hardcode each individual card.

Uploaded by

acaland
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
105 views

Lezione03 Intro A React PDF

Here are some challenges to build upon the React Native concepts covered: Geek: Build a <Card> component that renders a title and image for each card. Pass in title and local image props and render 3 cards displaying your favorite programming languages. Nerd: Enhance the card component to render from a remote image source instead of local. Also add scrolling so multiple cards can be displayed beyond just 3. Hacker: Create an array of card data objects that include title and image URL. Map over the array in a parent component to dynamically render a list of cards based on the data, eliminating the need to hardcode each individual card.

Uploaded by

acaland
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy