JS. Send PostRequest from Browser Console

first, request get with http://yoururl to exchange headers, then request post
await fetch(
    "http://yoururl",
    {
        method: "POST",
        headers: { "content-type": "application/json", "origin": "same-origin" },
        body: JSON.stringify({
            filter: {
                 ...fields
            },
            pagination: {
                ...fields
            },
            order: [
                ...objs
            ],
        }),
    },
)
Posted in Без рубрики | Leave a comment

React.AddLinterAndPrettier

1-eslint.js

Continue reading
Posted in Без рубрики | Leave a comment

MockServerWorker Example

link

Posted in Без рубрики | Comments Off on MockServerWorker Example

Js.Practice.ToDoList

Project on vite and zustand

Project on react-redux

Posted in Без рубрики | Comments Off on Js.Practice.ToDoList

CSS.Grid

Docs

Basic example

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

all direct descendants will be in grid

Posted in Без рубрики | Comments Off on CSS.Grid

Nginx. How to return json file?

        location / {
            root   html;
            index  index.html index.htm;
        }
		
        location /test {
            try_files $uri /test.json;            
        }	

put test.json near nginx.exe in html folder

Posted in Без рубрики | Comments Off on Nginx. How to return json file?

Js.React.AddEventsOnRender

example

export class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isEnabled: true }
    }

    handleClick = () => {
        this.setState({ isEnabled: !this.state.isEnabled });
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>toggle</button>
                <div>{this.state.isEnabled ? 'Включено' : 'Выключено'}</div>
            </div>
        );
    }
}
Posted in Без рубрики | Comments Off on Js.React.AddEventsOnRender

Js.React.Handling Event in Functional Components

example

export let TestElement = () => {

    const handleClick = () => {
        console.log('Sent');
    }

    return (        
        <button onClick={handleClick}>
            hi, there
        </button>
    )
}
Posted in Без рубрики | Comments Off on Js.React.Handling Event in Functional Components

Js.React.ComponentState

example

import React from 'react';


export class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }

        this.delta = this.delta.bind(this);
    }


    delta() {
        this.setState((prevState, props) => ({
            count: prevState.count + props.increment
        }));

    }


    render() {
        return (
            <div>
                <button onClick={this.delta}>
                    count
                </button>
                <div>
                    count is {this.state.count}
                </div >
            </div>
        )
    }
}

App.js

function App() {
  return (
    <div>
      <Counter increment = {1}/>
    </div>

  );
}
Posted in Без рубрики | Comments Off on Js.React.ComponentState

Js.React.Functional and class style

Both are equivalent

const FunctionalGreeting = (props) => {
    return <div>Hello world from function, {props.name} </div>
}

class ClassGreeting extends React.Component {
    render() {
        return <div>Hello world from class {this.props.name}</div>
    }
}

export const PleaseRender = () => {
    return (
        <div>
            <FunctionalGreeting name="Stanley" />
            <br />
            <ClassGreeting name="Stanley" />
        </div>

    );
}

Posted in Без рубрики | Comments Off on Js.React.Functional and class style