Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Sviluppare applicazioni client, server e mobile con React
Jiayi Hu, Maksim Sinik, Michele Stieven, Fabio Biondi
FABIO BIONDI
FREELANCE
fabiobiondi.io
EX FLASH-FLEX-AIR

CERTIFIED INSTRUCTOR :°(
2002-2012
I also love: Typescript, Redux, RxJS, D3.js, CreateJS,Arduino, ….
ANGULAR & REACT
DEVELOPER &TRAINER
COMMUNITIES
ANGULAR 

DEVELOPER ITALIANI
JAVASCRIPT 

DEVELOPER ITALIANI
REACT 

DEVELOPER ITALIANI
PARTNERS
ONE YEAR SUBSCRIPTION
(for 2 attendees)
Javascript ES6 : La guida mancante in italiano
Corso completo di sviluppo web: crea da zero il tuo business
La Fabbrica di innovazione e sviluppo tecnologico
dei servizi core per le aziende.
INutile è anche il tuo successo profess...
• Il marketplace che conne0e aziende e freelancer digitali
• Usa l’Ar:ficial Intelligence per la creazione di team di freel...
IL PROGRAMMA DI OGGI
// 09:50-10:30

(JsxTopLevelAPI) => <FabioBiondi />



// 10:30-11:10

(ReactNative) => <MicheleStieven />



// 11:10-11:...
<JSX>
Top-Level API
vs
Fabio Biondi
JSX
• Many Angular / Javascript developers 

think JSX is sh*t
• Why? Because of the HTML, CSS and JS “mix”

(in the same ...
JSX
In my opinion 

JSX is one of the most interesting features in React 

thanks to its flexibility
JSX
• JSX is a preprocessor step that adds XML syntax to JavaScript
• So, you can mix HTML, JS and CSS
• A simple way to u...
GOAL
Component-based approach
<Widget> should contain several contents: 

React Components or HTML element
PART 1
JSXVS REACT TOP-LEVEL API
COMPONENTS: JSX
import React from ‘react’;

export const Text = () => {
return <div style={{color: 'red'}}>Hello</div>;
};...
COMPONENT:
COMPONENTS: REACT API
export const Text = () => {
return React.createElement(
'div',
{
style: { color: 'green' ...
DYNAMIC CONTENT: JSX
export const Text = props => {
return <div>{props.children}</div>
};
export const Home = () => {
retu...
DYNAMIC CONTENT: API
export const Home = () => {
return <Text>Hello World</Text>
};
HOWTO USE:
COMPONENT:
export const Tex...
REAL WORLD EXAMPLE
<Text>React</Text>
<Text inline>Hello</Text>
<Text inline>World</Text>
COMPONENT:export const Text = pr...
OUTPUT: DEVTOOLS
PART 2
<Widget /> component
<Dashboard> <Widget>
COMPONENT:
export const Dashboard = () => {
return (
<div>
<Widget title=“Temperatures” />
<Widget ti...
COMPONENT:
export const Dashboard = () => {
const destroyWidget = () => console.log(‘destroy widget');
const toggleOptions...
FLOW
CREATE A CARD / WIDGET
IN BOOTSTRAP 4
COMPONENT:
<div class="card">
<div class="card-header">Widget Title</div>
<div class...
<Widget />
COMPONENT:
export const Widget = props => {
return (
<div className="card">
<div className="card-header">
<span...
PART 3
SPLIT IN COMPONENTS
COMPONENT TREE 1/2
COMPONENT TREE 2/2
<Widget> <WidgetBar>
COMPONENT:
export const Widget = props => {
return (
<div className="card">
<WidgetBar
title={props.t...
COMPONENT:
const WidgetBar = props => {
return (
<div className="card-header">
<span>{props.title}</span>
<i className="fa...
PART 4

<WidgetBody>
type AS CLASS NAME
<Widget title="Temperatures"
type={Chart}
config={temperatures} />


<Widget title=“User Profile"
type=...
WidgetBody Content
const Chart = props => (
<h1 className=“m-2">
I'm a chart {props.config.data.length}
</h1>
);
const Pro...
COMPONENT:
export const Widget = props => {
return (
<div className="card">
<WidgetBar
title={props.title}
onToggleOptions...
<WidgetBody>
const WidgetBody = props => {
const {
type, title, onToggleOptions, onClose, ...others
} = props;


return Re...
PART 5
type AS STRING
(USEFUL WHEN WIDGET CONFIGURATION

IS LOADED FROM JSON)
HOWTO USE
COMPONENT:
<Widget title=“Temperatures"
type="Chart"
config={myData} 

onClose={() => destroyWidget()}
onShowOpt...
or by using .map()
COMPONENT:
props.widgets.map(item => (
<Widget
key={item.id}
{...item}
onClose={() => destroyWidget()}
...
<widgetBody>: JSX version
COMPONENT:
const WidgetBody = props => {
switch(props.type) {
case 'Chart': return <Chart {...pr...
<WidgetBody>: REACT API/eval version
COMPONENT:
const WidgetBody = props => {
const { type, ...others } = props;


return ...
<widgetBody>: API & Map() version
COMPONENT:
const WidgetBody = props => {
const { type, ...others } = props;
return React...
CAN I DOTHE SAME 

IN ANGULAR?


CREATING A DIRECTIVE:

<div
[widgetBody]=“myComponent”
(close)=“destroy()”
(toggleOptions)=“toggleMenu()”>
import {
ComponentRef, ComponentFactoryResolver, Directive, ElementRef, Input, OnDestroy, ViewContainerRef
} from '@angula...
<source-code>
THANKS
fabiobiondi.io
JOIN OUR COMMUNITIES
ANGULAR 

DEVELOPER ITALIANI
JAVASCRIPT 

DEVELOPER ITALIANI
REACT 

DEVELOPER ITALIANI
React: JSX and Top Level API
React: JSX and Top Level API
React: JSX and Top Level API
React: JSX and Top Level API
React: JSX and Top Level API
Nächste SlideShare
Wird geladen in …5
×

React: JSX and Top Level API

698 Aufrufe

Veröffentlicht am

Slide 1-15: event intro (italian)
Slide 16-60: JSX and React Top Level API (english)

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

React: JSX and Top Level API

  1. 1. Sviluppare applicazioni client, server e mobile con React Jiayi Hu, Maksim Sinik, Michele Stieven, Fabio Biondi
  2. 2. FABIO BIONDI FREELANCE fabiobiondi.io
  3. 3. EX FLASH-FLEX-AIR
 CERTIFIED INSTRUCTOR :°( 2002-2012
  4. 4. I also love: Typescript, Redux, RxJS, D3.js, CreateJS,Arduino, …. ANGULAR & REACT DEVELOPER &TRAINER
  5. 5. COMMUNITIES
  6. 6. ANGULAR 
 DEVELOPER ITALIANI JAVASCRIPT 
 DEVELOPER ITALIANI REACT 
 DEVELOPER ITALIANI
  7. 7. PARTNERS
  8. 8. ONE YEAR SUBSCRIPTION (for 2 attendees)
  9. 9. Javascript ES6 : La guida mancante in italiano Corso completo di sviluppo web: crea da zero il tuo business
  10. 10. La Fabbrica di innovazione e sviluppo tecnologico dei servizi core per le aziende. INutile è anche il tuo successo professionale dei prossimi anni 
 www.inattivo.com Progetto INutile
  11. 11. • Il marketplace che conne0e aziende e freelancer digitali • Usa l’Ar:ficial Intelligence per la creazione di team di freelancer • Un workspace Agile per la ges:one della collaborazione azienda - team • Il primo marketplace collegato ad un ufficio 3D in Virtual Reality • Iscrivi: alla newsle0er su h0ps://coderblock.com o sulla pagina facebook per testare la pia0aforma in closed beta e ricevere i primi premi! Il recruitment ai tempi del remote working.
  12. 12. IL PROGRAMMA DI OGGI
  13. 13. // 09:50-10:30
 (JsxTopLevelAPI) => <FabioBiondi />
 
 // 10:30-11:10
 (ReactNative) => <MicheleStieven />
 
 // 11:10-11:40
 (coffee) => ‘networking’ // 11:40-12:20
 (NextJS) => <MaksimSinik />
 
 // 12:20-13:00
 (customRenderer) => <JiayiHu />
 

  14. 14. <JSX> Top-Level API vs Fabio Biondi
  15. 15. JSX • Many Angular / Javascript developers 
 think JSX is sh*t • Why? Because of the HTML, CSS and JS “mix”
 (in the same file)
  16. 16. JSX In my opinion 
 JSX is one of the most interesting features in React 
 thanks to its flexibility
  17. 17. JSX • JSX is a preprocessor step that adds XML syntax to JavaScript • So, you can mix HTML, JS and CSS • A simple way to update dynamically DOM • You can definitely use React without JSX (thanks to React API) 
 (but JSX makes React a lot more elegant)
  18. 18. GOAL
  19. 19. Component-based approach
  20. 20. <Widget> should contain several contents: 
 React Components or HTML element
  21. 21. PART 1 JSXVS REACT TOP-LEVEL API
  22. 22. COMPONENTS: JSX import React from ‘react’;
 export const Text = () => { return <div style={{color: 'red'}}>Hello</div>; }; <Text /> HOWTO USE: COMPONENT: <div>Hello</div> OUTPUT:
  23. 23. COMPONENT: COMPONENTS: REACT API export const Text = () => { return React.createElement( 'div', { style: { color: 'green' } }, 'Hello'); }; <Text /> HOWTO USE: <div>Hello</div> OUTPUT:
  24. 24. DYNAMIC CONTENT: JSX export const Text = props => { return <div>{props.children}</div> }; export const Home = () => { return <Text>Hello World</Text> }; HOWTO USE: COMPONENT:
  25. 25. DYNAMIC CONTENT: API export const Home = () => { return <Text>Hello World</Text> }; HOWTO USE: COMPONENT: export const Text = props => { return React.createElement('div', null, props.children); };
  26. 26. REAL WORLD EXAMPLE <Text>React</Text> <Text inline>Hello</Text> <Text inline>World</Text> COMPONENT:export const Text = props => { const type = props.inline ? 'span' : 'div'; return React.createElement( type, null, props.children ); };
  27. 27. OUTPUT: DEVTOOLS
  28. 28. PART 2 <Widget /> component
  29. 29. <Dashboard> <Widget> COMPONENT: export const Dashboard = () => { return ( <div> <Widget title=“Temperatures” /> <Widget title=“Profile” /> <Widget title=“Anything" /> </div> ) }; 1/2
  30. 30. COMPONENT: export const Dashboard = () => { const destroyWidget = () => console.log(‘destroy widget'); const toggleOptions = () => console.log(‘toggle options’); 
 return ( <div> <Widget title="Temperatures" onClose={() => destroyWidget()} onToggleOptions={() => toggleOptions()} /> </div> ) <Dashboard> <Widget> 2/2
  31. 31. FLOW
  32. 32. CREATE A CARD / WIDGET IN BOOTSTRAP 4 COMPONENT: <div class="card"> <div class="card-header">Widget Title</div> <div class="card-body"> Widget Content </div> </div>
  33. 33. <Widget /> COMPONENT: export const Widget = props => { return ( <div className="card"> <div className="card-header"> <span>{props.title}</span> <i className="fa fa-gear" onClick={props.onToggleOptions}></i> <i className="fa fa-times" onClick={props.onClose}></i> </div> <div className="card-body"> ...Widget Content... </div> </div> ) }
  34. 34. PART 3 SPLIT IN COMPONENTS
  35. 35. COMPONENT TREE 1/2
  36. 36. COMPONENT TREE 2/2
  37. 37. <Widget> <WidgetBar> COMPONENT: export const Widget = props => { return ( <div className="card"> <WidgetBar title={props.title} onToggleOptions={props.onToggleOptions} onClose={props.onClose} /> <div className="card-body"> Widget Body </div> </div> ) };
  38. 38. COMPONENT: const WidgetBar = props => { return ( <div className="card-header"> <span>{props.title}</span> <i className="fa fa-gear pull-right" onClick={props.onToggleOptions} /> <i className="fa fa-times pull-right" onClick={props.onClose} /> </div> ) } <WidgetBar>
  39. 39. PART 4
 <WidgetBody>
  40. 40. type AS CLASS NAME <Widget title="Temperatures" type={Chart} config={temperatures} /> 
 <Widget title=“User Profile" type={Profile} userID="123"/> NOTE: each widget needs different properties to work
  41. 41. WidgetBody Content const Chart = props => ( <h1 className=“m-2"> I'm a chart {props.config.data.length} </h1> ); const Profile = props => ( <div className="m-2"> <input type="text" defaultValue={props.userID}/> ... </div> ); const Any = props => `I’m another component`;
  42. 42. COMPONENT: export const Widget = props => { return ( <div className="card"> <WidgetBar title={props.title} onToggleOptions={props.onToggleOptions} onClose={props.onClose} /> <WidgetBody {...props} /> </div> ) }; NOTE: we use spread operator … to pass all props to a component <Widget> <WidgetBody>
  43. 43. <WidgetBody> const WidgetBody = props => { const { type, title, onToggleOptions, onClose, ...others } = props; 
 return React.createElement(type, {...others}, null); } NOTE: we use ES6 destructuring
  44. 44. PART 5 type AS STRING (USEFUL WHEN WIDGET CONFIGURATION
 IS LOADED FROM JSON)
  45. 45. HOWTO USE COMPONENT: <Widget title=“Temperatures" type="Chart" config={myData} 
 onClose={() => destroyWidget()} onShowOptions={() => openOptions()} /> <Widget title="MyProfile" type="Profile" user=“123"
 onClose={() => destroyWidget()} onShowOptions={() => openOptions()} /> <Widget title=“Any Component" type="Any"/>
  46. 46. or by using .map() COMPONENT: props.widgets.map(item => ( <Widget key={item.id} {...item} onClose={() => destroyWidget()} onShowOptions={() => openOptions()} />
 );
  47. 47. <widgetBody>: JSX version COMPONENT: const WidgetBody = props => { switch(props.type) { case 'Chart': return <Chart {...props} />; case 'Profile': return <Profile {...props} />; case 'Any': return <Any {...props} />; default: return <h3>You forgot type</h3>; } };
  48. 48. <WidgetBody>: REACT API/eval version COMPONENT: const WidgetBody = props => { const { type, ...others } = props; 
 return React.createElement( eval(type), {...others}, null ) } If you run eval() someone could run malicious code on the user's machine
  49. 49. <widgetBody>: API & Map() version COMPONENT: const WidgetBody = props => { const { type, ...others } = props; return React.createElement(
 components.get(type), {...others}, null ) } const components = new Map(); components.set('Chart', Chart); components.set('Profile', Profile); components.set('Any', Any);
  50. 50. CAN I DOTHE SAME 
 IN ANGULAR?
  51. 51. 
 CREATING A DIRECTIVE:
 <div [widgetBody]=“myComponent” (close)=“destroy()” (toggleOptions)=“toggleMenu()”>
  52. 52. import { ComponentRef, ComponentFactoryResolver, Directive, ElementRef, Input, OnDestroy, ViewContainerRef } from '@angular/core';
 @Directive({ selector: '[widgetBody]' }) export class WidgetBodyDirective implements OnDestroy { @Input() set widgetBody(component: WidgetComponent) { this.view.clear(); if (component) { let factory = this.resolver.resolveComponentFactory(component.type); this.ref = this.view.createComponent(factory); for (let key in component.payload) { this.ref.instance[key] = component.payload[key]; } } }
 private ref: ComponentRef<any>; constructor( private view: ViewContainerRef, private resolver: ComponentFactoryResolver) { } ngOnDestroy() { if (this.ref) { this.ref.destroy(); } } }
  53. 53. <source-code>
  54. 54. THANKS fabiobiondi.io
  55. 55. JOIN OUR COMMUNITIES ANGULAR 
 DEVELOPER ITALIANI JAVASCRIPT 
 DEVELOPER ITALIANI REACT 
 DEVELOPER ITALIANI

×