SlideShare a Scribd company logo
React/Redux Workshop
Sebastián Alarcón - Web UI Developer - johan.alarcon@globant.com
Intro
● Theoretical and practical workshop
● We’re going to talk about React, Router and Redux
● There is no definitive knowledge
● We’re going to have a practical section after each theoric section
What you can expect from the Workshop
● Learn the most you can
● Code whatever you learned
● Get motivated to learn more
● Get interested in UI Development and new technologies
What I expect from you
● Respect
● Vibrate or silent mode to your phone
● You can pick up your phone but, please, leave the room.
● If you feel that you don’t understand something write down your
questions and ask once each theoric part finishes
● You have a laptop and Node/npm installed
● Have fun!
Globant development week / React Redux Rorkshop
Let’s talk about React!
What is React?
So… Why React?
Virtual DOM
● Create lightweight description of UI components
● Representation of a UI is kept in memory and synced with the “real”
DOM
● Diff between states
● Compute minimal set of changes to apply to the DOM
● Different to Shadow DOM!
Globant development week / React Redux Rorkshop
Globant development week / React Redux Rorkshop
Globant development week / React Redux Rorkshop
Globant development week / React Redux Rorkshop
Virtual DOM - Summary
1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you
updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the
real DOM.
JSX
class HelloMessage extends React.Component
{
render() {
return (
<div>
Hello World
</div>
);
}
}
ReactDOM.render(
<HelloMessage />,
mountNode
);
This is an optional HTML markup
and processor translates to plain JS
Globant development week / React Redux Rorkshop
State and Props A Property is:
● Attribute
● Quality
● Characteristic
In React we called them props
and we can access to them using
this.props
First Props!
State and Props
We have two useful objects:
● defaultProps
● propTypes
The component props can be defined by itself or can be passed by its parent
For data that is going to change, we
have to use state (dynamic data!)
1. Is it passed in from a parent via
props?
If so, it probably isn't state
2. Does it remain unchanged over
time
If so, it probably isn't state
State and Props
Now the State!
State and Props
Some useful things here:
● getInitialState
● setState(data, callback)
● User inputs
● Event handlers
Lifecycle
Lifecycle - Mounting
Lifecycle - Updating - State changed
Lifecycle - Updating - Props changed
Lifecycle - Unmounting
Globant development week / React Redux Rorkshop
What is coming? Routing and
Redux...
But first… create-react-app
create-react-app
Is a tool built by developers at Facebook to help you build React applications. It
saves you from time-consuming setup and configuration. You simply run one
command and create react app sets up the tools you need to start your React
project.
create-react-app
You must have:
● npm +5
And then run:
npx create-react-app my-app
Configuring git into our new app
● cd my app
● git init
● git remote add origin
https://github.com/Sebas-Alarcon-WebUI/react-redux-workshop.git
Now we’re going to Route!
How to implement it
React Router
This is the Declarative routing for React
We have to install:
npm install react-router react-router-dom
Globant development week / React Redux Rorkshop
Let’s have some
rest.
10 min break!
And finally… Redux!
What is Redux?
Why Redux?
Redux
The basic stuff to take into account
● ​Actions​
● ​Reducers​
● Store​
● Data Flow​
Actions
● Payloads of information
● The only source of information for the store
● Send them using store.dispatch().
● They describe WHAT happens
Reducers
Specify HOW the application's state
changes in response to actions sent to the
store.
Store
The Store is the object that brings
Actions and Reducers together.
Data Flow
Redux architecture revolves around a strict unidirectional data flow.
The lifecycle is:
1. You call store.dispatch(action).
2. The Redux store calls the reducer function you gave it.
3. The root reducer may combine the output of multiple reducers into a single
state tree.
4. The Redux store saves the complete state tree returned by the root reducer.
Installation
We have to install:
npm install redux react-redux redux-devtools-extension
redux-thunk
Globant development week / React Redux Rorkshop
Thanks!

More Related Content

What's hot (10)

Functional programing jargon
Functional programing jargonFunctional programing jargon
Functional programing jargon
Remo Jansen
 
Making react more like rails
Making react more like railsMaking react more like rails
Making react more like rails
Luke Morton
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
Garrett Welson
 
Introduction to Higher Order Functions in Scala
Introduction to Higher Order Functions in Scala	Introduction to Higher Order Functions in Scala
Introduction to Higher Order Functions in Scala
Knoldus Inc.
 
Akka - young fighter course
Akka - young fighter courseAkka - young fighter course
Akka - young fighter course
Dmitriy Gutman
 
Javascript
JavascriptJavascript
Javascript
Vibhor Grover
 
ReactJS Code Impact
ReactJS Code ImpactReactJS Code Impact
ReactJS Code Impact
Raymond McDermott
 
Advanced JavaScript - Internship Presentation - Week6
Advanced JavaScript - Internship Presentation - Week6Advanced JavaScript - Internship Presentation - Week6
Advanced JavaScript - Internship Presentation - Week6
Devang Garach
 
Tech Talk #4 : Functional Reactive Programming - Đặng Thái Sơn
Tech Talk #4 : Functional Reactive Programming - Đặng Thái SơnTech Talk #4 : Functional Reactive Programming - Đặng Thái Sơn
Tech Talk #4 : Functional Reactive Programming - Đặng Thái Sơn
Nexus FrontierTech
 
From Imperative to Functional Programming (for Absolute Beginners)
From Imperative to Functional Programming (for Absolute Beginners)From Imperative to Functional Programming (for Absolute Beginners)
From Imperative to Functional Programming (for Absolute Beginners)
Alex Bunardzic
 
Functional programing jargon
Functional programing jargonFunctional programing jargon
Functional programing jargon
Remo Jansen
 
Making react more like rails
Making react more like railsMaking react more like rails
Making react more like rails
Luke Morton
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
Garrett Welson
 
Introduction to Higher Order Functions in Scala
Introduction to Higher Order Functions in Scala	Introduction to Higher Order Functions in Scala
Introduction to Higher Order Functions in Scala
Knoldus Inc.
 
Akka - young fighter course
Akka - young fighter courseAkka - young fighter course
Akka - young fighter course
Dmitriy Gutman
 
Advanced JavaScript - Internship Presentation - Week6
Advanced JavaScript - Internship Presentation - Week6Advanced JavaScript - Internship Presentation - Week6
Advanced JavaScript - Internship Presentation - Week6
Devang Garach
 
Tech Talk #4 : Functional Reactive Programming - Đặng Thái Sơn
Tech Talk #4 : Functional Reactive Programming - Đặng Thái SơnTech Talk #4 : Functional Reactive Programming - Đặng Thái Sơn
Tech Talk #4 : Functional Reactive Programming - Đặng Thái Sơn
Nexus FrontierTech
 
From Imperative to Functional Programming (for Absolute Beginners)
From Imperative to Functional Programming (for Absolute Beginners)From Imperative to Functional Programming (for Absolute Beginners)
From Imperative to Functional Programming (for Absolute Beginners)
Alex Bunardzic
 

Similar to Globant development week / React Redux Rorkshop (20)

Redux workshop
Redux workshopRedux workshop
Redux workshop
Imran Sayed
 
React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil Memon
RahilMemon5
 
React workshop
React workshopReact workshop
React workshop
Imran Sayed
 
Workshop 22: React-Redux Middleware
Workshop 22: React-Redux MiddlewareWorkshop 22: React-Redux Middleware
Workshop 22: React-Redux Middleware
Visual Engineering
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
Visual Engineering
 
an Introduction to Redux
an Introduction to Reduxan Introduction to Redux
an Introduction to Redux
Amin Ashtiani
 
Introduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with ClojurescriptIntroduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with Clojurescript
John Stevenson
 
Fundamental concepts of react js
Fundamental concepts of react jsFundamental concepts of react js
Fundamental concepts of react js
StephieJohn
 
React Interview Questions for Noobs or Juniors
React Interview Questions for Noobs or JuniorsReact Interview Questions for Noobs or Juniors
React Interview Questions for Noobs or Juniors
Your Study_Buddy
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
React Interview Question PDF By ScholarHat
React Interview Question PDF By ScholarHatReact Interview Question PDF By ScholarHat
React Interview Question PDF By ScholarHat
Scholarhat
 
React gsg presentation with ryan jung &amp; elias malik
React   gsg presentation with ryan jung &amp; elias malikReact   gsg presentation with ryan jung &amp; elias malik
React gsg presentation with ryan jung &amp; elias malik
Lama K Banna
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
React Workshop: Core concepts of react
React Workshop: Core concepts of reactReact Workshop: Core concepts of react
React Workshop: Core concepts of react
Imran Sayed
 
The virtual DOM and how react uses it internally
The virtual DOM and how react uses it internallyThe virtual DOM and how react uses it internally
The virtual DOM and how react uses it internally
Clóvis Neto
 
React - The JavaScript Library for User Interfaces
React - The JavaScript Library for User InterfacesReact - The JavaScript Library for User Interfaces
React - The JavaScript Library for User Interfaces
Jumping Bean
 
Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular Developer
Fabrit Global
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
Chiew Carol
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
Thomas Daly
 
React js Rahil Memon
React js Rahil MemonReact js Rahil Memon
React js Rahil Memon
RahilMemon5
 
Workshop 22: React-Redux Middleware
Workshop 22: React-Redux MiddlewareWorkshop 22: React-Redux Middleware
Workshop 22: React-Redux Middleware
Visual Engineering
 
Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
Visual Engineering
 
an Introduction to Redux
an Introduction to Reduxan Introduction to Redux
an Introduction to Redux
Amin Ashtiani
 
Introduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with ClojurescriptIntroduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with Clojurescript
John Stevenson
 
Fundamental concepts of react js
Fundamental concepts of react jsFundamental concepts of react js
Fundamental concepts of react js
StephieJohn
 
React Interview Questions for Noobs or Juniors
React Interview Questions for Noobs or JuniorsReact Interview Questions for Noobs or Juniors
React Interview Questions for Noobs or Juniors
Your Study_Buddy
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
React Interview Question PDF By ScholarHat
React Interview Question PDF By ScholarHatReact Interview Question PDF By ScholarHat
React Interview Question PDF By ScholarHat
Scholarhat
 
React gsg presentation with ryan jung &amp; elias malik
React   gsg presentation with ryan jung &amp; elias malikReact   gsg presentation with ryan jung &amp; elias malik
React gsg presentation with ryan jung &amp; elias malik
Lama K Banna
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
React Workshop: Core concepts of react
React Workshop: Core concepts of reactReact Workshop: Core concepts of react
React Workshop: Core concepts of react
Imran Sayed
 
The virtual DOM and how react uses it internally
The virtual DOM and how react uses it internallyThe virtual DOM and how react uses it internally
The virtual DOM and how react uses it internally
Clóvis Neto
 
React - The JavaScript Library for User Interfaces
React - The JavaScript Library for User InterfacesReact - The JavaScript Library for User Interfaces
React - The JavaScript Library for User Interfaces
Jumping Bean
 
Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular Developer
Fabrit Global
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
Chiew Carol
 
O365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - MaterialO365 Developer Bootcamp NJ 2018 - Material
O365 Developer Bootcamp NJ 2018 - Material
Thomas Daly
 

More from Globant (20)

Webinar MLOps: When AA gets serious.
Webinar MLOps: When AA gets serious.Webinar MLOps: When AA gets serious.
Webinar MLOps: When AA gets serious.
Globant
 
Google Cloud Spanner y NewSQL
Google Cloud Spanner y NewSQLGoogle Cloud Spanner y NewSQL
Google Cloud Spanner y NewSQL
Globant
 
Eventos Asíncronos como estrategia virtual
Eventos Asíncronos como estrategia virtualEventos Asíncronos como estrategia virtual
Eventos Asíncronos como estrategia virtual
Globant
 
Cultura y valores 4.0 para líderes 4.0
Cultura y valores 4.0 para líderes 4.0Cultura y valores 4.0 para líderes 4.0
Cultura y valores 4.0 para líderes 4.0
Globant
 
Tech Insiders Salesforce: SFDX e Integración Continua
Tech Insiders Salesforce: SFDX e Integración ContinuaTech Insiders Salesforce: SFDX e Integración Continua
Tech Insiders Salesforce: SFDX e Integración Continua
Globant
 
Como impulsar tu carrera Salesforce
Como impulsar tu carrera SalesforceComo impulsar tu carrera Salesforce
Como impulsar tu carrera Salesforce
Globant
 
3D Programming Basics: WebGL
3D Programming Basics: WebGL3D Programming Basics: WebGL
3D Programming Basics: WebGL
Globant
 
Converge augmented report
Converge augmented reportConverge augmented report
Converge augmented report
Globant
 
Sistema de recomendación entiempo real usando Delta Lake
Sistema de recomendación entiempo real usando Delta LakeSistema de recomendación entiempo real usando Delta Lake
Sistema de recomendación entiempo real usando Delta Lake
Globant
 
Kubeflow: Machine Learning en Cloud para todos
Kubeflow: Machine Learning en Cloud para todosKubeflow: Machine Learning en Cloud para todos
Kubeflow: Machine Learning en Cloud para todos
Globant
 
Orquestando Pipelines de Datosen AWS con Step Function y AWS Glue
Orquestando Pipelines de Datosen AWS con Step Function y AWS GlueOrquestando Pipelines de Datosen AWS con Step Function y AWS Glue
Orquestando Pipelines de Datosen AWS con Step Function y AWS Glue
Globant
 
Apache Beam: Lote portátil y procesamiento de transmisión
Apache Beam: Lote portátil y procesamiento de transmisiónApache Beam: Lote portátil y procesamiento de transmisión
Apache Beam: Lote portátil y procesamiento de transmisión
Globant
 
Navegando el desafío de transformación digital de los servicios financieros
Navegando el desafío de transformación digital de los servicios financierosNavegando el desafío de transformación digital de los servicios financieros
Navegando el desafío de transformación digital de los servicios financieros
Globant
 
Converge 2020
Converge 2020 Converge 2020
Converge 2020
Globant
 
Converge 2020
Converge 2020Converge 2020
Converge 2020
Globant
 
Tendencias de tecnología para el recién egresado
Tendencias de tecnología para el recién egresadoTendencias de tecnología para el recién egresado
Tendencias de tecnología para el recién egresado
Globant
 
SRE: ¿Qué es y cómo gestionar el Toil?
SRE: ¿Qué es y cómo gestionar el Toil?SRE: ¿Qué es y cómo gestionar el Toil?
SRE: ¿Qué es y cómo gestionar el Toil?
Globant
 
Monitoreo en tiempo real para la mejora continua de una aplicación
Monitoreo en tiempo real para la mejora continua de una aplicaciónMonitoreo en tiempo real para la mejora continua de una aplicación
Monitoreo en tiempo real para la mejora continua de una aplicación
Globant
 
¿Cómo automatizar pruebas de infraestructura y no morir en el intento?
¿Cómo automatizar pruebas de infraestructura y no morir en el intento?¿Cómo automatizar pruebas de infraestructura y no morir en el intento?
¿Cómo automatizar pruebas de infraestructura y no morir en el intento?
Globant
 
Automatización en AWS con Chatbot Serverless (Amazon Lex)
Automatización en AWS con Chatbot Serverless (Amazon Lex)Automatización en AWS con Chatbot Serverless (Amazon Lex)
Automatización en AWS con Chatbot Serverless (Amazon Lex)
Globant
 
Webinar MLOps: When AA gets serious.
Webinar MLOps: When AA gets serious.Webinar MLOps: When AA gets serious.
Webinar MLOps: When AA gets serious.
Globant
 
Google Cloud Spanner y NewSQL
Google Cloud Spanner y NewSQLGoogle Cloud Spanner y NewSQL
Google Cloud Spanner y NewSQL
Globant
 
Eventos Asíncronos como estrategia virtual
Eventos Asíncronos como estrategia virtualEventos Asíncronos como estrategia virtual
Eventos Asíncronos como estrategia virtual
Globant
 
Cultura y valores 4.0 para líderes 4.0
Cultura y valores 4.0 para líderes 4.0Cultura y valores 4.0 para líderes 4.0
Cultura y valores 4.0 para líderes 4.0
Globant
 
Tech Insiders Salesforce: SFDX e Integración Continua
Tech Insiders Salesforce: SFDX e Integración ContinuaTech Insiders Salesforce: SFDX e Integración Continua
Tech Insiders Salesforce: SFDX e Integración Continua
Globant
 
Como impulsar tu carrera Salesforce
Como impulsar tu carrera SalesforceComo impulsar tu carrera Salesforce
Como impulsar tu carrera Salesforce
Globant
 
3D Programming Basics: WebGL
3D Programming Basics: WebGL3D Programming Basics: WebGL
3D Programming Basics: WebGL
Globant
 
Converge augmented report
Converge augmented reportConverge augmented report
Converge augmented report
Globant
 
Sistema de recomendación entiempo real usando Delta Lake
Sistema de recomendación entiempo real usando Delta LakeSistema de recomendación entiempo real usando Delta Lake
Sistema de recomendación entiempo real usando Delta Lake
Globant
 
Kubeflow: Machine Learning en Cloud para todos
Kubeflow: Machine Learning en Cloud para todosKubeflow: Machine Learning en Cloud para todos
Kubeflow: Machine Learning en Cloud para todos
Globant
 
Orquestando Pipelines de Datosen AWS con Step Function y AWS Glue
Orquestando Pipelines de Datosen AWS con Step Function y AWS GlueOrquestando Pipelines de Datosen AWS con Step Function y AWS Glue
Orquestando Pipelines de Datosen AWS con Step Function y AWS Glue
Globant
 
Apache Beam: Lote portátil y procesamiento de transmisión
Apache Beam: Lote portátil y procesamiento de transmisiónApache Beam: Lote portátil y procesamiento de transmisión
Apache Beam: Lote portátil y procesamiento de transmisión
Globant
 
Navegando el desafío de transformación digital de los servicios financieros
Navegando el desafío de transformación digital de los servicios financierosNavegando el desafío de transformación digital de los servicios financieros
Navegando el desafío de transformación digital de los servicios financieros
Globant
 
Converge 2020
Converge 2020 Converge 2020
Converge 2020
Globant
 
Converge 2020
Converge 2020Converge 2020
Converge 2020
Globant
 
Tendencias de tecnología para el recién egresado
Tendencias de tecnología para el recién egresadoTendencias de tecnología para el recién egresado
Tendencias de tecnología para el recién egresado
Globant
 
SRE: ¿Qué es y cómo gestionar el Toil?
SRE: ¿Qué es y cómo gestionar el Toil?SRE: ¿Qué es y cómo gestionar el Toil?
SRE: ¿Qué es y cómo gestionar el Toil?
Globant
 
Monitoreo en tiempo real para la mejora continua de una aplicación
Monitoreo en tiempo real para la mejora continua de una aplicaciónMonitoreo en tiempo real para la mejora continua de una aplicación
Monitoreo en tiempo real para la mejora continua de una aplicación
Globant
 
¿Cómo automatizar pruebas de infraestructura y no morir en el intento?
¿Cómo automatizar pruebas de infraestructura y no morir en el intento?¿Cómo automatizar pruebas de infraestructura y no morir en el intento?
¿Cómo automatizar pruebas de infraestructura y no morir en el intento?
Globant
 
Automatización en AWS con Chatbot Serverless (Amazon Lex)
Automatización en AWS con Chatbot Serverless (Amazon Lex)Automatización en AWS con Chatbot Serverless (Amazon Lex)
Automatización en AWS con Chatbot Serverless (Amazon Lex)
Globant
 

Recently uploaded (20)

Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 
Electronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploitElectronic_Mail_Attacks-1-35.pdf by xploit
Electronic_Mail_Attacks-1-35.pdf by xploit
niftliyevhuseyn
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
SOFTTECHHUB
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsTechnology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data Analytics
InData Labs
 
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveDesigning Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep Dive
ScyllaDB
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessGenerative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in Business
Dr. Tathagat Varma
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionDrupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy Consumption
Exove
 

Globant development week / React Redux Rorkshop

  • 2. Intro ● Theoretical and practical workshop ● We’re going to talk about React, Router and Redux ● There is no definitive knowledge ● We’re going to have a practical section after each theoric section
  • 3. What you can expect from the Workshop ● Learn the most you can ● Code whatever you learned ● Get motivated to learn more ● Get interested in UI Development and new technologies
  • 4. What I expect from you ● Respect ● Vibrate or silent mode to your phone ● You can pick up your phone but, please, leave the room. ● If you feel that you don’t understand something write down your questions and ask once each theoric part finishes ● You have a laptop and Node/npm installed ● Have fun!
  • 9. Virtual DOM ● Create lightweight description of UI components ● Representation of a UI is kept in memory and synced with the “real” DOM ● Diff between states ● Compute minimal set of changes to apply to the DOM ● Different to Shadow DOM!
  • 14. Virtual DOM - Summary 1. The entire virtual DOM gets updated. 2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed. 3. The changed objects, and the changed objects only, get updated on the real DOM.
  • 15. JSX class HelloMessage extends React.Component { render() { return ( <div> Hello World </div> ); } } ReactDOM.render( <HelloMessage />, mountNode ); This is an optional HTML markup and processor translates to plain JS
  • 17. State and Props A Property is: ● Attribute ● Quality ● Characteristic In React we called them props and we can access to them using this.props First Props!
  • 18. State and Props We have two useful objects: ● defaultProps ● propTypes The component props can be defined by itself or can be passed by its parent
  • 19. For data that is going to change, we have to use state (dynamic data!) 1. Is it passed in from a parent via props? If so, it probably isn't state 2. Does it remain unchanged over time If so, it probably isn't state State and Props Now the State!
  • 20. State and Props Some useful things here: ● getInitialState ● setState(data, callback) ● User inputs ● Event handlers
  • 23. Lifecycle - Updating - State changed
  • 24. Lifecycle - Updating - Props changed
  • 27. What is coming? Routing and Redux...
  • 29. create-react-app Is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project.
  • 30. create-react-app You must have: ● npm +5 And then run: npx create-react-app my-app
  • 31. Configuring git into our new app ● cd my app ● git init ● git remote add origin https://github.com/Sebas-Alarcon-WebUI/react-redux-workshop.git
  • 32. Now we’re going to Route!
  • 34. React Router This is the Declarative routing for React We have to install: npm install react-router react-router-dom
  • 40. Redux The basic stuff to take into account ● ​Actions​ ● ​Reducers​ ● Store​ ● Data Flow​
  • 41. Actions ● Payloads of information ● The only source of information for the store ● Send them using store.dispatch(). ● They describe WHAT happens
  • 42. Reducers Specify HOW the application's state changes in response to actions sent to the store.
  • 43. Store The Store is the object that brings Actions and Reducers together.
  • 44. Data Flow Redux architecture revolves around a strict unidirectional data flow. The lifecycle is: 1. You call store.dispatch(action). 2. The Redux store calls the reducer function you gave it. 3. The root reducer may combine the output of multiple reducers into a single state tree. 4. The Redux store saves the complete state tree returned by the root reducer.
  • 45. Installation We have to install: npm install redux react-redux redux-devtools-extension redux-thunk