Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag Norway
Country selected
country flag Chile
Country selected
country flag South Korea
Country selected
country flag Ecuador
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Switzerland
Country selected
country flag Indonesia
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag New Zealand
Country selected
country flag Austria
Country selected
country flag Turkey
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Malaysia
Country selected
country flag South Africa
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
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
Concepts
Arrow right icon
Authors (6):
Arrow left icon
Florian Sloot Florian Sloot
Author Profile Icon Florian Sloot
Florian Sloot
LinkedIn
Florian Sloot is a tech-lover since childhood and during his development years, he learned the importance of teaching and guiding. Therefore, as he got some experience with building applications, he started publishing learning resources himself. To date, he has taught hundreds of students and co-workers.
Read more
See other products by Florian Sloot
Ryan Yu Ryan Yu
Author Profile Icon Ryan Yu
Ryan Yu
Ryan Yu is a senior UI engineer, writer, and speaker. He specializes in React with Redux and WebGL. His specialties and passion have led him to create a frontend course, FrontEnd 30, helping many developers and engineers improve their skills. He has led many web projects for government departments, universities, and banks. He has also contributed to developing several design systems built with React. He has also developed SEM & BIO to manage CSS in a better way.
Read more
See other products by Ryan Yu
Brandon Richey Brandon Richey
Author Profile Icon Brandon Richey
Brandon Richey
Brandon Richey is a software engineer and a React enthusiast who has written several popular React tutorials. He has been making professional and hobby programming projects spanning healthcare, personal sites, recruiting, and game development for nearly 20 years! Brandon is the author of the Packt book 'Create React App 2 Quick Start Guide'.
Read more
See other products by Brandon Richey
Endre Vegh Endre Vegh
Author Profile Icon Endre Vegh
Endre Vegh
Endre Vegh is a software engineer at Helpfulpeeps where he spends most of his time building web and mobile apps using react and react-native.
Read more
See other products by Endre Vegh
Theofanis Despoudis Theofanis Despoudis
Author Profile Icon Theofanis Despoudis
Theofanis Despoudis
LinkedIn
Theo Despoudis lives in Ireland, where he works as a Software Engineer for WP Engine and as a part-time tech practitioner for Fixate. He is the co-author of The React Workshop and Advanced Go Programming in 7 Days, Dzone Core Member, and maintains some open source projects on GitHub. Theo is available for conference talks, independent consulting, and corporate training services opportunities.
Read more
See other products by Theofanis Despoudis
Anton Punith Anton Punith
Author Profile Icon Anton Punith
Anton Punith
Anton Punith is a technology enthusiast and a creative person who loves to build things. Working over a decade in front-end-development, he is an old school developer who believes in clean hand-coded HTML, CSS, and JavaScript. He fell in love with CSS and JavaScript when he first learned it and the romance still continues. He is an ardent learner who likes to share what he's learned.
Read more
See other products by 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

5. Class and Function Components

Overview

This chapter will introduce you to the two components types in React, class components and function components. With the knowledge acquired from this chapter, you will be able to use industry best practices to identify the component hierarchy and break the UI down into logical components. This chapter aims to form the basis of creating UIs in React, be they simple or complex, and provides you with the basic tools required to build React applications.

lock icon The rest of the chapter is locked
arrow left Previous Section
Section 1 of 8
Next Section arrow right
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.
Sign up now
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
Start free trial
Renews at $19.99/month. Cancel anytime

Authors (6)

Left arrow icon
Profile icon Brandon Richey
Brandon Richey
Brandon Richey is a software engineer and a React enthusiast who has written several popular React tutorials. He has been making professional and hobby programming projects spanning healthcare, personal sites, recruiting, and game development for nearly 20 years! Brandon is the author of the Packt book 'Create React App 2 Quick Start Guide'.
Read more
See other products by Brandon Richey
Profile icon Florian Sloot
Florian Sloot
LinkedIn icon Github icon
Florian Sloot is a tech-lover since childhood and during his development years, he learned the importance of teaching and guiding. Therefore, as he got some experience with building applications, he started publishing learning resources himself. To date, he has taught hundreds of students and co-workers.
Read more
See other products by Florian Sloot
Profile icon Anton Punith
Anton Punith
Anton Punith is a technology enthusiast and a creative person who loves to build things. Working over a decade in front-end-development, he is an old school developer who believes in clean hand-coded HTML, CSS, and JavaScript. He fell in love with CSS and JavaScript when he first learned it and the romance still continues. He is an ardent learner who likes to share what he's learned.
Read more
See other products by Anton Punith
Profile icon Endre Vegh
Endre Vegh
Endre Vegh is a software engineer at Helpfulpeeps where he spends most of his time building web and mobile apps using react and react-native.
Read more
See other products by Endre Vegh
Profile icon Ryan Yu
Ryan Yu
Ryan Yu is a senior UI engineer, writer, and speaker. He specializes in React with Redux and WebGL. His specialties and passion have led him to create a frontend course, FrontEnd 30, helping many developers and engineers improve their skills. He has led many web projects for government departments, universities, and banks. He has also contributed to developing several design systems built with React. He has also developed SEM & BIO to manage CSS in a better way.
Read more
See other products by Ryan Yu
Profile icon Theofanis Despoudis
Theofanis Despoudis
LinkedIn icon Github icon
Theo Despoudis lives in Ireland, where he works as a Software Engineer for WP Engine and as a part-time tech practitioner for Fixate. He is the co-author of The React Workshop and Advanced Go Programming in 7 Days, Dzone Core Member, and maintains some open source projects on GitHub. Theo is available for conference talks, independent consulting, and corporate training services opportunities.
Read more
See other products by Theofanis Despoudis
Right arrow icon

Other recommended products

Related to this chapter
Left arrow icon
React Router Quick Start Guide
React Router Quick Start Guide
Read more
React Router is the routing library for React, and it can be used in both React Web and React Native applications. This book is a simple way to get started with React Router and harness its full power for your applications.
Read more
Sep 2018 5h 12m
Beginning React
Beginning React
Read more
Projects like Angular and React are rapidly changing how development teams build and deploy web applications to production. In this book, you'll learn the basics you need to get up and running with React and tackle real-world projects and challenges. It includes helpful guidance on how to consider key user requirements within the development process, and also shows you how to work with advanced concepts such as state management, data-binding, routing, and the popular component markup that is JSX. As you complete the included examples, you'll find yourself well-equipped to move onto a real-world personal or professional frontend project.
Read more
Jul 2018 3h 12m
Beginning React
Beginning React
Read more
Projects like Angular and React are rapidly changing how development teams build and deploy web applications to production. In this book, you'll learn the basics you need to get up and running with React and tackle real-world projects and challenges. It includes helpful guidance on how to consider key user requirements within the development process, and also shows you how to work with advanced concepts such as state management, data-binding, routing, and the popular component markup that is JSX. As you complete the included examples, you'll find yourself well-equipped to move onto a real-world personal or professional frontend project.
Read more
Jul 2018 3h 12m
Beginning React
Beginning React
Read more
Projects like Angular and React are rapidly changing how development teams build and deploy web applications to production. In this book, you'll learn the basics you need to get up and running with React and tackle real-world projects and challenges. It includes helpful guidance on how to consider key user requirements within the development process, and also shows you how to work with advanced concepts such as state management, data-binding, routing, and the popular component markup that is JSX. As you complete the included examples, you'll find yourself well-equipped to move onto a real-world personal or professional frontend project.
Read more
Jul 2018 3h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Learn React Hooks
Learn React Hooks
Read more
This ultimate guide on React Hooks helps you modernize managing state and effects in React apps using Hooks. You will learn various types of Hooks and how it integrates with Context and Suspense APIs. You will create custom Hooks and learn to use Hooks with Redux and MobX. Lastly, you will learn to migrate your existing React applications to Hooks.
Read more
Oct 2019 14h 12m
Right arrow icon
Banner background image

Personalised recommendations for you

Based on your interests and search pattern
Left arrow icon
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Right arrow icon