Advanced Web Development with React
eBook - ePub

Advanced Web Development with React

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

Mehul Mohan

Compartir libro
  1. English
  2. ePUB (apto para móviles)
  3. Disponible en iOS y Android
eBook - ePub

Advanced Web Development with React

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

Mehul Mohan

Detalles del libro
Vista previa del libro

Información del libro

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:
    His LinkedIn Profile:

Preguntas frecuentes

¿Cómo cancelo mi suscripción?
Simplemente, dirígete a la sección ajustes de la cuenta y haz clic en «Cancelar suscripción». Así de sencillo. Después de cancelar tu suscripción, esta permanecerá activa el tiempo restante que hayas pagado. Obtén más información aquí.
¿Cómo descargo los libros?
Por el momento, todos nuestros libros ePub adaptables a dispositivos móviles se pueden descargar a través de la aplicación. La mayor parte de nuestros PDF también se puede descargar y ya estamos trabajando para que el resto también sea descargable. Obtén más información aquí.
¿En qué se diferencian los planes de precios?
Ambos planes te permiten acceder por completo a la biblioteca y a todas las funciones de Perlego. Las únicas diferencias son el precio y el período de suscripción: con el plan anual ahorrarás en torno a un 30 % en comparación con 12 meses de un plan mensual.
¿Qué es Perlego?
Somos un servicio de suscripción de libros de texto en línea que te permite acceder a toda una biblioteca en línea por menos de lo que cuesta un libro al mes. Con más de un millón de libros sobre más de 1000 categorías, ¡tenemos todo lo que necesitas! Obtén más información aquí.
¿Perlego ofrece la función de texto a voz?
Busca el símbolo de lectura en voz alta en tu próximo libro para ver si puedes escucharlo. La herramienta de lectura en voz alta lee el texto en voz alta por ti, resaltando el texto a medida que se lee. Puedes pausarla, acelerarla y ralentizarla. Obtén más información aquí.
¿Es Advanced Web Development with React un PDF/ePUB en línea?
Sí, puedes acceder a Advanced Web Development with React de Mehul Mohan en formato PDF o ePUB, así como a otros libros populares de Computer Science y Web Programming. Tenemos más de un millón de libros disponibles en nuestro catálogo para que explores.


Computer Science
Web Programming


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.


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


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 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 }
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 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 = =>
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 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...