>Digital-flame

Project on vite and zustand

Project on react-redux

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

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

put test.json near nginx.exe in html folder

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>
        );
    }
}

example

export let TestElement = () => {

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

    return (        
        <button onClick={handleClick}>
            hi, there
        </button>
    )
}

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>

  );
}

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>

    );
}

Rendered objects are immutable. Every rendered object like a frame from the movie.

It renders only those parts that have changed.

let doSmth = () => {
  return new Promise((resolve, reject) => {    
    if (Math.random() > 0.5) {
      resolve('doSmth success');    
    }
    else
    {
      reject('doSmth Fail');    
    } 
  });    
}

let doSmthElse = async () => {
    return await new Promise((resolve, reject) => {
        if (Math.random() > 0.5) {
            resolve('doSmthElseSuccess')    
          }
          else
          {
            reject('doSmthElseFail');    
          }         

    })
}

// -- CHAIN

(async () => {
    try {
      let resSmth = await doSmth();
      console.log('res = ' + resSmth);
      let resSmthElse = await doSmthElse();
      console.log('resSmthElse = ' + resSmthElse);    
    } catch (e) {
        console.log(e);
    }
})();