Advanced Web Development with React

SSR and PWA with Next.js using React with advanced concepts

Mehul Mohan

• Publisher: BPB Publications
• Year: 2020
• eBook ISBN: 9789389423594
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

Level up your React and Next.js skills with advanced concepts about SSR and PWA Key Features

• Covers latest and core React concepts including React hooks and React reconciler
• Covers about Server Side Rendering with React and how to use it using Next.js
• Covers about Progressive Web Apps in React and how to create them
• Covers intermediate and advanced React concepts like state management
• Covers overview of React for beginners to catch with advanced concepts later
• Covers bleeding-edge React concepts on the future of React and how it would work eventually
• 
  Description
  The book starts by introducing the reader to React, what it is and why you need a library like React to work with medium to large scale applications. We then move on to implementing simple client-side programs with React, uncovering modern React practices like React hooks and diving deep into various kinds of hooks. We then move to implement React on the server using Server-Side Rendering to bring benefits of the SEO world to the dynamic rendering nature of front-end libraries. For this, we use Next.js, a very popular implementation of Server-Side Rendering which comes with tons of good practices already baked in. We also take a look at how Progressive Web Apps can be created out of existing React codebases and what benefits it provides us. Finally, we end the book with some React internals (how to React works) and some bleeding-edge features in React which are expected to roll out in 2-3 years fully and would impact how to React works under the hood. What will you learn
  
• What React is and how to get started with it
• Modern ways to code React applications
• Implementing Server-Side rendering with/without Next.js on the top of React library
• Working with Progressive Web Apps in React
• How to React works under the hood
• Future of React and bleeding-edge React tech you can use today
• 
  Who this book is for
  The reader is expected to have a decent understanding of JavaScript/HTML/CSS, and possibly, worked with React a little bit beforehand. Although the first 2 chapters cover basics of React, still it is recommended for users with at least a bit of knowledge and experience with React. Table of Contents
  1. React 101
  2. Setting up React
  3. Components
  4. State Management with React
  5. Server Side React
  6. Introduction to Next.js
  7. More with Next.js
  8. Progressive Web Apps
  9. Bleeding edge React About the Author
  Mehul Mohan is an entrepreneur, developer and a security researcher. Currently, he is pursuing his bachelor's degree in CSE at BITS Pilani. He is a WWDC'19 Scholar, and runs codedamn – a platform for people to learn coding. You'll often find him creating programming tutorials on his YouTube channel, codedamn, having over 100, 000 subscribers. He has been acknowledged by companies such as Google, Microsoft, Sony, etc. for his contributions as a security researcher. Your Blog links: https://codedamn.com https://mehulmohan.com
  His LinkedIn Profile: https://linkedin.com/in/mehulmpt
  

CHAPTER 1

React 101

JavaScript: It is the programming language of the web. Since the dawn of the web, developers are eager to provide increasingly better experiences for the end-user in terms of interactivity, animations, effects, and stability. JavaScript made it all possible. As it progressed, there were needs for some obvious reasons to introduce frameworks and libraries, for faster development and better stability.

React is one such part of the ecosystem. React sells itself as “A JavaScript library for building user interfaces”. But honestly, while being true to the statement, we think React goes much beyond that. It could be made into a complete ecosystem, powering some of the most complex web application systems, for example, Facebook.

We’ll be quickly going through the React basics and then taking up intermediate to advanced topics, which would really give you the essence of React and eventually help you to start writing your production-ready applications with React.

Very simply speaking, React is a User Interface (UI) library. Let’s break that down:

1. React, on its own says that it’s a library, which means that it does not try to ship everything with it. Instead, you have the option to cherry-pick the things you want in your project and can implement them.
2. React says that it is a UI library, that is used for building interfaces visible to the user. What does that mean? In simple terms, it means creating and maintaining what the user sees on the screen.

Structure

• Introduction
• Understanding React
• Basic understanding of how React works as a UI library
• Declarative versus imperative programming
• Cheat-sheet for further React topics

Objectives

In this introductory chapter, we’ll be understanding what exactly is React doing and why should one care. We’ll be seeing on the surface, how it works as a UI library and how the declarative approach of React is so powerful in creating better UI systems. Finally, we’ll want to get started with React programming, but would end the chapter with some notes that might be handy to see as a JavaScript refresher.

React is component-based

React makes use of components. The ideology is simple - React says that instead of coding everything at the same place (like we usually do while coding simple HTML pages), break different (and usually independent) parts of the page into different components. This increases the code maintainability by factors and allows developers to have faster and clean codebases. We’ll have dedicated chapters on working with components, as it is the crux of React.

React is declarative

We’ll focus mainly on two programming paradigms here -declarative programming and imperative programming. Let’s start with a simple example.

When you write a code, you can specify:

1. What do you want to do?
2. How do you want to do?

If you specify both, you’re making use of the imperative programming practice. If you’re just specifying what you want to do, then you’re using the declarative way of programming. Here’s a simple example.

Consider that you want to draw a border around a box. In CSS, you’d simply say border: 2px solid black. This is declarative. You just said what you want to do, not how you want to do. On the other hand, if you try to draw the border in vanilla JavaScript, you have to specify four coordinates, and then draw the line manually using code. This would be an imperative way.

Declarative programming has its own pros and cons, but the pros almost always outweigh the cons:

1. Declarative code can make use of highly optimized algorithms. Since the “how” is abstracted from the end-user, the imperative model under declarative code can make use of seriously complex code to provide major performance boosts, while exposing an easy declarative way for users to use the same functionality at the same time.
2. Declarative programming brings other benefits like code scalability, reduced bugs, and more understandable code.

Coming back to React, it is declarative. This means that you just tell React “what” you want to do, and not “how” you want to do it. React, under the hood, manages everything for you in a very optimized way.

We will discuss on how the React virtual DOM, reconciliation and other optional advanced stuff works under the hood, in detail, in the last chapter.

Quick JS revision

Before we dive into the React ecosystem, we’d like to put some quick JS things that you should definitely be aware of, while working with React. Let’s take a quick look at this section for now and come back later as you need.

this

this is surprisingly complicated for a lot of people in JavaScript. Keep in mind that in a function, this always refers to how that function is called, except for arrow functions, where this is lexically scoped:

function myName() {

return this.myname

}

const myNameButArrow = () =>console.log(this.myname)

const person1 = { myname: “Mehul”, myName }

const person2 = { myname: “James”, myName }

const person3 = { myname: “Enzo”, myName: myNameButArrow }

console.log(person1.myName())

console.log(person2.myName())

console.log(person3.myName())

The output is showcased in the following screenshot:

Figure 1.1: Output

Arrow functions

Arrow functions allow you to write smaller functions, lexical scoping to this, and cannot be instantiated with a new keyword:

const obj = {

myFunction: function() {

return this

},

coolFunction: () => {

return this

}

}

console.log(obj.myFunction()) // logs the original obj

console.log(obj.coolFunction()) // logs window (global object)

Here we see the same preceding code with its output as showcased below. As stated earlier, the first statement logs the original object, and the second statement logs the whole window object:

Figure 1.2: Output

.map

.map allows you to manipulate an array without mutating the original array -that is, .map works on every element in an array and returns to you a new array, consisting of the elements you return from within the function passed in .map.

Here’s a quick example of how maps would work in this case:

const arr = [{

name: “Mehul Mohan”,

country: “India”

}, {

name: “James Paul”,

country: “USA”

}]

const component = arr.map(name =>arr.name)

console.log(component) // logs [“Mehul Mohan”, “James Paul”]

console.log(arr) // logs original object

The preceding code logs the changed array, as you would expect the map function to do. This, however, does not modify the original array.

.reduce

.reduce allows you to reduce the array to a single value. This is achieved with an accumulator, and the current value it is iterating over. Let’s look at an example to understand:

x = [1,2,3,4,5]

x.reduce((acc, val) => acc + val...

Table of contents

• Cover Page
• Title Page
• Copyright Page
• Dedication
• About the Author
• About the Reviewer
• Acknowledgements
• Preface
• Errata
• Table of Contents
• 1. React 101
• 2. Setting up React
• 3. Components
• 4. Application State Management in React
• 5. Server Side React
• 6. Introduction to Next.js
• 7. More with Next.js
• 8. Progressive Web Apps
• 9. Bleeding Edge React