React Cookbook
eBook - ePub

React Cookbook

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

Carlos Santana Roldan

Partager le livre
  1. 580 pages
  2. English
  3. ePUB (adapté aux mobiles)
  4. Disponible sur iOS et Android
eBook - ePub

React Cookbook

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

Carlos Santana Roldan

DĂ©tails du livre
Aperçu du livre
Table des matiĂšres
Citations

À propos de ce livre

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.

Foire aux questions

Comment puis-je résilier mon abonnement ?
Il vous suffit de vous rendre dans la section compte dans paramĂštres et de cliquer sur « RĂ©silier l’abonnement ». C’est aussi simple que cela ! Une fois que vous aurez rĂ©siliĂ© votre abonnement, il restera actif pour le reste de la pĂ©riode pour laquelle vous avez payĂ©. DĂ©couvrez-en plus ici.
Puis-je / comment puis-je télécharger des livres ?
Pour le moment, tous nos livres en format ePub adaptĂ©s aux mobiles peuvent ĂȘtre tĂ©lĂ©chargĂ©s via l’application. La plupart de nos PDF sont Ă©galement disponibles en tĂ©lĂ©chargement et les autres seront tĂ©lĂ©chargeables trĂšs prochainement. DĂ©couvrez-en plus ici.
Quelle est la différence entre les formules tarifaires ?
Les deux abonnements vous donnent un accĂšs complet Ă  la bibliothĂšque et Ă  toutes les fonctionnalitĂ©s de Perlego. Les seules diffĂ©rences sont les tarifs ainsi que la pĂ©riode d’abonnement : avec l’abonnement annuel, vous Ă©conomiserez environ 30 % par rapport Ă  12 mois d’abonnement mensuel.
Qu’est-ce que Perlego ?
Nous sommes un service d’abonnement Ă  des ouvrages universitaires en ligne, oĂč vous pouvez accĂ©der Ă  toute une bibliothĂšque pour un prix infĂ©rieur Ă  celui d’un seul livre par mois. Avec plus d’un million de livres sur plus de 1 000 sujets, nous avons ce qu’il vous faut ! DĂ©couvrez-en plus ici.
Prenez-vous en charge la synthÚse vocale ?
Recherchez le symbole Écouter sur votre prochain livre pour voir si vous pouvez l’écouter. L’outil Écouter lit le texte Ă  haute voix pour vous, en surlignant le passage qui est en cours de lecture. Vous pouvez le mettre sur pause, l’accĂ©lĂ©rer ou le ralentir. DĂ©couvrez-en plus ici.
Est-ce que React Cookbook est un PDF/ePUB en ligne ?
Oui, vous pouvez accĂ©der Ă  React Cookbook par Carlos Santana Roldan en format PDF et/ou ePUB ainsi qu’à d’autres livres populaires dans Computer Science et Programming in JavaScript. Nous disposons de plus d’un million d’ouvrages Ă  dĂ©couvrir dans notre catalogue.

Informations

Année
2018
ISBN
9781785282591

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
  1. Go to the new application with cd my-first-react-app and start it with npm start.
  2. The application should now be running at http://localhost:3000.
  3. 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
  1. 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.
  1. 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
  1. Let's change this code a little bit. As I said b...

Table des matiĂšres