React - Component Based Approach

•

0 gefällt mir•200 views

Fabio Biondi

Technologie

fabiobiondi.io
REACTTYPESCRIPT
2022
COMPONENT BASED APPROACH

fabiobiondi.io
Formazione front-end
Speaker & Content Creator
Community Founder
Google Developer Expert (Angular)
Microsoft MVP
Twitch Partner
fabiobiondi.dev

fabiobiondi.io
.com/c/FabioBiondi .tv/fabio_biondi
PARTNER

fabiobiondi.io
HOW TO PASS PROPS
BETWEEN COMPONENTS

fabiobiondi.io
Props
Stateful
Component
Stateless
Component

fabiobiondi.io
Props
State & side effects
here!
Stateless
Component

fabiobiondi.io
C
C
C
C
C
Props
Callback
State & side effects
here!
C
C
Props

fabiobiondi.io
A COMPONENT HANDLE A PART OF THE VIEW
SEPARATION OF CONCERNS
SEMANTIC HTML
REUSABLE
COMPOSABLE
TESTABLE

fabiobiondi.io
COMPONENTS ARE THE BUILDING BLOCKS
OF YOUR SPA

fabiobiondi.io
<Search>
<SearchList>
<Map>
<Services>
<BookingPage>

fabiobiondi.io
<SearchList>
<BookingPage>

fabiobiondi.io
<SearchList>
<SearchListItem>
<SearchList>
<SearchListItem>

Empfohlen

Redux Toolkit - Quick Intro - 2022Fabio Biondi

BotsocietyTeam2080

Botsociety: 500 Demo Day Batch 22500 Startups

Simple conversion Tipsgreensboro_seo

An api is not "yet another feature"Shay Weiner

Deep crawl the chaotic landscape of JavaScript Onely

China's Online Video Site Studyjessicazhang08

Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...Codemotion

Empfohlen

Redux Toolkit - Quick Intro - 2022Fabio Biondi

BotsocietyTeam2080

Botsociety: 500 Demo Day Batch 22500 Startups

Simple conversion Tipsgreensboro_seo

An api is not "yet another feature"Shay Weiner

Deep crawl the chaotic landscape of JavaScript Onely

China's Online Video Site Studyjessicazhang08

Matteo Santagata - Is your project scaling right? The BEE case study - Codemo...Codemotion

IT Event Report of TC Disrupt/GMIC01Booster

Android DevConference - Scaling Mobile DevelopmentiMasters

A Day in the Life of a HipChat DeveloperAtlassian

There is a bot for that - building chat bots from idea to productionGeert van der Cruijsen

Android + jenkinsFred Lin

Chico UI - Retreat 2011Guillermo Paz

Automate Behavior-driven Development (Stanford WebCamp 2022)DOCOMO Innovations, Inc.

Your Future HTML: The Evolution of Site Design with Web ComponentsKen Tabor

KIC 2022 Edited version - Ideaconcert Pitching Deck.pdfRizki Maulana

HiUED 前端/web 發展和體驗Bobby Chen

Advancing the State of The Art in AI and Testing - DevOps NextPerfecto by Perforce

iBeacon Reality Check _ Essential Considerations for an iBeacon DeploymentAirTight Networks

Rotterdam World ICTVideoWerkt BV

Bringing Quality Design Systems to Life with Storybook & ApplitoolsApplitools

Timesheet @ InsideTrack Rome #sitROMEmtamagnini

Biz Talk Server CertificationVskills

Agile BDDScrum Breakfast Vietnam

Too Long; Didn’t Watch! Extracting Relevant Fragments from Software Developme...Luca Ponzanelli

New World Code MonkeysFernando Di Bartolo

Automate Behavior-driven Development (DrupalCon Portland 2022)DOCOMO Innovations, Inc.

Introduction to E2E in CypressFabio Biondi

Create your React 18 / TS bundle using esbuildFabio Biondi

Weitere ähnliche Inhalte

Ähnlich wie React - Component Based Approach

IT Event Report of TC Disrupt/GMIC01Booster

Android DevConference - Scaling Mobile DevelopmentiMasters

A Day in the Life of a HipChat DeveloperAtlassian

There is a bot for that - building chat bots from idea to productionGeert van der Cruijsen

Android + jenkinsFred Lin

Chico UI - Retreat 2011Guillermo Paz

Automate Behavior-driven Development (Stanford WebCamp 2022)DOCOMO Innovations, Inc.

Your Future HTML: The Evolution of Site Design with Web ComponentsKen Tabor

KIC 2022 Edited version - Ideaconcert Pitching Deck.pdfRizki Maulana

HiUED 前端/web 發展和體驗Bobby Chen

Advancing the State of The Art in AI and Testing - DevOps NextPerfecto by Perforce

iBeacon Reality Check _ Essential Considerations for an iBeacon DeploymentAirTight Networks

Rotterdam World ICTVideoWerkt BV

Bringing Quality Design Systems to Life with Storybook & ApplitoolsApplitools

Timesheet @ InsideTrack Rome #sitROMEmtamagnini

Biz Talk Server CertificationVskills

Agile BDDScrum Breakfast Vietnam

Too Long; Didn’t Watch! Extracting Relevant Fragments from Software Developme...Luca Ponzanelli

New World Code MonkeysFernando Di Bartolo

Automate Behavior-driven Development (DrupalCon Portland 2022)DOCOMO Innovations, Inc.

Ähnlich wie React - Component Based Approach (20)

IT Event Report of TC Disrupt/GMIC

Android DevConference - Scaling Mobile Development

A Day in the Life of a HipChat Developer

There is a bot for that - building chat bots from idea to production

Android + jenkins

Chico UI - Retreat 2011

Automate Behavior-driven Development (Stanford WebCamp 2022)

Your Future HTML: The Evolution of Site Design with Web Components

KIC 2022 Edited version - Ideaconcert Pitching Deck.pdf

HiUED 前端/web 發展和體驗

Advancing the State of The Art in AI and Testing - DevOps Next

iBeacon Reality Check _ Essential Considerations for an iBeacon Deployment

Rotterdam World ICT

Bringing Quality Design Systems to Life with Storybook & Applitools

Timesheet @ InsideTrack Rome #sitROME

Biz Talk Server Certification

Agile BDD

Too Long; Didn’t Watch! Extracting Relevant Fragments from Software Developme...

New World Code Monkeys

Automate Behavior-driven Development (DrupalCon Portland 2022)

Mehr von Fabio Biondi

Introduction to E2E in CypressFabio Biondi

Create your React 18 / TS bundle using esbuildFabio Biondi

Create Web Components using Google LitFabio Biondi

Redux Toolkit & RTK Query in TypeScript: tips&tricksFabio Biondi

React Typescript for beginners: Translator app with Microsoft cognitive servicesFabio Biondi

RXJS Best (& Bad) Practices for Angular DevelopersFabio Biondi

Introduction for Master Class "Amazing Reactive Forms"Fabio Biondi

Data architectures in Angular & NGRX IntroductionFabio Biondi

RxJS & Angular Reactive Forms @ Codemotion 2019Fabio Biondi

Angular & RXJS: examples and use casesFabio Biondi

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

Introduction to Redux (for Angular and React devs)Fabio Biondi

Angular Best Practices @ Firenze 19 feb 2018Fabio Biondi

React: JSX and Top Level APIFabio Biondi

Intro evento: evolvere un applicazione Angular con Rxjs e ReduxFabio Biondi

Single Page Applications in Angular (italiano)Fabio Biondi

Angular 2 - Core ConceptsFabio Biondi

Mehr von Fabio Biondi (17)

Introduction to E2E in Cypress

Create your React 18 / TS bundle using esbuild

Create Web Components using Google Lit

Redux Toolkit & RTK Query in TypeScript: tips&tricks

React Typescript for beginners: Translator app with Microsoft cognitive services

RXJS Best (& Bad) Practices for Angular Developers

Introduction for Master Class "Amazing Reactive Forms"

Data architectures in Angular & NGRX Introduction

RxJS & Angular Reactive Forms @ Codemotion 2019

Angular & RXJS: examples and use cases

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6

Introduction to Redux (for Angular and React devs)

Angular Best Practices @ Firenze 19 feb 2018

React: JSX and Top Level API

Intro evento: evolvere un applicazione Angular con Rxjs e Redux

Single Page Applications in Angular (italiano)

Angular 2 - Core Concepts

Kürzlich hochgeladen

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Scaling API-first – The story of a global engineering organizationRadu Cotescu

GenCyber Cyber Security Day PresentationMichael W. Hawkins

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge

🐬 The future of MySQL is Postgres 🐘RTylerCroy

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi

Slack Application Development 101 Slidespraypatel2

08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

A Domino Admins Adventures (Engage 2024)Gabriella Davis

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science

Kürzlich hochgeladen (20)

How to Troubleshoot Apps for the Modern Connected Worker

The Codex of Business Writing Software for Real-World Solutions 2.pptx

Scaling API-first – The story of a global engineering organization

GenCyber Cyber Security Day Presentation

Salesforce Community Group Quito, Salesforce 101

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Driving Behavioral Change for Information Management through Data-Driven Gree...

🐬 The future of MySQL is Postgres 🐘

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams

Slack Application Development 101 Slides

08448380779 Call Girls In Friends Colony Women Seeking Men

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service

A Domino Admins Adventures (Engage 2024)

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Axa Assurance Maroc - Insurer Innovation Award 2024

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx

React - Component Based Approach

1. fabiobiondi.io REACTTYPESCRIPT 2022 COMPONENT BASED APPROACH

2. fabiobiondi.io Formazione front-end Speaker & Content Creator Community Founder Google Developer Expert (Angular) Microsoft MVP Twitch Partner fabiobiondi.dev

3. fabiobiondi.io .com/c/FabioBiondi .tv/fabio_biondi PARTNER

4. fabiobiondi.io HOW TO PASS PROPS BETWEEN COMPONENTS

5. fabiobiondi.io Props Stateful Component Stateless Component

6. fabiobiondi.io Props State & side effects here! Stateless Component

7. fabiobiondi.io C C C C C Props Callback State & side effects here! C C Props

8. fabiobiondi.io A COMPONENT HANDLE A PART OF THE VIEW SEPARATION OF CONCERNS SEMANTIC HTML REUSABLE COMPOSABLE TESTABLE

9. fabiobiondi.io COMPONENTS ARE THE BUILDING BLOCKS OF YOUR SPA

10. fabiobiondi.io <BookingPage> <NavBar>

11. fabiobiondi.io <Search> <SearchList> <Map> <Services> <BookingPage>

12. fabiobiondi.io <Search> <SearchList>

13. fabiobiondi.io

14. fabiobiondi.io <SearchList> <BookingPage>

15. fabiobiondi.io <SearchList> <SearchListItem> <SearchList> <SearchListItem>

16. fabiobiondi.io .com/c/FabioBiondi .tv/fabio_biondi PARTNER