React useState Hook

Working with Array of Objects and Object

another example with delete update

NodeJS and ES6

Bable can transpile ES6 code to JS code that can be processed by Node.

Folder and file structure:

Here is package.json

{
  "name": "node-server-using-es6",
  "version": "1.0.0",
  "description": "Node Server compiles code to ES6 using babel",
  "main": "lib/index.js",
  "scripts": {
    "build": "rimraf build && babel src -d dist",
    "start": "nodemon --exec babel-node src/index",
    "prod": "npm run build && node dist/index.js"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/node": "^7.18.10",
    "@babel/preset-env": "^7.4.2",
    "@babel/register": "^7.4.0",
    "nodemon": "^1.17.5"
    "rimraf": "^3.0.2"
  },
  "dependencies": {
    "express": "^4.18.1"
  }
}

Here is .babelrc

{
  "presets": ["@babel/preset-env"]
}

Here is src/index.js in ES6

import express from 'express';
const app = express();
const PORT = 4000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(4000, () => {
  console.log(`app is running on ${PORT}`);
});

for production npm run build this will populate build folder

for development npm start

Launch Browser in Code

For React project create folder .vscode an in it launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome on localhost:3000",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "userDataDir": "${workspaceFolder}/.vscode/chrome"
        }
    ]
}

This will create separate browser for development.

React callback

Passing function as argument and callback in setState.

import React from 'react';

export default class App extends React.Component {
  state = {
    users: [],
    status: 'initial',
  };

  componentDidMount() {
    this.getUsers();

    this.myCoolFunction('first', 'second', (result) => console.log('yay the result is', result));
    this.myCoolFunction('first', 'second');
  }

  myCoolFunction = ( param1, param2, callback = () => console.log("function is not passed") ) => {
    let result = 'do stuff with ' + param1 + ' ' + param2;
    console.log(callback)
    console.log('just before callback(result)');
    callback(result);
  };

  getUsers = async (id) => {
    setTimeout(() => {
      this.setState({
        status: 'searching',
        users: [],
      });
    }, 3000);

    setTimeout(() => {
      this.setState(
        {
          status: 'done',
          users: [
            { id: 23, name: 'gdfgd' },
            { id: 24, name: 'weqweeq' }
          ],
        },
        () => this.state.users.map((user) => console.log(user.name))
      );
    }, 5000);
  };

  render() {
    if (this.state.status === 'initial') {
      return <div>ini</div>;
    }
    if (this.state.status === 'searching') {
      return <div>searching</div>;
    }
    if (this.state.status === 'done') {
      return (
        <ul>
          {this.state.users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      );
    }
  }
}