The React Workshop

Get started with building web applications using practical tips and examples from React use cases

Brandon Richey , Ryan Yu , Endre Vegh , Theofanis Despoudis , Anton Punith , 지음

Packt(GCO Science) 2020년 08월 21일 출간

작품소개

책소개

▶Book Description
Are you interested in how React takes command of the view layer for web and mobile apps and changes the data of large web applications without needing to reload the page?

This workshop will help you learn how and show you how to develop and enhance web apps using the features of the React framework with interesting examples and exercises.

The workshop starts by demonstrating how to create your first React project. You'll tap into React's popular feature JSX to develop templates and use DOM events to make your project interactive. Next, you'll focus on the lifecycle of the React component and understand how components are created, mounted, unmounted, and destroyed. Later, you'll create and customize components to understand the data flow in React and how props and state communicate between components. You'll also use Formik to create forms in React to explore the concept of controlled and uncontrolled components and even play with React Router to navigate between React components. The chapters that follow will help you build an interesting image-search app to fetch data from the outside world and populate the data to the React app. Finally, you'll understand what ref API is and how it is used to manipulate DOM in an imperative way.

By the end of this React book, you'll have the skills you need to set up and create web apps using React.

▶What You Will Learn
- Use JSX to include logic in the view layer of applications
- Get familiar with the important methods and events in the React lifecycle
- Distinguish between class and functional component syntaxes
- Create forms with Formik and handle errors
- Understand the React Hooks API and the problems it can solve
- Fetch outside data using the Axios library and populate the data to the app

▶Key Features
- Explore the React environment by creating live projects
- Solve real-world problems relating to building modern web applications
- Gain a thorough understanding of how data moves through different React components

▶Who This Book Is For
The React Workshop is for web developers and programmers who are looking to learn React and use it for creating and enhancing web applications. Although the workshop is for beginners, prior knowledge of JavaScript programming and HTML and CSS is necessary to easily understand the concepts that are covered.

목차

▶TABLE of CONTENTS
1. Getting Started with React
2. Dealing with React Events
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

책 속으로

▶What this book covers
- Chapter 1, Getting Started with React, gets you typing code immediately. You will learn the basics of React, as well as how to install and configure React projects with Create React App.

- Chapter 2, Dealing with React Events, provides the starting point for creating interactive web apps with React by introducing events. We'll not only create events but integrate them into our React components.

- Chapter 3, Conditional Rendering and for Loops, is where we expand upon programmatically creating React components either when conditions are set or when we need to add multiple React components as a list of items.

- Chapter 4, React Lifecycle Methods, is where we go from passively relying on React to build our components to hooking up our components to the different lifecycle methods, allowing us to determine what logic to execute at each stage of our React component's life.

- Chapter 5, Class and Function Components, discusses industry best practices to identify the component hierarchy and break the UI down into logical components. This chapter forms the basis for your understanding of creating UIs in React, be they simple or complex, and provides you with the basic tools required to build React applications.

- Chapter 6, State and Props, discusses the components that use state and props. You will learn how to handle state in a React application and how to change state variables according to requirements.

- Chapter 7, Communication between Components, helps you understand how to pass data between React classes and functional components. Also, this chapter dives into more advanced patterns such as higher-order components, render props, and the Context API.

- Chapter 8, Introduction to Formik, gives you a complete picture of using Formik to build declarative forms. There are many ways to handle forms in React but Formik combines the best approaches.

- Chapter 9, Introduction to React Router, gets you comfortable with one of the most commonly used React libraries in modern React web apps: React Router. We will cover the basics of using React Router, including implementing our own version to understand what is happening under the hood.

- Chapter 10, Advanced Routing Techniques: Special Cases, looks at advanced techniques with React Router and gets you onto the next level. You will learn how to catch missing routes, how to nest routes, and how to protect routes from unauthorized accesses.

- Chapter 11, Hooks ？ Reusability, Readability, and a Different Mental Model, prepares you for using the latest addition to React: hooks. We'll explore how to make your code more readable and more reusable via hooks.

- Chapter 12, State Management with Hooks, builds on your knowledge of hooks to completely replace class-based component state management by exploring more advanced topics such as building your own state hooks.

- Chapter 13, Composing Hooks to Solve Complex Problems, brings you from novice React hooks knowledge to expert React hooks knowledge, putting context hooks into the mix to completely eliminate the need for class-based components.

- Chapter 14, Fetching Data by Making API Requests, shows you the various ways to fetch data by making API requests in React. This chapter also covers fetching data from servers using RESTful APIs, the Fetch API, and Axios and compares these methods.

- Chapter 15, Promise API and async/await, takes a deep dive into the Promise API and async/await, which are essential techniques and the modern way to fetch data from the server.

- Chapter 16, Fetching Data on Initial Render and Refactoring with Hooks, shows you the techniques of fetching data on initial render and fixing issues when a component falls into an infinite loop.

- Chapter 17, Refs in React, introduces you to how to use references in React. You will be able to apply the knowledge gained from the chapter to implement references in different ways.
...

출판사 서평

▶ Preface
You already know you want to learn React, and the smartest way to learn React is to learn by doing. The React Workshop focuses on building up your practical skills so that you can create dynamic, component-based web applications and interactive React UIs that provide exceptional user experiences. You'll learn from real examples that lead to real results.

Throughout The React Workshop book, you'll take an engaging step-by-step approach to understand React. You won't have to sit through any unnecessary theory. If you're short on time, you can jump into a single exercise each day or spend an entire weekend learning about two-way data binding. It's your choice. Learning on your terms, you'll build up and reinforce key skills in a way that feels rewarding.

Every physical print copy of The React Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you'll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive content updates. You'll even earn a secure credential that you can share and verify online upon completion. It's a premium learning experience that's included with your printed copy. To redeem, follow the instructions located at the start of your React book.

Fast-paced and direct, The React Workshop is ideal for React beginners. You'll build and iterate on your code like a software developer, learning along the way. This process means that you'll find that your new skills stick, embedded as best practice, a solid foundation for the years ahead.

작가정보

저자(글) 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'.

저자(글) 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.

저자(글) 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. Although his main focus is front-end related technologies, he is interested in creating backend solutions. He is fond of functional programming principles and figuring out the abstractions. He enjoys finding out things and sharing them. He can be obsessed with shiny new tech, currently, it is all about ReasonML.

저자(글) Theofanis Despoudis

Theofanis Despoudis is a senior software engineer and an experienced mentor. He has extensive experience with React, Redux, and Typescript. He has a keen interest in open-source architectures, cloud computing, best practices, and functional programming. He occasionally blogs on several publishing platforms and enjoys creating projects from inspiration. Theo is the author of the Packt video course 'Advanced Go Programming in 7 Days'.

저자(글) 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.

저자(글)

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.