Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts
    Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts
    Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts
    Ebook315 pages3 hours

    Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts

    By Mehul Mohan

    ()

    Read preview

    About this ebook

    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.
    LanguageEnglish
    PublisherBPB Online LLP
    Release dateFeb 26, 2020
    ISBN9789389423600
    Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts

    Related to Advanced Web Development with React

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • UNLIMITED

      Create A RESTful Server In Go

      Oct 19, 2021

      Create A RESTful Server In Go
      8 min read

    • UNLIMITED

      Types Of Databases

      Aug 27, 2019

      NoSQL databases provide the performance, scalability and stability that’s required by the modern data-driven apps we interact with these days. But that is where the similarity between NoSQL systems end. In fact, it wouldn’t be wrong to say that the o

      1 min read

    • UNLIMITED

      DJANGO Create A Database-driven Website

      Jun 4, 2019

      The Django web framework was named after the famous guitarist Django Reinhardt and was first created by web developers at a small newspaper in Kansas. The main goals of Django is to enable fast development of complex websites with database needs. It

      7 min read

    • UNLIMITED

      Basic Concepts

      Jul 2, 2019

      A messaging system such as Kafka enables you to send messages between processes, applications and servers. Applications connect to Kafka to send or get data. Strictly speaking, a Kafka ‘topic’ is a unit of storage in Kafka: data in Kafka is stored in

      1 min read

    • UNLIMITED

      Access Your Mac Anywhere

      Nov 8, 2022

      Access Your Mac Anywhere
      2 min read

    • UNLIMITED

      Contributing For Non - Coders

      Jan 10, 2023

      Contributing For Non - Coders
      9 min read

    • UNLIMITED

      Code A Cataloguing Application In Python

      Nov 15, 2022

      Credit: www.djangoproject.com Matt Holder has been a fan of the open source methodology for over two decades and uses Linux and other tools where possible. More featurepacked source code for this project can be downloaded from https://github.com/mat

      8 min read

    • UNLIMITED

      Superposition

      Oct 21, 2019

      Superposition
      2 min read

    • UNLIMITED

      A.i. Coding

      Aug 22, 2023

      A.i. Coding
      16 min read

    • UNLIMITED

      Readers’comments

      Sep 10, 2020

      Readers’comments
      3 min read

    • UNLIMITED

      Password Managers

      Feb 6, 2024

      Password Managers
      14 min read

    • UNLIMITED

      Mind Your Language!

      Apr 4, 2023

      Mind Your Language!
      9 min read

    • UNLIMITED

      End Of Life

      Apr 4, 2023

      MongoDB is popular with developers as it is fast to implement and get running. More than 35,000 companies rely on MongoDB as part of their applications. At the end of April, however, MongoDB 4.2 will reach end of life status, meaning that it will not

      1 min read

    • UNLIMITED

      Rise Of The Robots

      Jan 12, 2021

      Rise Of The Robots
      7 min read

    • UNLIMITED

      Going From RDC To PGC

      Jun 1, 2021

      This month, Arduino guru Jack Purdum, W8TEE, sits in as Guest Columnist. Working with microcontrollers often requires more than a soldering iron … while many microcontroller projects use computer code already written by someone else, it is sometimes

      8 min read

    • UNLIMITED

      MarsEdit 4

      Mar 6, 2018

      MarsEdit 4
      1 min read

    • UNLIMITED

      Welcome

      Dec 1, 2020

      This issue we turn our attention to Blender, the open-source 3D software that I think is fair to say has come of age. Blender has been around for quite some time and has developed a vocal user group who are keen to share their love for their favourit

      1 min read

    • UNLIMITED

      FLASK Web Frameworks

      Jun 4, 2019

      The main focus of Python has always been to get you cracking on with your coding – the language was never made for web programming. However, this has just made it more interesting to extend the language for the web, or to create an interface to web-b

      9 min read

    • UNLIMITED

      Hashtagsearches.com

      Jun 3, 2019

      Hashtagsearches.com
      2 min read

    • UNLIMITED

      Ten Of The Best…

      Nov 21, 2019

      MacPaw’s own maintenance suite is a force to be reckoned with. It can uninstall unwanted apps, erase system junk and keep your Mac running in tiptop condition. This extremely popular Mac monitoring tool is great for checking on the health of your bat

      1 min read

    • UNLIMITED

      RapidWeaver Classic

      Aug 23, 2022

      RapidWeaver Classic
      3 min read

    • UNLIMITED

      It’s Collabora time!

      May 2, 2023

      It’s Collabora time!
      8 min read

    • UNLIMITED

      1Password 8

      Nov 9, 2021

      1Password 8
      2 min read

    Related categories

    Reviews for Advanced Web Development with React

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Advanced Web Development with React - Mehul Mohan

      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:

      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.

      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:

      What do you want to do?

      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:

      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.

      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, 0)

      In the preceding example, reduce accepts a function thatis called every time with two values: the accumulator, and the current value. Whatever you return from the function, becomes the accumulator value for the next function call. Optionally, you can pass the initial accumulator value as the second argument to the .reduce function. This, if not present, would initialize the accumulator with the first element in the array, and would start reducing the array from the second value.

      Classes

      Classes in ES6 is merely syntactic sugar for functions. JavaScript is not OOP. It follows the prototypal inheritance model, and that’s what classes do as well. Although, the proposed syntax makes it look very similar to OOP.

      Here’s an example of ES6 class:

      class ILoveNumbers {

      constructor(num) {

      this.anothernum = num

      }

      getNum() {

      console.log(this.anothernum)

      }

      };

      class IHateNumbers extends ILoveNumbers {

      constructor(num) {

      super(num**num)

      this.num = num

      }

      getNum() {

      console.log(this.num)

      }

      getNumFromParent() {

      console.log(super.getNum())

      }

      };

      let obj = new IHateNumbers(5)

      obj.getNum() // 5

      obj.getNumFromParent() // 3125

      Some important points to note aboutthe preceding code:

      Here we created a simple class called ILoveNumbers, which just stores a number.

      We created another class,IHateNumbers, which extends from our previous class. Extending in class-based syntax merely means that you’re adding the parent class (function) to the prototypal chain of the current class (function).

      We make use of a special keyword, called super. Using super, we can access the parent class. Remember, when using super in a method, super refers to the prototype chain of the object it was defined with. Thismeans, if I change the prototype chain of IHateNumbers to something else, the super.getFav() should not work as expected. Consider the following code:

      class C1{ method() { return 1 } }

      class C2 extends C1{ method() { return super.method() } }

      class C3{ method() { return 3 } }

      class C4 extends C3{ method() { return 4 } }

      const obj = new C4

      console.log(obj.method()) // outputs 4

      C4.prototype.method = C2.prototype.method

      console.log(obj.method()) // outputs 1

      Here you can clearly see that super.method() does not call the method of C3., Instead, it calls the method of C1. However, if you would have defined the method of C4 to return super.method(), it would call the method of C3.

      Closures

      Closure is a fundamental concept implemented in JavaScript that is extremely powerful and beautiful at the same time. To define closure in one line,:the function remembers. We have a common understanding as a Computer Scientist that when functions return, they remove all the local variable information associated with them. This is changed when you use a closure. For example, consider the following piece of code:

      function a() {

      let value = 1

      return () => value++

      }

      const func = a()

      func() // 1

      func() // 2

      func() // 3

      In the preceding function, we can see that although value is a local variable, it is not destroyed when the execution of function a is completed. Instead, the function

      Enjoying the preview?
      Page 1 of 1