Dosya

Услышал на одном из собеседований, как именно и где хранит состояния react

Один из способов хранить состояние это внутри компонента использовать хук useState

Примерно вот так
const [count, setCount] = useState(0);

Есть еще другой способ это глобально хранить данные в сторе.

(+как оно влияет на рендер)

Очень просто если в функцию setCount передать число 1, то это функция обновить count и вызовит рендер

Делаю запрос на сервер и он падает в ошибку и я хочу понять ,что там произошло, как получить статус кода?

const response = await fetch(`${this.webUrl}/checkConnection/`);
console.log(response.status, 'status') //Вот так получают статус

const getPosts = async () => {
    try {
        const res = await fetch('http://jsonplaceholder.typicode.com/posts')
        const data = await res.json()
        console.log(data, 'array')
    } catch (error) {
        console.log(error)
    }
}

getPosts ()

Важно понимать если данные с API приходят в формате JSON. Чтобы JS дальше смог работать с данными нужно парсить в обычный JS массив или объект с помощью метода await res.json()

Если у тебя сервер стоит node js, то используй эту библиотеку ссылка

но она не смотря на то что вызвана или нет отправляет запросы

Функция просто так не может сработать, чтобы функция сработала нужно вызвать, значит ты где-то вызываешь функцию

У тебя html файл не подключен к webpack

Вот готовый конфиги

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    mode: 'production',
    entry: ['@babel/polyfill', path.resolve(__dirname, 'src/index.tsx')],
    output: {
        filename: 'js/vm.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false,
    devServer: {
        port: 3000,
        historyApiFallback: true,
        open: true
    },
    target: 'web',
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js']
    },
    performance: {
        hints: false
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html'),
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/style.css'
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.(tsx|ts)$/,
                exclude: /node_modules/,
                use: ['ts-loader']
            },
            {
                test: /\.(jsx|js)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(css|scss|sass)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.(pdf|png|jpeg|jpg|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                         options: {
                            name: '/assets/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": false,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

.babelbr

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

пакеты

"devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.19.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }

const isClassName = (type) => {
    switch (type) {
        case "file":
            return "input-file";
        case "radio":
            return "input-radio";
        case "password":
            return "input-password";
        case "checkbox":
            return "input-checkbox";
        default:
            return 'input-default'
    }
};

className = {`${classes ? classes : ''} ${isClassName(type)}`}

Функцию isClassName напиши вне компонента

Данная запись означает что есть обще-доступная переменная который присвоен массив, но пока пустой. У этого массива есть тип ListItem

Ты та еще гавнокодер

let [datasDays, setDatasDays] = useState([])

useEffect(()=>{
      fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=58.0105&lon=56.2502&units=metric&exclude=minutely,hourly&lang=RU&appid=7590b58fc327c0300af42791a4390329`)
      .then(response => response.json())
      .then(data =>{    
         setDatasDays(data.daily)
      }, [])
   })

Попробуй это

P.s ты должен понять чтобы в React произошел рендер нужно изменить стейт, а ты неправильно меняешь стейт.
В React у каждого стейта есть своя функция, твоем случае чтобы поменять этот стейт datasDays ты должен перезаписать с помощью функции дать аргумент в эту функциюsetDatasDays

Разбираюсь в теме работы с токенами, не могуть понять, как должна работать авторизация по токенам. Если сервер нам присылает токены через Set-Cookie, мы не можем получить к ним доступ с помощью java script, но для дальнейших запросов нам нужно установить заголовок Authorization: `Bearer ${access_token}`

Можно сделать так хранить токен в куки файлах и особенности куки заключается в том чтобы сервер получил куки файлы не нужно писать заголовки. Не знаю какой у тебя сервер стоит, вот в Node js Express куки файлы можно легко получить через req.cookies и при каждом запросе на сервер ты можешь сделать middleware проверка токена

Попробуй это

import {useState} from "react";

function App() {

    const users = [
        {id: 1, title: 'Dima'},
        {id: 2, title: 'Oleg'},
    ]

    const [user, setUser] = useState(users)

    const addUser = () => {
        const name =  prompt()
        setUser({...users,  id: Date.now(), title: name})
    }

    const usersList = () => {
        return user.map(user => <div>{user.title}</div>)
    }

  return (
    <div className="App">
        <button onClick={addUser}>Click me!</button>
        <br/>
        {usersList()}
    </div>
  );
}

export default App;

<button onClick={() => addUser(prompt())}>Click me!</button>

Вот здесь не надо создовать анонимную функцию и через параментр передать данные из prompt, лучше prompt написать внутри функции

Попробуй метод input.addEventListener('change', () =>{})

Нативный js код лучше добавить в хук useEffect

useEffect(() => {
document.body.onload = function () {
        setTimeout(function () {
            let preloader = document.getElementById('page-preloader');
            if ( preloader.classList.contains('none') ) {
                preloader.classList.add('none')
            }
        }, 1000)
    }
}, [])

const input = document.querySelector('input')

let value = ''

input.addEventListener('change',  () => {
    value = input.value
})

getUsers()
            .then((users) => (this.users = users))
            .then(() => getOrganizations())
            .then((organizations) => (this.organizations = organizations))
            .then(() => this.setState({ loading: false }));

Вот здесь место then лучше использовать await и try catch.

if (this.state.loading) {
      return "Loading...";
    }

    let users = [];

    for (let i = 0; i < this.users.length; i++) {
      const name = this.users[i].name;
      let org;

      for (let j = 0; j < this.organizations.length; j++) {
        if (this.organizations[j].id === this.users[i].organization) {
          org = this.organizations[j].name;
        }
      }

      users.push(
        <div className="user-list-item">
          <div>name: {name}</div>
          <div onClick={() => this.selectOrg(org)}>org: {org}</div>
        </div>
      );
    }

Вот здесь переменные всегда должны быть сверху выше всех

{this.state.selectedOrg && <button onClick={() => this.resetSelectedOrg()}>reset selected org</button>}

Не стоит создавать анонимные функции это плохо влияет на React

for (let j = 0; j < this.organizations.length; j++) {
        if (this.organizations[j].id === this.users[i].organization) {
          org = this.organizations[j].name;
        }
      }

Я одно понять не могу зачем делать такие циклы и использовать как перебор массива, когда есть
for (let i of arr)
Работает как у тебя, но кода будет чище

В целом компомнент не плохой, но написан на классовом компоненте, лучше писать на функиональном компоненте кода будет намного чище

Если тебе лень писать run тогда просто скачай пакет менеджер yarn. У yarn команды немного отличаются, но суть тоже самое и самое главное тебе не нужно постоянно писать run, сам yarn сможет понять и запускать скрипты. Еще один плюс который я хочу отметить то что yarn намного быстрее чем npm