DEV Community: Yann

How to make a recursive component with ReactJS ?

Yann — Thu, 02 Feb 2023 09:38:44 +0000

First of all, what is recursion ? Wikipedia say :

The most common application of recursion is in mathematics and computer science, where a function being defined is applied within its own definition. While this apparently defines an infinite number of instances (function values), it is often done in such a way that no infinite loop or infinite chain of references ("crock recursion") can occur.

If you need to create a tree of directory and folder, or need to parse and display deep tree of data, you are in the good place !

Imagine that we have this Recursive.tsx component :

import RecursiveChildren from "./RecursiveChildren";

function Recursive () {

    type ItemNode = {
        name: string;
        children?: ItemNode[];
    };

    const tree: ItemNode = {
        name: "tree",
        children: [
            {
                name: "fruit",
                children: [
                    {
                        name: "rouge",
                        children: [
                            {
                                name: "cassis",
                            },
                            {
                                name: "fraise",
                                children: [
                                    {
                                        name: "fraise des bois",
                                    },
                                    {
                                        name: "fraise gariguette",
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
            {
                name: "legume",
                children: [
                    {
                        name: "tubercule",
                        children: [
                            {
                                name: "oignon",
                            },
                            {
                                name: "pomme de terre",
                            },
                        ],
                    },
                ],
            },
        ],
    };

    return (
        <div style={{ textAlign: "left" }}>
            <RecursiveChildren name={tree.name} children={tree.children} marginLeft={0}/>
        </div>
    )
}

export default Recursive;

As you can see, the tree data structure can have an infinite of children, so we need to implement a recursive component to browse the whole structure.

You can find a simple example below (RecursiveChildren.tsx):

type ItemNode = {
    name: string;
    children?: ItemNode[];
};

type Indentation = {
    marginLeft: number
}

function RecursiveChildren (props: ItemNode & Indentation) {


    if (props.children && props.children.length > 0) {
        return (
            <div style={{ marginLeft: props.marginLeft }}>
                { props.name }
                { props.children.map(child => {
                    return <RecursiveChildren name={child.name} children={child.children} marginLeft={ props.marginLeft + 20 }/>
                })}
            </div>
        )
    }

    return (
        <div>{ props.name }</div>
    )
}

export default RecursiveChildren;

If children is provided in RecursiveChildren, so we call RecursiveChildren in RecursiveChildren, that's all.

That is it for now ;-)
Cheers!

How to find the biggest square in matrice ?

Yann — Thu, 19 Jan 2023 10:49:46 +0000

Yesterday, in a clash of code on codingGame, I came across the maximal square problem. It was a huge defeat. But, after several hours on this topics I defenitly understand how to become a wizard with dynamic programming:

So, Imagine you have this matrice :

0 1 1 1 0 0 1 1 1 0 0 1 1 1 0

How can you find the biggest square of 1s (with code, of course) ?

First, we can represent the matrice with an array :

const m = [[0,0,0], [1,1,1], [1,1,1], [1,1,1], [0,0,0]]

Then, we can start by write a function like this :

function getSquareSideLength(m, search) {

const rows = m.length
const cols = m[0].length

for (let i = 0; i < rows; i++) {
 for (let j = 0; i < cols; i++) {
 ...
 }
}

Now it's a little more complicated, we need to save the count state between iterations, we need a second matrice. With this second matrice we can follow the solution illustrate below :

In Javascript :

function getSquareSideLength(m,s) {
    // copy must be [[0,0,0,0], [1,1,1,0], [1,1,1,0], [1,1,1,0], [0,0,0,0], [0,0,0,0]]
    const copy = JSON.parse(JSON.stringify(m)).map(c => { c.fill(0).push(0); return c }) // for convenience, we add an extra all zero column and row
    copy[copy.length] = [...copy[copy.length - 1]]
    const rows = m.length
    const cols = m[0].length

    let res = 0

    for (let i = 1; i <= rows; i++) {
        for (let j = 1; j <= cols; j++) {
            if (m[i-1][j-1] == s) {
                copy[i][j] = Math.min(copy[i][j - 1], copy[i - 1][j], copy[i - 1][j - 1]) + 1;
                res = Math.max(res, copy[i][j]);
            }
        }
    }

     return res; 
}

This solution its not perfect but understandable. I you want to have the perfect response of this problem, check the third solution on this article. It would be nice to have the third solution in Javascript, someone can do it ?

How to create a design system with TailwindCss and NuxtJs ?

Yann — Wed, 11 Jan 2023 13:47:26 +0000

Creating a design system is an essential step for building a consistent and well-designed application or website. A design system is a set of reusable rules and components that helps to maintain a consistent visual presentation throughout the application. It can include elements such as colors, typography, buttons, and forms. Using a design system can make the development and maintenance of code easier and also improve user experience.

TailwindCSS and NuxtJS are two popular tools that you can use to create a design system. TailwindCSS is a CSS framework that allows for rapid UI development by providing pre-defined classes. NuxtJS is a JavaScript framework built on top of Vue.js that makes it easy to develop dynamic web applications.

Here are the steps to create a design system with TailwindCSS and NuxtJS:

First, you need to Set up a new NuxtJS project with TailwindCSS

Then, add components: In the components folder of your project, create files for the components you want to use in your design system. Use TailwindCSS classes to style the components. For example, you could create a file Button.vue for a custom button.

Use the components in the pages: Use the components you've created in the pages of your application. In each page file, import the components and use them as normal Vue.js tags to build the UI.

Test and adjust: Before deploying your application, it's important to test all the created components to make sure they are working properly and meeting the design standards you've chosen. It's also recommended to continue to adjust and optimize styles for a better user experience.

Furthermore, you can add some globals css rules in a main.css like this :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  /* ... */
}

You can find more informations about the layer directive on this page.

In conclusion, TailwindCSS and NuxtJS are two powerful tools that can be used to create a design system for your web application. By following the steps above, you can set up a new NuxtJS project, add TailwindCSS, create a Tailwind config file, and add reusable components to create a consistent and visually pleasing design system.

It is important to keep in mind that, like with any other design system, it's an iterative process and some adjustments may need to be made over time to adapt to the project's needs and best practices.

How to start a project with NuxtJS 3 and Tailwindcss ?

Yann — Sat, 07 Jan 2023 10:40:38 +0000

Nuxt.js is a framework for building universal Vue.js applications. It is based on Vue.js, a popular JavaScript library for building web user interfaces, and adds a number of additional features to make it easier to build universal applications.

To start a project with Nuxt.js and Tailwind CSS, you will first need to install the required dependencies.

To install Nuxt.js, you can use the following command :

npx nuxi init <project-name>

To install Tailwind CSS, you can use the following command :

yarn add tailwindcss postcss autoprefixer
npx tailwindcss init

Next, you will need to configure Nuxt.js to use Tailwind CSS. To do this, you will need to add the following to your nuxt.config.js file :

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

This will configure Nuxt.js to include the tailwind.css file in your project's build.

Create ./assets/css/main.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, you will need to create a tailwind.config.js file in the root of your project and configure it to use the styles that you want.

For example, you might add the following to your tailwind.config.js file to use the default styles provided by Tailwind CSS:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

With these steps, you should now have a working Nuxt.js project with Tailwind CSS configured. You can now start building your project!