Book Image

React Cookbook

Book Image

React Cookbook

Overview of this book

React.js is Facebook's dynamic frontend web development framework. It helps you build efficient, high-performing web applications with an intuitive user interface. With more than 66 practical and self-contained tutorials, this book examines common pain points and best practices for building web applications with React. Each recipe addresses a specific problem and offers a proven solution with insights into how it works, so that you can modify the code and configuration files to suit your requirements. The React Cookbook starts with recipes for installing and setting up the React.js environment with the Create React Apps tool. You’ll understand how to build web components, forms, animations, and handle events. You’ll then delve into Redux for state management and build amazing UI designs. With the help of practical solutions, this book will guide you in testing, debugging, and scaling your web applications, and get to grips with web technologies like WebPack, Node, and Firebase to develop web APIs and implement SSR capabilities in your apps. Before you wrap up, the recipes on React Native and React VR will assist you in exploring mobile development with React. By the end of the book, you will have become familiar with all the essential tools and best practices required to build efficient solutions on the web with React.

Related Content you might be interested in

Current Title:

Small book image
React Cookbook
Aug, 2018 | 580 pages
Small book image
React Design Patterns and Best Practices.
Carlos Santana Roldaacuten
Mar, 2019 | 350 pages
Small book image
React 17 Design Patterns and Best Practices
Carlos Santana Roldaacuten
May, 2021 | 394 pages
Small book image
React 18 Design Patterns and Best Practices
Carlos Santana Roldaacuten
Jul, 2023 | 524 pages
Table of Contents (17 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Working with React
Working with React
Introduction
Working with the latest JS features in React
What's new in React?
Using React on Windows
2
Conquering Components and JSX
Conquering Components and JSX
Introduction
Creating our first React component
Organizing our React application
Styling a component with CSS classes and inline styles
Passing props to a component and validating them with PropTypes
Using local state in a component
Making a functional or stateless component
Understanding React lifecycle methods
Understanding React Pure Components
Preventing XSS vulnerabilities in React
3
Handling Events, Binding and Useful React Packages
Handling Events, Binding and Useful React Packages
Introduction
Binding methods using the constructor versus using arrow functions
Creating form elements with events
Displaying information in a modal with react-popup
Implementing Airbnb React/JSX Style Guide
Updating our title and meta tags with React Helmet
4
Adding Routes to Our Application with React Router
Adding Routes to Our Application with React Router
Introduction
Implementing React Router v4
Adding parameters to our routes
5
Mastering Redux
Mastering Redux
Introduction
Creating a Redux Store
Making action creators and dispatching actions
Implementing Firebase with Redux
6
Creating Forms with Redux Form
Creating Forms with Redux Form
Introduction
Creating a controlled form with the local state
Building a form using Redux Form
Implementing validation in a form
7
Animations with React
Animations with React
Introduction
Animating a todo list with ReactCSSTransitionGroup
Using react-animations library
Creating our first animation with React Pose
8
Creating an API with Node.js Using MongoDB and MySQL
Creating an API with Node.js Using MongoDB and MySQL
Introduction
Creating a basic API with Express
Building a database with MongoDB
Building a database with MySQL
Adding access tokens to secure our API
9
Apollo and GraphQL
Apollo and GraphQL
Introduction
Creating our first GraphQL server
Creating a Twitter timeline with Apollo and GraphQL
10
Mastering Webpack 4.x
Mastering Webpack 4.x
Introduction
Webpack 4 Zero Configuration
Adding React to Webpack 4
Adding Webpack Dev Server and Sass, Stylus, or LessCSS with React
Webpack 4 Optimization – Splitting Bundles
Implementing Node.js with React/Redux and Webpack 4
11
Implementing Server-Side Rendering
Implementing Server-Side Rendering
Introduction
Implementing Server-Side Rendering
Implementing promises with Server-Side Rendering
Implementing Next.js
12
Testing and Debugging
Testing and Debugging
Introduction
Testing our first component with Jest and Enzyme
Testing a Redux Container, Actions, and Reducers
Debugging a React application using React and Redux Dev Tools
Simulating Events
13
Deploying to Production
Deploying to Production
Introduction
Deploying to production on Digital Ocean
Configuring Nginx, PM2, and a domain in our Droplet
Implementing Jenkins (continuous integration)
14
Working with React Native
Working with React Native
Introduction
Creating our first React Native Application
Creating a Todo List with React Native
Implementing React Navigation V2
15
Most Common React Interview Questions
Most Common React Interview Questions
16
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Creating our first animation with React Pose

React Pose is a declarative motion system for HTML, SVG, and React. It is a very cool library with which you can do amazing animations with React.

Getting ready

For this recipe, we will need to install the following packages and update our react and react-dom to be 16.4.2 or higher:

  npm install react react-dom react-pose styled-components

How to do it...

Follow these steps to create a React pose animation:

  1. First, let's create our component structure:
import React, { Component } from 'react';
import...
Previous Section
End of Chapter 7
Next Chapter