▶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.
▶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.
- Chapter 18, Practical Use Cases of Refs, introduces you to some use cases of references and how to leverage their functionalities in your code. You will be able to identify scenarios in which to use references so that you can manipulate DOM elements directly.
