React Cookbook

Create dynamic web apps with React using Redux, Webpack, Node.js, and GraphQL

Carlos Santana Roldan

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781785282591
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

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.

Conquering Components and JSX

In this chapter, the following recipes will be covered:

• 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

Introduction

This chapter contains recipes related to how to create components in React. We are going to learn how to create React components (class components, pure components, and functional components) and organize our project structure. We'll also learn how to use React local state, implement all the React lifecycle methods, and finally, we'll see how to prevent XSS vulnerabilities.

Creating our first React component

The component is the essential part of React. With React you can build interactive and reusable components. In this recipe, you will create your first React component.

Getting ready

First, we need to create our React application using create-react-app. Once that is done, you can proceed to create your first React component.

Before you install create-react-app, remember that you need to download and install Node from www.nodejs.org. You can install it for Mac, Linux, and Windows.

Install create-react-app globally by typing this command in your Terminal:

 npm install -g create-react-app

Or you can use a shortcut:

 npm i -g create-react-app

How to do it...

Let's build our first React application by following these steps:

1. Create our React application with the following command:

 create-react-app my-first-react-app

2. Go to the new application with cd my-first-react-app and start it with npm start.
3. The application should now be running at http://localhost:3000.
4. Create a new file called Home.js inside your src folder:

import React, { Component } from 'react';

class Home extends Component {
 render() {
 return <h1>I'm Home Component</h1>;
 }
}

export default Home;

File: src/Home.js

5. You may have noticed that we are exporting our class component at the end of the file, but it's fine to export it directly on the class declaration, like this:

 import React, { Component } from 'react';
 export default class Home extends Component {
 render() {
 return <h1>I'm Home Component</h1>;
 }
 }

File: src/Home.js

I prefer to export it at the end of the file, but some people like to do it in this way, so it depends on your preferences.

6. Now that we have created the first component, we need to render it. So we need to open the App.js file, import the Home component, and then add it to the render method of the App component. If we are opening this file for the first time, we will probably see a code like this:

 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 class App extends Component {
 render() {
 return (
 <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <h1 className="App-title">Welcome to React</h1>
 </header>
 <p className="App-intro">
 To get started, edit <code>src/App.js</code> 
 and save to reload.
 </p>
 </div>
 );
 }
 }

 export default App;

File: src/App.js

7. Let's change this code a little bit. As I said b...