DEV Community: Daryl Aranha

Import Node packages in React and React Native.

Daryl Aranha — Wed, 23 Mar 2022 12:46:25 +0000

Do you wish to use packages that are typically used on the backend in your frontend app? Well, you can do it with the help of Browserify.

What is Browserify?

It’s a JavaScript bundler that allows us to use node modules to be compiled to use in the browser. It can also be used to keep track of your own and third-party code.

How do I use it?

In a nutshell, you pass browserify your custom code or an external library, and it takes care of the rest.

Now, for instance, there is a need for a third-party package xml-js in your web app, then you need to follow these sets.

Create a file, say xmlConverter.js

const convert = require(‘xml-js’);
module.exports = convert;

Next, pass this file to browserify with -o option. This -o is used to tell which file will contain the complied code.

$ browserify xmlConverter.js -o xmlComplied.js

This file can now be utilized in your web application. This, however, will not function with native programs. Aakash N S gives detailed instructions on how to do so, or you can continue reading if you don't want to delve into depth. I've built a script that will take care of everything for you, and it will work for both web and mobile apps.

Using Docker Run: (link)

$ cd <project_directory>
$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 <option> <package_name>

Example:

$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 xml-js

Using Terminal: (link)

Clone this repo and run the shell script.

$ chmod +x compiler.sh
$ ./complier.sh <options> <package_name>

Example:

$ ./complier.sh xml-js

Options:

–local: This parameter tells the script whether you're looking for a node package that comes pre-installed. This script tries to install the package using npm by default.

References

Get Infinite Scrolling in just few lines of code!

Daryl Aranha — Thu, 09 Dec 2021 15:43:50 +0000

Do you want to remove bulky packages that perform Infinite scrolling or Lazy loading with just a few lines of code? Then I have something interesting to show you. Introducing Intersection Observer!!!

How does Intersection Observer work?

To put it in simple terms it works like magic 🎊 That's it! Let's move on...

If you want to know more about it then fine!!! It's a web API that takes a callback. This callback is triggered when a target element intersects with either the viewport or a specified element (Lets call it Root Element or Root).

How do I use it?

Create an IntersectionObserver object by passing the callback function and configuration object.

The configuration (also called options) take 3 values. root, rootMargin and threshold and it looks something like this.

// Defining config
let config = {
    root: document.querySelector('#scrollArea'),
    rootMargin: '0px',
    threshold: 1.0
}

// What action needs to be taken
let callback = () => {
    // Here you specify what needs to be done
    // More on this later
}

// Creating an observer object
let observer = new IntersectionObserver(callback, config)

Before we move towards an example let me briefly explain what each value in config does.

Root: It is used as a viewport to check the visibility of the target. By default it takes browser viewport if null is passed.
RootMargin: It's the margin around the root.
Threshold: It is called intersection ratio and has a range from 0.0 to 1.0 with 1.0 being 100% visible of the target within the root.

Now let's talk about the callback. The callback takes one parameter of type array. The reason behind it being an array is because you can add multiple target (entities having same id name) to a single observer. We use the isIntersecting property to decided whether the observable element is visible or not.

Example

Enough explanation and let's move towards an example. You can check out the entire here

...

const App = () => {
    // Create an observer object
    const observer = useRef(null);
    observer.current = new IntersectionObserver(
    (entries) => {
        // entries is of type array
        entries.forEach((entry) => {
        // this will tell if the element is visible or not
        if (!entry.isIntersecting) {
            return;
        }
        // Do something
    })
    }, {
        root: document.querySelector("#App"),
        rootMargin: "0px",
        threshold: 0.3,
    });

    ...

    // ComponentDidMount, Make sure to observe the element after render
    useEffect(() => {
        observer.current.observe(document.querySelector("#observe-this"));
    }, []);

    ...

   return (
        <div className="App">

            ...

            {/* When this div is visible, fetch new data */}
            <div id="observe-this"></div>

            ...

        </div>
    );
};

...

The example above must be self explanatory. If not then let me summarise.

Create an observer object, if its a class based component then add the object creation snippet in the constructor.
While creating an observer you need to pass a callback and an option object. This will tell the Observer the following:
- What needs to be done when an callback is triggered.
- When should the callback be called.
- What is the visible are?
When the component renders, point the element to be observed.

Reference

PropTypes!!! Trust me you need it.

Daryl Aranha — Fri, 15 Oct 2021 09:21:17 +0000

As a developer working with React Components, I noticed developers usually don't think of adding validation to their components, which is fine for a simple application. As the app grows multiple developers start working towards a single goal; there are instances of the applications' stability to get compromised.

One of the reasons for this to happen is using incorrect type or not sending the required values which may result in unexpected behaviour.

Here PropTypes come into picture.

So... What is PropTypes?

To put it in simple terms, it's an added layer of checks to a component’s prop object. In other words, it makes sure we send all the necessary data in the correct type as props.

How do I set it up?

Setup is pretty straight forward. Here’s what you need to do. Open your favourite terminal and run the following commands.

cd <project_directory>
npm install prop-types --save

What’s next? An Example? Sure....

Let me walk you through a simple example which will make things clear. Let's say there is a List component and it does what it says, displays a list. Of what? Hmmm… let's say a list of the first 5 Marvel movies released. (Sorry DC fans.)

This list contains the names of movies and the year it was released.

const movieList = [
  { id: 1, name: "Iron Man", releaseYear: "2008" },
  { id: 2, name: "The Incredible Hulk", releaseYear: "2008" },
  { id: 3, name: "Iron Man 2", releaseYear: "2010" },
  { id: 4, name: "Thor", releaseYear: "2011" },
  { id: 5, name: "Captain America", releaseYear: "2011" }
];

Here is a code snippet that contains an array of objects with the name and release year of the first 5 marvel movies and a functional component that displays those values.

import PropTypes from "prop-types";

...

const movieList = [
  { id: 1, name: "Iron Man", releaseYear: "2008" },
  { id: 2, name: "The Incredible Hulk", releaseYear: "2008" },
  { id: 3, name: "Iron Man 2", releaseYear: "2010" },
  { id: 4, name: "Thor", releaseYear: "2011" },
  { id: 5, name: "Captain America", releaseYear: "2011" }
];

function Movie({ name, year = "Not specified" }) {
  return (
    <div>
      <p>
        <b>Name:</b> {name}
      </p>
      <p>
        <b>Year:</b> {year}
      </p>
      <hr />
    </div>
  );
}

Movie.propTypes = {
  name: PropTypes.string.isRequired,
  year: PropTypes.string
};

...

If you have noticed I have removed all CSS. Why do you ask??? Because I am Batman.

Now, It looks pretty similar to how you would traditionally write but with one small addition at the end. Movie.propTypes allows us to add type checking and forces us to pass the required props.

You can also add Movie.defaultProps which will set the default value, but I didn’t add as JavaScript allows us to add a default value during object destructuring.

Here is how the error would look in the console.

Scenario 1: When the required prop is not passed.

Scenario 2: When the type of the prop do not match.

Don't worry, these errors wont show up in production. It’s meant to be caught during development.

What else can I do with it?

I have shown you the basics on how to get started and with this we have covered the basics and a little bit of intermediate stuffs. There is more to this and you can go through the documentation