O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

React Cookbook

Book Description

Over 66 hands-on recipes that cover UI development, animations, component architecture, routing, databases, testing, and debugging with React

Key Features

  • Use essential hacks and simple techniques to solve React application development challenges
  • Create native mobile applications for iOS and Android using React Native
  • Learn to write robust tests for your applications using Jest and Enzyme

Book Description

Today's web demands efficient real-time applications and scalability. If you want to learn to build fast, efficient, and high-performing applications using React 16, this is the book for you. We plunge directly into the heart of all the most important React concepts for you to conquer. Along the way, you'll learn how to work with the latest ECMAScript features.

You'll see the fundamentals of Redux and find out how to implement animations. Then, you'll learn how to create APIs with Node, Firebase, and GraphQL, and improve the performance of our application with Webpack 4.x. You'll find recipes on implementing server-side rendering, adding unit tests, and debugging. We also cover best practices to deploy a React application to production. Finally, you'll learn how to create native mobile applications for iOS and Android using React Native.

By the end of the book, you'll be saved from a lot of trial and error and developmental headaches, and you'll be on the road to becoming a React expert.

What you will learn

  • Gain the ability to wield complex topics such as Webpack and server-side rendering
  • Implement an API using Node.js, Firebase, and GraphQL
  • Learn to maximize the performance of React applications
  • Create a mobile application using React Native
  • Deploy a React application on Digital Ocean
  • Get to know the best practices when organizing and testing a large React application

Who this book is for

If you're a JavaScript developer who wants to build fast, efficient, scalable solutions, then you're in the right place. Knowledge of React will be an advantage but is not required. Experienced users of React will be able to improve their skills.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. React Cookbook
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Dedication
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
    4. Get in touch
      1. Reviews
  7. Working with React
    1. Introduction
    2. Working with the latest JS features in React
      1. How to do it...
    3. What's new in React?
      1. How to do it...
    4. Using React on Windows
      1. How to do it...
  8. Conquering Components and JSX
    1. Introduction
    2. Creating our first React component
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Organizing our React application
      1. How to do it...
      2. How it works...
    4. Styling a component with CSS classes and inline styles
      1. How to do it...
      2. How it works...
      3. There's more...
    5. Passing props to a component and validating them with PropTypes
      1. How to do it...
      2. How it works...
      3. There's more...
    6. Using local state in a component
      1. How to do it...
      2. How it works...
      3. There's more...
    7. Making a functional or stateless component
      1. How to do it...
      2. How it works...
      3. There's more...
    8. Understanding React lifecycle methods
      1. How to do it...
        1. Todo list – implementing ComponentWillMount
        2. Pomodoro timer – implementing the constructor and componentDidMount
        3. Crypto coins exchanger – implementing shouldComponentUpdate
        4. Notes – implementing componentWillReceiveProps and componentWillUnmount
        5. C3.js chart – implementing componentDidUpdate
        6. Basic animation – implementing componentWillUpdate
      2. How it works...
    9. Understanding React Pure Components
      1. Getting ready
      2. How to do it…
      3. How it works…
    10. Preventing XSS vulnerabilities in React
      1. How to do it...
      2. How it works...
      3. There's more...
  9. Handling Events, Binding and Useful React Packages
    1. Introduction
    2. Binding methods using the constructor versus using arrow functions
      1. How to do it...
      2. How it works...
    3. Creating form elements with events
      1. How to do it...
      2. How it works...
      3. There's more...
    4. Displaying information in a modal with react-popup
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Implementing Airbnb React/JSX Style Guide
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    6. Updating our title and meta tags with React Helmet
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
  10. Adding Routes to Our Application with React Router
    1. Introduction
    2. Implementing React Router v4
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Adding parameters to our routes
      1. How to do it...
      2. How it works...
  11. Mastering Redux
    1. Introduction
    2. Creating a Redux Store
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Making action creators and dispatching actions
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Implementing Firebase with Redux
      1. Getting ready
      2. How to do it...
      3. How it works...
  12. Creating Forms with Redux Form
    1. Introduction
    2. Creating a controlled form with the local state
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Building a form using Redux Form
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Implementing validation in a form
      1. How to do it...
      2. How it works...
  13. Animations with React
    1. Introduction
    2. Animating a todo list with ReactCSSTransitionGroup
      1. Getting Ready
      2. How to do it...
      3. How it works...
    3. Using react-animations library
      1. Getting ready
      2. How to do it...
      3. There's more...
    4. Creating our first animation with React Pose
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
  14. Creating an API with Node.js Using MongoDB and MySQL
    1. Introduction
    2. Creating a basic API with Express
      1. Getting ready
      2. How to do it...
      3. How it works...
    3. Building a database with MongoDB
      1. Getting ready
        1. Installing MongoDB Community Edition manually (the hard way)
        2. Installing MongoDB Community Edition with Homebrew (the easy way)
        3. Running MongoDB
      2. How to do it...
      3. How it works...
        1. GET method endpoints
        2. POST method endpoints
        3. DELETE method endpoints
        4. PUT method endpoints
    4. Building a database with MySQL
      1. Getting ready
      2. How to do it...
      3. How it works...
        1. POST method endpoints
        2. GET method endpoints
        3. DELETE method endpoints
        4. PUT method endpoints
    5. Adding access tokens to secure our API
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
  15. Apollo and GraphQL
    1. Introduction
    2. Creating our first GraphQL server
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Creating a Twitter timeline with Apollo and GraphQL
      1. Getting ready
        1. Creating our GraphQL backend server
      2. How to do it...
      3. How it works...
  16. Mastering Webpack 4.x
    1. Introduction
    2. Webpack 4 Zero Configuration
      1. Getting Ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Adding React to Webpack 4
      1. Getting Ready
      2. How to do it...
      3. How it works...
      4. There's more...
    4. Adding Webpack Dev Server and Sass, Stylus, or LessCSS with React
      1. Getting Ready
      2. How to do it...
      3. How it works...
      4. There's more...
    5. Webpack 4 Optimization – Splitting Bundles
      1. Getting Ready
      2. How to do it...
      3. How it works...
    6. Implementing Node.js with React/Redux and Webpack 4
      1. Getting Ready
      2. How to do it...
      3. How it works...
      4. There's more...
  17. Implementing Server-Side Rendering
    1. Introduction
    2. Implementing Server-Side Rendering
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Implementing promises with Server-Side Rendering
      1. Getting ready
      2. How to do it...
      3. How it works...
    4. Implementing Next.js
      1. Getting ready
      2. How to do it...
      3. How it works...
  18. Testing and Debugging
    1. Introduction
    2. Testing our first component with Jest and Enzyme
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Testing a Redux Container, Actions, and Reducers
      1. Getting Ready
      2. How to do it...
    4. Debugging a React application using React and Redux Dev Tools
      1. Getting Ready
      2. How to do it...
    5. Simulating Events
      1. How to do it...
      2. How it works...
  19. Deploying to Production
    1. Introduction
    2. Deploying to production on Digital Ocean
      1. Getting ready
      2. How to do it...
      3. How it works...
      4. There's more...
    3. Configuring Nginx, PM2, and a domain in our Droplet
      1. Getting Ready
      2. How to do it...
      3. How it works...
      4. There's more...
    4. Implementing Jenkins (continuous integration)
      1. Getting Ready
      2. How to do it...
      3. How it works...
  20. Working with React Native
    1. Introduction
    2. Creating our first React Native Application
      1. Getting Ready
      2. How to do it...
      3. How it works...
    3. Creating a Todo List with React Native
      1. How to do it...
      2. How it works...
      3. There's more...
    4. Implementing React Navigation V2
      1. Getting Ready
      2. How to do it...
      3. How it works...
  21. Most Common React Interview Questions
  22. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think