React Cookbook

By : Carlos Santana Roldán

2.5 (6)

Buy this Book

React Cookbook

2.5 (6)

By: Carlos Santana Roldán

Buy this Book

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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Working with React

Introduction

Working with the latest JS features in React

What's new in React?

Using React on Windows

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

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

Adding Routes to Our Application with React Router

Introduction

Implementing React Router v4

Adding parameters to our routes

Mastering Redux

Introduction

Creating a Redux Store

Making action creators and dispatching actions

Implementing Firebase with Redux

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

Animations with React

Introduction

Animating a todo list with ReactCSSTransitionGroup

Using react-animations library

Creating our first animation with React Pose

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

Apollo and GraphQL

Introduction

Creating our first GraphQL server

Creating a Twitter timeline with Apollo and GraphQL

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

Implementing Server-Side Rendering

Introduction

Implementing Server-Side Rendering

Implementing promises with Server-Side Rendering

Implementing Next.js

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

Deploying to Production

Introduction

Deploying to production on Digital Ocean

Configuring Nginx, PM2, and a domain in our Droplet

Implementing Jenkins (continuous integration)

Working with React Native

Introduction

Creating our first React Native Application

Creating a Todo List with React Native

Implementing React Navigation V2

Most Common React Interview Questions

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

2.5 (6)

5 star

16.7%

4 star

16.7%

3 star

2 star

33.3%

1 star

33.3%

Simulating Events

In this recipe, we are going to learn how to simulate the onClick and onChange events on a simple Calculator component.

How to do it...

We will re-use the code of the last recipe (Repository: Chapter12/Recipe3/debugging):

We will create a simple Calculator component to sum two values (input) and then we will get the result when the user clicks on the equals (=) button:

  import React, { Component } from 'react';
  import styles from './Calculator.scss';

  class Calculator extends Component {
    state = {
      number1: 0,
      number2: 0,
      result: 0
    };

    handleOnChange = e => {
      const { target: { value, name } } = e;

      this.setState({
        [name]: value
      });
    ...