Submit Search
Upload
React advance
•
Download as PPTX, PDF
•
1 like
•
180 views
V
Vivek Tikar
Follow
Talentica Software JavaScript Meetup, PPT for 25th May session on advance react
Read less
Read more
Education
Report
Share
Report
Share
1 of 49
Download now
Recommended
AEM and Sling
AEM and Sling
Lo Ki
Advanced angular
Advanced angular
Sumit Kumar Rakshit
React native
React native
Mohammed El Rafie Tarabay
Sling Models Using Sightly and JSP by Deepak Khetawat
Sling Models Using Sightly and JSP by Deepak Khetawat
AEM HUB
Introduction to React Native Workshop
Introduction to React Native Workshop
Ignacio Martín
Apigee deploy grunt plugin.1.0
Apigee deploy grunt plugin.1.0
Diego Zuluaga
Angular interview questions
Angular interview questions
Goa App
Scaling your Android App With Modularization
Scaling your Android App With Modularization
Ben Schwab
Recommended
AEM and Sling
AEM and Sling
Lo Ki
Advanced angular
Advanced angular
Sumit Kumar Rakshit
React native
React native
Mohammed El Rafie Tarabay
Sling Models Using Sightly and JSP by Deepak Khetawat
Sling Models Using Sightly and JSP by Deepak Khetawat
AEM HUB
Introduction to React Native Workshop
Introduction to React Native Workshop
Ignacio Martín
Apigee deploy grunt plugin.1.0
Apigee deploy grunt plugin.1.0
Diego Zuluaga
Angular interview questions
Angular interview questions
Goa App
Scaling your Android App With Modularization
Scaling your Android App With Modularization
Ben Schwab
Mastering the Sling Rewriter
Mastering the Sling Rewriter
Justin Edelson
I Love APIs 2015: Continuous Integration the Virtuous Cycle
I Love APIs 2015: Continuous Integration the Virtuous Cycle
Apigee | Google Cloud
What's Coming in Java EE 8
What's Coming in Java EE 8
PT.JUG
Engines Lightning Talk
Engines Lightning Talk
Dan Pickett
Android and the Seven Dwarfs from Devox'15
Android and the Seven Dwarfs from Devox'15
Murat Yener
Building Large Scale PHP Web Applications with Laravel 4
Building Large Scale PHP Web Applications with Laravel 4
Darwin Biler
Liberated APIs in ClojureLand - Paris Clojure User Group
Liberated APIs in ClojureLand - Paris Clojure User Group
Gaylord Mazelier
Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted Neward
JAX London
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
Edureka!
Making Sense of Hypermedia APIs – Hype or Reality?
Making Sense of Hypermedia APIs – Hype or Reality?
Akana
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
Introduction to angular 2
Introduction to angular 2
Dor Moshe
IoC with PHP
IoC with PHP
Chris Weldon
PuppetConf 2016: Writing Custom Types to Manage Web-Based Applications – Tim ...
PuppetConf 2016: Writing Custom Types to Manage Web-Based Applications – Tim ...
Puppet
ChtiJUG - Introduction à Angular2
ChtiJUG - Introduction à Angular2
Demey Emmanuel
IPaste SDK v.1.0
IPaste SDK v.1.0
xrebyc
Final ppt
Final ppt
Rahul Dwivedi
Best practices iOS meetup - pmd
Best practices iOS meetup - pmd
Suyash Gupta
Intro to React
Intro to React
Justin Reock
Sst hackathon express
Sst hackathon express
Aeshan Wijetunge
React a11y-csun
React a11y-csun
Poonam Tathavadkar
Oracle WebLogic Server 12.2.1 Do More with Less
Oracle WebLogic Server 12.2.1 Do More with Less
Ed Burns
More Related Content
What's hot
Mastering the Sling Rewriter
Mastering the Sling Rewriter
Justin Edelson
I Love APIs 2015: Continuous Integration the Virtuous Cycle
I Love APIs 2015: Continuous Integration the Virtuous Cycle
Apigee | Google Cloud
What's Coming in Java EE 8
What's Coming in Java EE 8
PT.JUG
Engines Lightning Talk
Engines Lightning Talk
Dan Pickett
Android and the Seven Dwarfs from Devox'15
Android and the Seven Dwarfs from Devox'15
Murat Yener
Building Large Scale PHP Web Applications with Laravel 4
Building Large Scale PHP Web Applications with Laravel 4
Darwin Biler
Liberated APIs in ClojureLand - Paris Clojure User Group
Liberated APIs in ClojureLand - Paris Clojure User Group
Gaylord Mazelier
Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted Neward
JAX London
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
Edureka!
Making Sense of Hypermedia APIs – Hype or Reality?
Making Sense of Hypermedia APIs – Hype or Reality?
Akana
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
Introduction to angular 2
Introduction to angular 2
Dor Moshe
IoC with PHP
IoC with PHP
Chris Weldon
PuppetConf 2016: Writing Custom Types to Manage Web-Based Applications – Tim ...
PuppetConf 2016: Writing Custom Types to Manage Web-Based Applications – Tim ...
Puppet
ChtiJUG - Introduction à Angular2
ChtiJUG - Introduction à Angular2
Demey Emmanuel
IPaste SDK v.1.0
IPaste SDK v.1.0
xrebyc
What's hot
(16)
Mastering the Sling Rewriter
Mastering the Sling Rewriter
I Love APIs 2015: Continuous Integration the Virtuous Cycle
I Love APIs 2015: Continuous Integration the Virtuous Cycle
What's Coming in Java EE 8
What's Coming in Java EE 8
Engines Lightning Talk
Engines Lightning Talk
Android and the Seven Dwarfs from Devox'15
Android and the Seven Dwarfs from Devox'15
Building Large Scale PHP Web Applications with Laravel 4
Building Large Scale PHP Web Applications with Laravel 4
Liberated APIs in ClojureLand - Paris Clojure User Group
Liberated APIs in ClojureLand - Paris Clojure User Group
Android | Busy Java Developers Guide to Android: UI | Ted Neward
Android | Busy Java Developers Guide to Android: UI | Ted Neward
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
React Redux Tutorial | Redux Tutorial for Beginners | React Redux Training | ...
Making Sense of Hypermedia APIs – Hype or Reality?
Making Sense of Hypermedia APIs – Hype or Reality?
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
Introduction to angular 2
Introduction to angular 2
IoC with PHP
IoC with PHP
PuppetConf 2016: Writing Custom Types to Manage Web-Based Applications – Tim ...
PuppetConf 2016: Writing Custom Types to Manage Web-Based Applications – Tim ...
ChtiJUG - Introduction à Angular2
ChtiJUG - Introduction à Angular2
IPaste SDK v.1.0
IPaste SDK v.1.0
Similar to React advance
Final ppt
Final ppt
Rahul Dwivedi
Best practices iOS meetup - pmd
Best practices iOS meetup - pmd
Suyash Gupta
Intro to React
Intro to React
Justin Reock
Sst hackathon express
Sst hackathon express
Aeshan Wijetunge
React a11y-csun
React a11y-csun
Poonam Tathavadkar
Oracle WebLogic Server 12.2.1 Do More with Less
Oracle WebLogic Server 12.2.1 Do More with Less
Ed Burns
A tour of React Native
A tour of React Native
Tadeu Zagallo
Node.js Workshop
Node.js Workshop
Quhan Arunasalam
Oracle REST Data Services
Oracle REST Data Services
Chris Muir
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
Chiew Carol
Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019
Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019
Vivek Tikar
Introduction to React Native
Introduction to React Native
Amazon Web Services
Introduction to React Native
Introduction to React Native
Amazon Web Services
what is context API and How it works in React.pptx
what is context API and How it works in React.pptx
BOSC Tech Labs
Introduction to React Native - Nader Dabit
Introduction to React Native - Nader Dabit
Amazon Web Services
Functional programming, TypeScript and RXJS
Functional programming, TypeScript and RXJS
Vivek Tikar
React Interview Questions and Answers | React Tutorial | React Redux Online T...
React Interview Questions and Answers | React Tutorial | React Redux Online T...
Edureka!
Document_format_for_OData_In_A_Nutshell.pdf
Document_format_for_OData_In_A_Nutshell.pdf
davidjpeace
Sf bay area Kubernetes meetup dec8 2016 - deployment models
Sf bay area Kubernetes meetup dec8 2016 - deployment models
Peter Ss
NTTs Journey with Openstack-final
NTTs Journey with Openstack-final
shintaro mizuno
Similar to React advance
(20)
Final ppt
Final ppt
Best practices iOS meetup - pmd
Best practices iOS meetup - pmd
Intro to React
Intro to React
Sst hackathon express
Sst hackathon express
React a11y-csun
React a11y-csun
Oracle WebLogic Server 12.2.1 Do More with Less
Oracle WebLogic Server 12.2.1 Do More with Less
A tour of React Native
A tour of React Native
Node.js Workshop
Node.js Workshop
Oracle REST Data Services
Oracle REST Data Services
React Native +Redux + ES6 (Updated)
React Native +Redux + ES6 (Updated)
Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019
Redux JavaScript Meetup - Talentica, Saturday, July 6, 2019
Introduction to React Native
Introduction to React Native
Introduction to React Native
Introduction to React Native
what is context API and How it works in React.pptx
what is context API and How it works in React.pptx
Introduction to React Native - Nader Dabit
Introduction to React Native - Nader Dabit
Functional programming, TypeScript and RXJS
Functional programming, TypeScript and RXJS
React Interview Questions and Answers | React Tutorial | React Redux Online T...
React Interview Questions and Answers | React Tutorial | React Redux Online T...
Document_format_for_OData_In_A_Nutshell.pdf
Document_format_for_OData_In_A_Nutshell.pdf
Sf bay area Kubernetes meetup dec8 2016 - deployment models
Sf bay area Kubernetes meetup dec8 2016 - deployment models
NTTs Journey with Openstack-final
NTTs Journey with Openstack-final
Recently uploaded
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
eniolaolutunde
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
Celine George
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdf
adityarao40181
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized Group
JonathanParaisoCruz
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
Sarwono Sutikno, Dr.Eng.,CISA,CISSP,CISM,CSX-F
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptx
JiesonDelaCerna
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
UnboundStockton
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
thorishapillay1
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
Sabitha Banu
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
UjwalaBharambe
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
iammrhaywood
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...
jaredbarbolino94
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
Sayali Powar
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
Eyham Joco
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
CapitolTechU
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
Virag Sontakke
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
NirmalaLoungPoorunde1
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
YousafMalik24
Recently uploaded
(20)
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdf
MARGINALIZATION (Different learners in Marginalized Group
MARGINALIZATION (Different learners in Marginalized Group
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptx
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
Framing an Appropriate Research Question 6b9b26d93da94caf993c038d9efcdedb.pdf
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
Earth Day Presentation wow hello nice great
Earth Day Presentation wow hello nice great
React advance
1.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rights TALENTICA SOFTWARE React Adv.
2.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Agenda • List and Keys • Refs • Routing • Higher Order Components in React • Forms • Context API • React 16 Hooks
3.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Context Context provides a way to pass data through the component tree without having to pass props down manually at every level. Designed to share data that can be considered “global”. Using context, we can avoid passing props through all intermediate elements.
4.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Think before you use • It makes component reuse more difficult. • Alternatives : Passing the whole component along as a functional component. • Many other alternative patterns are available like RenderProps. It depends on the behaviour you want to implement.
5.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Context APIs • React exposes following APIs for using Context : – React.createContext : To Create a new context const MyContext = React.createContext(defaultValue); – Context.Provider : To pass the value further <MyContext.Provider value={/* some value */}>
6.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights APIs contd… • Class.contextType: To consumer the nearest context value. MyClass.contextType = MyContext; • Context.Consumer : Subscribe to context changes <MyContext.Consumer> {value => /* render something based on the context value */} </MyContext.Consumer>
7.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights List and Keys React DOM intricacies -: • ReactJS uses observable’s to find the modified components. Whenever setState() method is called on any component, ReactJS makes that component dirty and re-renders it. • Whenever setState() method is called, ReactJS creates the whole Virtual DOM from scratch. Creating a whole tree is very fast so it does not affect the performance. • At any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM.
8.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Significance of keys • A React component, when we boil it down to its rawest form (i.e. convert it from JSX), is just an object with a set of properties. These properties define its type, name, state, what props it has received, whether it has children, etc. • The React reconciler will compare the newly created objects with the current versions it has in the DOM. If any differences are detected between certain properties, it will redraw the components believing that it's the same object, but properties have changed.
9.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Where do Keys come into picture ? The reconciler will look at the key, and the component properties (in our simplified case, the content or children), and then look through its previous list of components to see if it matches any previous combinations.
10.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights [{ Type: "span", Key: "0", Children: "abhisar" }, { Type: "span", Key: "1", Children: "deepika" }, { Type: "span", Key: "2", Children: "abhishek" }] [{ Type: "span", Key: "0", // Expected 0 to match 'sumit' Children: "sumit" // IM DIFFERENT, REDRAW ME }, { Type: "span", Key: "1", // Expected 1 to match 'abhisar' Children: "abhisar" // IM DIFFERENT, REDRAW ME }, { Type: "span", Key: "2", // Expected 2 to match 'deepika' Children: "deepika" // IM DIFFERENT, REDRAW ME }, { Type: "span", Key: "3", // IM NEW Children: "abhishek" // DRAW ME }] Keys with index as value 1
11.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Can we prevent this ? We can prevent this. If we clearly define a key which is static, unique, and uniquely associated with the properties it is related to, React can acknowledge that it's the same component, even when it has changed its position. We can minimise DOM re-rendering from 4 to 1 (In this specific example). Using keys attribute.
12.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights [{ Type: "span", Key: “key-abhisar", Children: "abhisar" }, { Type: "span", Key: "key-deepika", Children: "deepika" }, { Type: "span", Key: “key-abhishek", Children: "abhishek" }] [{ Type: "span", Key: "key-sumit", // IM NEW Children: "sumit" // DRAW ME }, { Type: "span", Key: "key-abhisar", // Expected 'key-abhisar' to match 'abhisar' Children: "abhisar" // IM THE SAME, DONT REDRAW ME }, { Type: "span", Key: “key-deepika", // Expected 'key-deepika' to match 'deepika' Children: "deepika" // IM THE SAME, DONT REDRAW ME }, { Type: "span", Key: "key-abhishek", // Expected 'key-abhishek' to match 'abhishek' Children: "abhishek" // IM THE SAME, DONT REDRAW ME }] Keys with unique ids 1
13.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights REFS (INTRODUCTION) Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, we want to change the child of a component. Let’s say we want to change the value of an <input> element, but without using props or re-rendering the whole component.
14.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights REFS using CreateRef() -: • createRef() is a new API that shipped with React 16.3. We can create a ref by calling React.createRef() and attaching a React element to it using the ref attribute on the element. • The ref is created in the constructor and then attached to the input element when it renders. • We make use of current property in this.correspondingRefName to access the DOM node.
15.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Passing a callback function to a REF • React allows you to create a ref by passing a callback function to the ref attribute of a component. • The callback is used to store a reference to the DOM node in an instance property. • When we make use of callback, React will call the ref callback with the DOM node when the component mounts, when the component un-mounts, it will call it with null.
16.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights REF attribute as a string This is the old way of creating a ref and it will likely be removed in a future release because of some issues associated with it. • It requires that React keeps track of currently rendering component (since it can't guess this). This makes React a bit slower. • It is not composable, i.e. if a library puts a ref on the passed child, the user can't put another ref on it. Callback refs are perfectly composable.
17.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Routing in react
18.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Routes • The <Route/> component is one of the most important building blocks in the React Router package. It renders the appropriate user interface when the current location matches the route’s path. The path is a prop on the <Route/> component that describes the pathname that the route should match as shown in the example that follows • Adding “exact” attribute ensures that only the pathname that exactly matches the current location is rendered. • The <Route/> component provides three props that can be used to determine which component to render: • => component • => render • => children
19.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Route params… Component Prop The component prop defines the React element that will be returned by the Route when the path is matched. This React element is created from the provided component using React.createElement. Render Prop The render prop provides the ability for inline rendering and passing extra props to the element. This prop expects a function that returns a React element when the current location matches the route’s path. Children Prop The children prop is similar to the render prop since it always expects a function that returns a React element. The major difference is that the element defined by the child prop is returned for all paths irrespective of whether the current location matches the path or not.
20.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Switch (avoids rendering of multiple components) The react-router library also contains a <Switch/> component that is used to wrap multiple <Route/> components. The Switch component only picks the first matching route among all its children route.
21.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Link • The react-router package also contains a <Link/> component that is used to navigate the different parts of an application by way of hyperlinks. • It is similar to HTML’s anchor element but the main difference is that using the Link component does not reload the page but rather, changes the UI (i.e preserves the STATE).
22.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Nested routings • When the router’s path and location are successfully matched, a match object is created. This object contains information about the URL and the path. This information can be accessed as properties on the match object. • In order to successfully achieve nested routing, we shall use match.url for nested Links and match.path for nested Routes.
23.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Protected Routes • The rationale of having is a protected route is that when a user tries to access part of the application without logging in, they are redirected to the login page to sign into the application. • For this redirect to work as intended, the react-router package provides a <Redirect/> component to serve this purpose.
24.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Higher Order Components (HOCs) • A react component transforms some props into a UI. • An HOC transforms a component into another component. • Based on callbacks and higher-order functions • array.map(function(currentValue, index, arr), thisValue)
25.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Callbacks And Higher-Order Functions • Callbacks and HOF Demo
26.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Higher-Order Functions function higherOrderFunction (callback) { return function () { return callback() } }
27.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Higher-Order Components function higherOrderComponent (Component) { return class extends React.Component { render() { return <Component /> } } }
28.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights HOCs – Relatable Use Case • Don't Repeat Yourself or D.R.Y
29.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights HOC - Demo • Demo HelloHOC HelloHOCContainer HelloHOC HelloHOCContainer withSpinnerHOC
30.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights HOC Conventions (Do’s & Don’ts) • Don’t Mutate the Original Component. Use Composition. Ex.- Component.prototype.componentDidMount = () => {} • Pass Unrelated Props Through to the Wrapped Component • Don’t Use HOCs Inside the render Method
31.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights HOC- Benefits • Benefits of using HOCs: – Reusability – Cleaner Code – Less prone to bugs
32.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Forms • Forms - a necessary evil in all applications • It is almost impossible to imagine a web application without forms • Registration, Login, Search, Filter, Create or Update all these operations need some kind of a form implementation.
33.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Form Types Forms Uncontrolled Input Controlled Input
34.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Controlled Components • UI in sync with the state • React state becomes single source of truth • Functions govern the data going into them on every onChange event. • unidirectional data flow
35.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Forms
36.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Demo
37.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Form Libraries in React • Formsy React • Redux Forms • Formik • React Final Form
38.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights 38
39.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Hooks • Hooks let you use state and other React features without writing a class. • Hooks are optional and backward compatible. • Promotes the functional nature of javascript i.e. promotes functional react components
40.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Why Not Classes • Need an understanding of all the lifecycle methods. • Complex components become hard to understand. • Classes confuse people (notorious this..) • It’s hard to reuse stateful logic between classes
41.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Why Hooks • Hooks are our best shot at solving all of these problems • Hooks let us organize the logic inside a component into reusable isolated units. • Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components
42.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights 42
43.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights State Hook In a functional component, we have no “state” properties, so we can’t assign or read "this.state” Instead, we call the “useState” Hook directly inside our component to declare a state variable. • It declares a “state variable” • The only argument to the useState() Hook is the initial state • It returns a pair of values: the current state and a function that updates it.
44.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights 44
45.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Effect Hook The Effect Hook lets you perform side effects in function components.Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. 1. By using this Hook, you tell React that your component needs to do something after render. 2. Placing useEffect inside the component lets us access the state variable (or any props) right from the effect. – We don’t need a special API to read it — it’s already in the function scope. – Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution. 3. By default, it runs both after the first render and after every update. However ,it can be customised.
46.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Custom Hooks A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. Unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it’s just like a normal function.
47.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights Rules for using Hooks 1. Only call at top level (Not under any condition, loops or nested function) 2. Only call from react functional components(Not from regular js functions, or class components.But you call them from custom hooks)
48.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights QUESTIONS?
49.
Copyright © 2015
Talentica Software (I) Pvt Ltd. All rightsCopyright © 2015 Talentica Software (I) Pvt Ltd. All rights THANK YOU
Download now