Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
The React Workshop

You're reading from   The React Workshop Get started with building web applications using practical tips and examples from React use cases

Arrow left icon
Product type Paperback
Published in Aug 2020
Publisher Packt
ISBN-13 9781838645564
Length 806 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Authors (6):
Arrow left icon
Florian Sloot Florian Sloot
Author Profile Icon Florian Sloot
Florian Sloot
Ryan Yu Ryan Yu
Author Profile Icon Ryan Yu
Ryan Yu
Brandon Richey Brandon Richey
Author Profile Icon Brandon Richey
Brandon Richey
Endre Vegh Endre Vegh
Author Profile Icon Endre Vegh
Endre Vegh
 Theofanis Despoudis Theofanis Despoudis
Author Profile Icon Theofanis Despoudis
Theofanis Despoudis
Anton Punith Anton Punith
Author Profile Icon Anton Punith
Anton Punith
+2 more Show less
Arrow right icon
View More author details
Toc

Table of Contents (20) Chapters Close

Preface
1. Getting Started with React 2. Dealing with React Events FREE CHAPTER 3. Conditional Rendering and for Loops 4. React Lifecycle Methods 5. Class and Function Components 6. State and Props 7. Communication between Components 8. Introduction to Formik 9. Introduction to React Router 10. Advanced Routing Techniques: Special Cases 11. Hooks – Reusability, Readability, and a Different Mental Model 12. State Management with Hooks 13. Composing Hooks to Solve Complex Problems 14. Fetching Data by Making API Requests 15. Promise API and async/await 16. Fetching Data on Initial Render and Refactoring with Hooks 17. Refs in React 18. Practical Use Cases of Refs Appendix

DOM Manipulation Helpers

As mentioned beforehand, there are two functions in particular that we usually use together with Refs to gain full access and manipulate the DOM even outside our React applications' scope. These utilities are createPortal and cloneElement. The former is provided by the React DOM package and the latter comes bundled with React itself.

The cloneElement function in React

Whenever we want to change a given React component's immutable attributes – for example, its passed props – we can fall back to React.cloneElement and create a copy of this particular component and change it as we wish.

The function's signature is very similar to the fundamental element of React React.createElement. However, instead of passing type as the first parameter, we pass an element, such as a component. The return value is the same as returned by createElement which is basically a React element. cloneElement can be defined as:

React.cloneElement...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image