Forem: Jay Caetano

Introduction and Getting Started with GatsbyJS

Jay Caetano — Wed, 08 Apr 2020 19:49:26 +0000

GatsbyJS is a free, open-source React-based static site generator. It is specifically built with performance in mind and delivers 2-3x fast results as compared to some kind of applications built using different tools.

Pre-Requisites:

Before you start working with Gatsby, it's better to have some prior knowledge of JavaScript, ES6, React and obviously HTML and CSS.

Misconceptions about Gatsby:

It is a general misconception about Gatsby which may be due to the slogan that it’s a static site generator which makes people think, what if we have to use dynamic content? Brace yourselves, everyone, because the answer is YES! You can use dynamic content without any problem in Gatsby.

Get Started:

So now as we know what Gatsby is, let’s get started:

First of all, you should have the latest version of NodeJS installed on your system. If you don’t have Node installed, you can visit the NodeJS website (link provided at the bottom) to install Node.

Now open the terminal and install Gatsby CLI:

npm install -g gatsby-cli

(this command installs Gatsby CLI globally on your system)

Gatsby CLI will help us use specific functionality like creating new website, running development servers and creating production build etc.

Now let’s create a new project using CLI. Run the following command in terminal:

gatsby new gatsby-site-name

This command will generate a new website for us which is ready to run (no configuration required whatsoever) HURRAAAYYY!

Running Development Server:

In order to start the development server, use the following command in terminal:

gatsby develop

It will start a hot-reloading development environment on port 8000. You can access the website using URL: localhost:8000

Project Breakup:

By now you have installed and seen the running demo website. Time to explore the code doesn’t you think! Open project in your favorite text editor, I prefer Visual Studio Code, but you can choose whichever code editor you feel comfortable with.

Notable files/folders and their definitions:

node_modules — contains all of the installed modules and packages
gatsby-config.js — configure options for a Gatsby site, with metadata for the project title, description, plugins, etc.
gatsby-node.js — implement Gatsby’s Node.js APIs to customize and extend default settings affecting the build process
gatsby-browser.js — customize and extend default settings affecting the browser, using Gatsby’s browser APIs
gatsby-ssr.js — use Gatsby’s server-side rendering APIs to customize default settings affecting server-side rendering
src/components — this folder contains the components and some essential components that you need are created by default here like header and layout.
src/images — contains images for your website
src/pages — website pages will reside in this folder

Pages, Routing and Internal page linking:

The most important question that comes to our mind now is how pages and routing work. When you create a new file under the src/pages folder, the file name automatically becomes the path of that page. For example, if the file name is “test_page”, page route will become “localhost:8000/test_page”.

Now next question that comes to our mind is how internal page links work. Although you can use an HTML anchor tag if you have some prior knowledge of React, your answer should be a big NO. If you will use anchor tag, it will destroy the whole purpose of Single Page Application (SPA) as it will reload the page.

Gatsby offers us a very elegant solution for page linking. It has a built-in component which enables linking internal pages and offers a performance boost by using the preloading features. This means if you are on a certain page that contains the Link tag, Gatsby will preload the page defined in that tag for a smooth user experience.

Example:

import React from "react"
import { Link } from "gatsby"

const Page = () => (
<div>
    <p>
      Check out my <Link to="/blog">blog</Link>!
    </p>
    <p>
      {/* Note that external links still use `a` tags. */}
      Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>!
    </p>
  </div>
)

In the example mentioned above, you can see the basic usage of Link tag. In order to use it, you must import the Link component and in the link tag, you must define “to” attribute for the destination link. Link tag offers tons of cool features too like active link class and active link styles etc, but as the scope of this article is just an intro and is meant for beginners so we are not going to discuss them here. You can check out the official Gatsby documentation for more details.

Gatsby Plugins:

Gatsby is designed to be extensible so it offers tons of cool features in the form of plugins. The advantage of using Gatsby plugins is that they offer prepackaged integration into the core Gatsby APIs to save you time and energy, with minimal configuration.

You can install these plugins (https://www.gatsbyjs.org/plugins/) as node packages and add functionality to your website.
Installation and Configuration:

To install the Gatsby plugin, just run the nom install command with the name of the plugin:

npm install --save gatsby-transformer-json

In order to make the plugin work, you also have to add the plugin name in gatsby-config.js file in plugins array.

module.exports = {
  plugins: [`gatsby-transformer-json`],
}

If the plugin take options, you can also define them here too.

Using Third Party Plugins:

Plugins offered by Gatsby are just an added feature, it doesn’t mean that it is mandatory only to use these plugins. If you want to install other third party plugins/packages like axios, lodash etc, you can install and use them too.

Generating files for deployment on the server:

Once your website is created, obviously you want to deploy it on the server. Run the following command in terminal:

gatsby build

Once done, you will find all the files required for deployment in the public directory at the root of the project.

Important Links:

https://www.gatsbyjs.org/
https://www.gatsbyjs.org/docs
https://www.gatsbyjs.org/plugins/
https://nodejs.org/en/download/

React Component Lifecycle

Jay Caetano — Fri, 15 Nov 2019 01:16:50 +0000

Component is a building block of any React application and a React application is composed of multiple components. Lifecycle methods are used to interact with component at different point in the component life.

Generally a React Component’s life cycle can be divided into three categories:

Mounting
Updating
Unmounting

Let’s list down the order in which each life cycle method is called in the above mentioned categories and go through the details of each method later.

Mounting:

During the initialization of the component when the instance of the component is being created and inserted into the DOM, following methods are called in the same order in which they are listed:

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

Updating:

When component is re-rendered due to change in props or state etc, following methods are called:

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

Unmounting:

On unmounting or removal of component from the DOM, only a single React life cycle method is called:

componentWillUnmount()

Lifecycle methods explained:

Now lets discuss in detail React component life cycle methods.

render():

Most important life cycle method and the only method which is compulsory for the react component. It should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

It returns a single element which represents the component during the rendering process and should either be a representation of a native DOM component (e.g. <p/>) or another user-defined component. If nothing should be rendered, it can return null or undefined.

This function will be recalled after any change to the component's props or state.

render() {
    return (
        <div>
            Hello World!
        </div>
    );
}

As mentioned earlier, it should not modify the component state meaning setState() cannot be defined in render(). If you will try to setState() it will keep on calling render again and again which will result in an infinite loop resulting in breaking the application.

componentDidMount():

Invoked immediately after a component is mounted meaning all the elements are rendered correctly. This method can be used for:

Fetching data
Adding event listeners
Manipulating DOM elements
Setting up subscriptions

import React, { Component } from 'react'; 

class App extends Component {
        constructor(props){
        super(props);
        this.state = { data: 'Michael Jordan' } 
    } 

    loadPageData (){
        setTimeout(() => {
                console.log('Our data is fetched'); 
        this.setState({ data: 'Hello…' }) 
        }, 1000) 
    } 

    componentDidMount(){ 
        this.loadPageData();
    } 

    render() { 
        return( <div> {this.state.data} </div> ) 
    } 
}

 export default App;

In the above example we are loading page data once our component is mounted. From the componnetDidMount() life cycle method, we are calling loadPageData() method, we are using setTimeout() to simulate network call. Once the data is fetched, we are using setState() to change state of the component and make it render.

getDerivedStateFromProps():

This method is only for rare use cases where the state depends on changes in props. It is called right before calling the render() method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

shouldComponentUpdate():

This method is also called before render life cycle method only when new props or state are received. It either returns true or false. By default, return value is always true.

It is only added as a life cycle method for performance optimization. This method is not called during the initial render or when the forceUpdate() is called.

getSnapshotBeforeUpdate():

It is called right before the most recent changes to the DOM created by render() method takes effect. For example if we added multiple items to the list and before they are rendered, we want to get the scroll position of the last item of the previous list item, we can use this method to get that position.

This method is not commonly used. Any value retuned from this method will be passed to the componentDidUpdate() life cycle method as a parameter.

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Snapshot value is only passed when there are new items.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}></div>
    );
  }
}

componentDidUpdate():

This method is the update version of ComponentDidMount(). It is called rite after the component update takes place, except the first time when the component is rendered.

componentDidUpdate() takes two arguments as parameters, prevProps and prevState. If the component has also implemented getSnapshotBeforeUpdate(), a third parameter ‘snapshot’ is also passed as parameter to this method.

componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.props.Id !== prevProps.Id) {
    this.reloadData();
  }
}

componentWillUnmount():

This method is called right before when the component is going to be destroyed. In this lifecycle method we perform all the cleanup, like terminating network requests, unsubscribe to subscriptions, resetting timers etc.

setState() should not be called in this method and we are going to destroy our component.

import React, { Component } from 'react'; 
class Timer extends React.Component {
  constructor(props) {
    super(props);   
    this.state = {date: new Date()};
  }
  incrementTime() {   
    this.setState({
      date: new Date()
    });
  }
  componentDidMount() {
    this.timerInterval = setInterval(() => {
      this. incrementTime ();
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this. timerInterval);
  }
  render() {
    return (        
        <div>It is {this.state.date.toLocaleTimeString()}.</div>
    );
  }
}

In this example we can see that we have rendered time interval on page and incrementing it using setInterval(). Now when component will destroy, we are clearing this interval in componentWillUnmount() life cycle method.

I hope you find this useful. If you have any questions or if you think I missed something please add a comment.

If you like this article, please leave a like or a comment.

You can follow me on Twitter or find my other writings on my personal website at jaycaetano.com.