Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

React Suite

Getting Started with React Development with the React Suite Library — Divider, Placeholder, and Progress Bar

Post author By John Au-Yeung
Post date January 11, 2021
No Comments on Getting Started with React Development with the React Suite Library — Divider, Placeholder, and Progress Bar

closeup photo of yellow Labrador retriever puppy

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Divider

We can add a divider into our app with the Divider component.

For instance, we can write:

import React from "react";
import { Divider } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <p>hello</p>
      <Divider />
      <p>world</p>
    </div>
  );
}

to add a divider between the 2 p elements.

We can add a divider with text:

import React from "react";
import { Divider } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Divider>Divider</Divider>
    </div>
  );
}

It’ll be shown in the middle of the divider.

We can add vertical dividers with the vertical prop:

import React from "react";
import { Divider } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <span>Edit</span>
      <Divider vertical />
      <span>Update</span>
      <Divider vertical />
      <span>Save</span>
    </div>
  );
}

Progress Bar

We can add a progress bar with the Progress module.

For instance, we can write:

import React from "react";
import { Progress } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Progress.Line percent={30} status="active" />
    </div>
  );
}

to add a progress bar.

percent is the progress percentage.

status has the color of the bar.

We can hide the percentage display on the right with showInfo set to false :

import React from "react";
import { Progress } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Progress.Line percent={30} status="active" showInfo={false} />
    </div>
  );
}

Also, we can add a progress circle with the Progress.Circle component:

import React from "react";
import { Progress } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Progress.Circle percent={30} strokeColor="#ffc107" />
    </div>
  );
}

Placeholder

We can add placeholders into our app with the Placeholder module.

For instance, we can write:

import React from "react";
import { Placeholder } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Placeholder.Paragraph style={{ marginTop: 30 }} graph="circle" />
    </div>
  );
}

to add a paragraph placeholder.

We set graph to 'circle' to add a circle on the left side.

We can also set it to 'square' and 'image' .

Also, we can add a grid placeholder with Placeholder.Grid :

import React from "react";
import { Placeholder } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Placeholder.Grid rows={5} columns={6} active />
    </div>
  );
}

We can add a graph placeholder with Placeholder.Graph :

import React from "react";
import { Placeholder } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Placeholder.Graph active />
    </div>
  );
}

Conclusion

We can add dividers, progress bars, and placeholders into our app with React Suite.

React Suite

Getting Started with React Development with the React Suite Library — Modal

Post author By John Au-Yeung
Post date January 11, 2021
No Comments on Getting Started with React Development with the React Suite Library — Modal

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Modal

We can add a modal into our React app with the Modal component.

For instance, we can write:

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We create the show state with the open function to set it to true and the close function to set it to false .

In the Modal component, we have the show prop set to the show state to control whether the modal is shown.

We pass the close function to all the button’s onClick props to close the modal when we click them.

Modal.Header has the header.

Modal.Title has the title.

Modal.Body has the body.

Modal.Footer has the modal footer.

We can disable the backdrop with the backdrop prop set to false :

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} backdrop={false}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

The size of the modal can be changed with the size prop:

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} size="xs">
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We set it to xs to set it to the smallest size.

Other options includes sm for small, md for medium, and lg for large.

The full prop will make it large.

Conclusion

We can add a modal into our React app with React Suite.

React Suite

Getting Started with React Development with the React Suite Library — Modal

Post author By John Au-Yeung
Post date January 11, 2021
No Comments on Getting Started with React Development with the React Suite Library — Modal

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Modal

We can add a modal into our React app with the Modal component.

For instance, we can write:

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We create the show state with the open function to set it to true and the close function to set it to false .

In the Modal component, we have the show prop set to the show state to control whether the modal is shown.

We pass the close function to all the button’s onClick props to close the modal when we click them.

Modal.Header has the header.

Modal.Title has the title.

Modal.Body has the body.

Modal.Footer has the modal footer.

We can disable the backdrop with the backdrop prop set to false :

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} backdrop={false}>
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

The size of the modal can be changed with the size prop:

import React, { useState } from "react";
import { Modal, ButtonToolbar, Button, Paragraph } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [show, setShow] = useState();
  const open = () => {
    setShow(true);
  };

  const close = () => {
    setShow(false);
  };
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open</Button>
      </ButtonToolbar>
      <Modal show={show} onHide={close} size="xs">
        <Modal.Header>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>hello </Modal.Body>
        <Modal.Footer>
          <Button onClick={close} appearance="primary">
            Ok
          </Button>
          <Button onClick={close} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

We set it to xs to set it to the smallest size.

Other options includes sm for small, md for medium, and lg for large.

The full prop will make it large.

Conclusion

We can add a modal into our React app with React Suite.

JavaScript Best Practices

Why Should We Be Careful of JavaScript Type Coercion?

Post author By John Au-Yeung
Post date January 10, 2021
No Comments on Why Should We Be Careful of JavaScript Type Coercion?

Type coercion can be a convenience feature or a trap in JavaScript. Learn why here.

Since JavaScript is a dynamically typed programming language, data types of objects and variables can change on the fly. This a problem that we’ll face often as we write more and more JavaScript programs. There’re a few things to be aware of with type coercion, which is the conversion of data types on the fly during program execution.

Type Coercion

As we mentioned, type coercion is the changing of data types on the fly. It happens when data doesn’t match the expected type. For example, if we want to manipulate numbers and string with numbers, we can write:

2*'5'

and we get back 10.

This may seem like a great convenience feature, but it also sets up lots of traps we can fall into. For example, if we have:

1 +'1'

We get:

"11"

which isn’t what we want.

JavaScript has type coercion also because the language originally didn’t have exceptions, so it returns some values for doing invalid operations. Examples of these values include Infinity or NaN , which are return when we divide a number by 0 or try to convert something that doesn’t have numerical content to a number respectively.

NaN stands for not a number.

For example, we get that:

+'abc'

if NaN since it tries to convert the string 'abc' into a number unsuccessfully, so instead of throwing an exception, it returns NaN .

More modern parts of JavaScript do throw exceptions. For example, if we try to run:

undefined.foo

Then we get ‘Uncaught TypeError: Cannot read property ‘foo’ of undefined.’

Another example would be mixing number and BigInt operands in arithmetic operations:

6 / 1n

Then we get ‘Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions.’

How Does JavaScript Type Coercion Work?

Type coercion is done within the JavaScript interpreter. There’re functions built into almost all browsers to do this. We have the Boolean for converting values to boolean, Number to convert values to numbers and so on.

Avoiding Type Coercion Traps

To avoid falling into traps caused by type coercion, we should check the type of the object and convert it to the same type before operating on them.

Number

For example, we use the Number function to convert anything into numbers. For example, we can use it as follows:

Number(1) // 1
Number('a') // NaN
Number('1') // 1
Number(false) // 0

The Number function takes an object of any type as the argument and tries to convert it to a number. If it can’t, then it’ll return NaN .

We can also use the + operator in front of a variable or a value to try to convert it to a number. For example, we can write:

+'a'

Then we get NaN . If we write:

+'1'

Then we get 1.

String

To convert objects to a string, we can use the String function. It also takes an object and tries to convert it into a string.

If we pass in an object, we get back:

"[object Object]"

For example, writing:

String({})

will get us that.

Primitive values will get us the string with the same content as the primitive value. For example, if we write:

String(123)

We get “123” .

All Objects other than ones we specifically remove the prototype from will have a toString method.

For example, if we write:

({}).toString()

We get “[object Object]” back.

If we write:

2..toString()

Then we get back “2” . Note that we have 2 dots since the first dot designates the number as a number object and then the second dot lets us call methods on the number object.

Other weird conversions involving strings that can’t be explained with reason include:

`"number" + 1 + 3        // 'number13'
1 + 3 + "number"        // '4number'
"foo" + + "bar"         // 'fooNaN'
`{}+[]+{} // '[object Object][object Object]'
`!+[]+[]+![]             // '`truefalse'
`[] + null + 2           // 'null2'`

`Symbol.toPrimitive`

Objects also have the Symbol.toPrimitve method that converts an object to a corresponding primitive value. It’s called when the + unary operator is used or converting an object to a primitive string. For example, we can write our own Symbol.toPrimitive method to convert various values to a primitive value:

let obj = {
    [Symbol.toPrimitive](hint) {
        if (hint == 'number') {
            return 10;
        }
        if (hint == 'string') {
            return 'hello';
        }
        if (hint == 'true') {
            return true;
        }
        if (hint == 'false') {
            return false;
        }
        return true;
    }
};
console.log(+obj);
console.log(`${obj}`);
console.log(!!obj);
console.log(!obj);

Then we get:

10
hello
true
false

from the console.log statements at the bottom of our code.

Avoid Loose Equality

Loose equality comparison is done by the == operator. It compares the content of its 2 operands for equality by converting to the same type before comparison. For example,

1 == '1'

will evaluate to true .

A more confusing example would be something like:

1 == true

Since true is truthy, it’ll be converted to a number first before comparing them. So true will be converted to 1 before comparing, which makes the expression true.

To avoid a confusing situation like this, we use the === comparison operator instead.

Then

1 === '1'

and

1 === true

will both be false , which makes more sense since their types are different. No type coercion will be done by the === operator on the operands. Both the type and content are compared.

Comparison issues we mentioned above apply to primitive values. Object are compared by their reference so if the operands have a different reference then it evaluates to false no matter which operator we use.

With these functions, we converted our variables and values to the type we explicitly have written. It makes the code much more clear and we don’t have to worry about the JavaScript interpreter trying to convert things into a type that we don’t want. Also, we should use the === operator instead of the == operator to compare primitive values.

React Suite

Getting Started with React Development with the React Suite Library — Message and Loading Spinner

Post author By John Au-Yeung
Post date January 10, 2021
No Comments on Getting Started with React Development with the React Suite Library — Message and Loading Spinner

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Message

We can add a message box with the Message component.

For instance, we can write:

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Message description="Information" />
    </div>
  );
}

The description prop has the text content of the message.

We can set the type prop to change the background color of the message:

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Message type="success" description="Information" />
    </div>
  );
}

We can add HTML content to the description prop:

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Message
        type="success"
        description={
          <p>
            Information
            <br />
            <a href="http://yahoo.com">This is a Link.</a>
          </p>
        }
      />
    </div>
  );
}

We can add the title prop to set its title:

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Message
        type="success"
        title="Title"
        description={
          <p>
            Information
            <br />
            <a href="http://yahoo.com">This is a Link.</a>
          </p>
        }
      />
    </div>
  );
}

We add the showIcon prop to let us show an icon on the lefty side:

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Message
        showIcon
        type="info"
        title="Information"
        description="More information"
      />
    </div>
  );
}

The icon is determined by type .

We can make it closable with the closable prop:

import React from "react";
import { Message } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Message
        closable
        type="info"
        title="Information"
        description="More information"
      />
    </div>
  );
}

Loader

We can add a loading icon with the Loader component.

For instance, we can write:

import React from "react";
import { Loader } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Loader />;
    </div>
  );
}

We can set the size prop to set the size of the loading icon:

import React from "react";
import { Loader } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Loader size="lg" />;
    </div>
  );
}

xs is extra small, sm is small, md is medium, and lg is large.

The speed of the spinning can be changed with the speed prop:

import React from "react";
import { Loader } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Loader size="lg" speed="fast" />;
    </div>
  );
}

speed can also be 'normal' or 'slow' .

We can add the backdrop and vertical props to center the loading spinner on the page:

import React from "react";
import { Loader } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <Loader backdrop vertical />
    </div>
  );
}

Conclusion

We can add a message box and loading spinner into our React app with React Suite.