If we prefer to use classes, we can use the class-based components API that comes with Vue.

In this article, we’ll look at how to developing Vue apps with class-based components.

TypeScript, Superclasses, and Mixins

We can add props and inherit superclass components with the mixins method in our Vue TypeScript project.

For instance, we can write:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template><script lang="ts">
import Vue from "vue";
import Component, { mixins } from "vue-class-component";const GreetingProps = Vue.extend({
  props: {
    name: String,
  },
});@Component
class Super extends Vue {
  lastName = "smith";
}@Component export default class HelloWorld extends mixins(GreetingProps…

Throttling and debouncing let us slow down the running of code in different ways.

Debounce means we run a piece of code after a given timeout interval.

Throttling means that we don’t let a piece of code run more than one in a given period.

In this article, we’ll look at how to add throttle and denounce to our React components created with React hooks.

Debounce

We can run a piece of code once after a given time interval by adding a timer to throttle the number of times a piece of code runs within a period.

For example, we can…

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a grocery list app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app grocery-list

with NPM to create our React project.

We need the uuid to let us create unique IDs for our to-do items easily.

To add it, we run:

npm i uuidv4

Create the Grocery List App

To create the grocery list app, we write:

import { useState } from "react"; import { v4 as uuidv4 }…

Formik is a library that makes form handling in React apps easy.

In this article, we’ll look at how to handle form inputs with Formik

Dependent Fields

We can set one field’s value based on a value of another field.

For instance, we can write:

import React from "react";
import { Formik, Field, Form, useField, useFormikContext } from "formik";const MyField = (props) => {
  const {
    values: { textA },
    touched,
    setFieldValue
  } = useFormikContext();
  const [field, meta] = useField(props);  React.useEffect(() => {
    if (textA.trim() !== "" && touched.textA) {
      setFieldValue(props.name, `textA: ${textA}`);
    }
  }, [textA, touched.textA, setFieldValue, props.name]); return…

The useCallback and useMemo hooks are 2 more advanced hooks that are added in addition to the basic useState and useEffect hooks.

They’re both useful in different ways.

In this article, we’ll look at how to use the useCallback and useMemo hooks in our React components.

useCallback

The useCallback hook is used for memoizing callbacks that we may call multiple times.

Using the useCallback hook, we can cache callbacks that are in a component so that they won’t be created more than once unless a state or prop changes.

For instance, instead of writing:

import React from "react";export default function…

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a to-do list app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app todo-list

with NPM to create our React project.

We need the uuid to let us create unique IDs for our to-do items easily.

To add it, we run:

npm i uuidv4

Create the To-Do App

To create the to-do list app, we write:

import { useState } from "react"; import { v4 as uuidv4 }…

If we prefer to use classes, we can use the class-based components API that comes with Vue.

In this article, we’ll look at how to developing Vue apps with class-based components.

Mixins

We can create mixins for Vue class-based components with the mixins function.

For instance, we can write:

<template>
  <div>
    <p>{{ hello }} {{ world }}</p>
  </div>
</template><script>
import Vue from "vue";
import Component, { mixins } from "vue-class-component";@Component
class Hello extends Vue {
  hello = "Hello";
}@Component
class World extends Vue {
  world = "World";
}@Component export default class HelloWorld extends mixins(Hello, World) { created()…

Formik is a library that makes form handling in React apps easy.

In this article, we’ll look at how to handle form inputs with Formik.

Checkboxes

We can bind checkbox values to states with Formik.

For instance, we can write:

import React from "react";
import { Formik, Form, Field } from "formik";export const FormExample = () => (
  <div>
    <Formik
      initialValues={{
        toggle: false,
        checked: []
      }}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ values }) => (
        <Form>
          <label>
            <Field type="checkbox" name="toggle" />
            {`${values.toggle}`} …