Serverless Web Applications with React and Firebase

Harmeet Singh, Mayur Tanna

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788478601
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Servicios web y API

Build rich and collaborative applications using client-side code with React, Redux, and FirebaseAbout This Book• A practical guide covering the full stack for web development with React 16 and Firebase• Leverage the power of Firebase Cloud Storage, messaging, functions, OAuth, and database security to develop serverless web applications.• Develop high-performance applications without the hassle of setting up complex web infrastructure.Who This Book Is ForThis book is for JavaScript developers who have some previous knowledge of React and want to develop serverless, full-stack applications but without the hassle of setting up a complex infrastructure.What You Will Learn• Install powerful React.js and Firebase tools to make development much more efficient• Create React components with Firebase to save and retrieve the data in real-time• Use Firebase Authentication to make your React user interface secure• Develop React and Firebase applications with Redux integration • Firebase database security rules• Firebase Cloud Storage Integration to upload and store data on the cloud• Create a complete real-time application with React and firebase• Using Firebase Cloud messaging and Cloud functions with React• Firebase Cloud Storage integration with ReactIn DetailReactJS is a wonderful framework for UI development. Firebase as a backend with React is a great choice as it is easy, powerful, and provides great developer experience. It removes a lot of boilerplate code from your app and allows you to focus on your app to get it out quickly to users. Firebase with React is also a good choice for Most Viable Product (MVP) development.This book provides more practical insights rather than just theoretical concepts and includes basic to advanced examples – from hello world to a real-time seat booking app and Helpdesk applicationThis book will cover the essentials of Firebase and React.js and will take you on a fast-paced journey through building real-time applications with Firebase features such as Cloud Storage, Cloud Function, Hosting and the Realtime Database. We will learn how to secure our application by using Firebase authentication and database security rules. We will leverage the power of Redux to organize data in the front-end, since Redux attempts to make state mutations predictable by imposing certain restrictions on how and when updates can happen. Towards the end of the book you will have improved your React skills by realizing the potential of Firebase to create real-time serverless web applications.Style and approachPractical insights rather than just theoretical concepts while including basic to advanced examples – from hello world to a real-time seat booking app and Helpdesk application.

Getting Started with Firebase and React

Realtime web applications are said to include the benefits of superfast responses to the user and are highly interactive, which increases the user engagement flow. In this modern web, there are many frameworks and tools that are available to develop Realtime applications. JavaScript is one of the most popular scripting languages that is used for building applications on the web. This book introduces you to ReactJS and Firebase, which you will likely come across as you learn about modern web app development. They both are used for building fast, scalable, and realtime user interfaces that use data and can change over time without reloading the page.

React is famously known as a View in Model-View-Controller (MVC) pattern and can be used with other JavaScript libraries or frameworks in MVC. For managing the data flow in React app, we can use Flux or Redux. In this book, we will also go through how we can implement redux with React and firebase app.

Redux is the alternative to Flux. It shares the same key benefits. Redux works especially well with React, for managing the state of the UI. If you have ever worked with flux, then it's easy too.

Before jumping into the code, let's refresh our knowledge of ReactJS and see what we can do with Firebase and their features, to know the power of firebase.

Here is the list of topics that we'll cover in this section:

• Introduction of React
• React Component LifeCycle

This will give you a better understanding of dealing with React Components.

React

React is an open source JavaScript library that provides a view-layer for rendering data as HTML to create interactive UI components. Components have been used typically to render React views that contain additional components specified as custom HTML tags. React views efficiently update and re-render the components without reloading the page when your data changes. It gives you a trivial virtual DOM, powerful views without templates, unidirectional data flow, and explicit mutation. It is a very systematic way of updating the HTML document when the data changes and provides a clean separation of components in a modern, single-page application.

The React Component is built entirely with Javascript, so it's easy to pass rich data through your app. Creating components in React lets you split the UI into reusable and independent pieces, which makes your application component reusable, testable, and makes the separation of concerns easy.

React is only focused on View in MVC, but it also has stateful components that remember everything within this.state. It handles mapping from input to state changes and it renders components. Let's look at React's component life cycle and its different levels.

Component lifecycle

In React, each component has its own lifecycle methods. Every method can be overridden as per your requirements.

When the data changes, React automatically detects the change and re-renders the component. Also, we can catch the errors in the Error Handling phase.

The following image shows the phases of a React Component:

Methods info

Let's take a quick look at the preceding methods.

The constructor() method

The constructor method of React Component gets invoked first when the component is mounted. Here, we can set the state of the component.

Here's an example of constructor in React.Component:

constructor(props) {
 super(props);
 this.state = {
 value: props.initialValue
 };
 }

Using this.props inside the constructor, we need to call super(props) to access and call functions of parents; otherwise, you will get this.props undefined in the constructor because React sets the .props on the instance from outside immediately after calling constructor, but it will not affect when you are using this.props inside the render method.

The render() method

The render() method is required to render the UI component and examine this.props and this.state and return one of the following types:

• React elements
• String and numbers
• Portals
• null
• Booleans

The componentWillMount() method

This method is invoked immediately before componentDidMount. It is triggered before render()method.

The componentDidMount() method

This method is invoked immediately after a component gets the mount. We can use this method to load the data from a remote endpoint to instantiate a network request.

The componentWillReceiveProps() method

This method will be invoked when the mounted component receives new props. This method also allows comparing the current and next values to ensure the changes in props.

The shouldComponentUpdate() method

The shouldComponentUpdate() method is invoked when the component has received the new props and state. The default value is true; if it returns false, React skips the update of the component.

The componentWillUpdate() method

The componentWillUpdate() method is invoked immediately before rendering when a new prop or state is being received. We can use this method to perform an action before the component gets updated.

This method will not be invoked if shouldComponentUpdate() returns false.

The componentDidUpdate() method

The componentDidUpdate() method is invoked immediately when component gets updated. This method is not called for the initial render.

Similar to componentWillUpd...