1.10.14. fejezet, React

Beküldte pzoli - 2023, február 15 - 2:50du

Kapcsolódó hivatkozások

Kezdő lépések

Alkalmazás inicializálása

npx create-react-app my-react-app --template typescript
cd my-react-app

Itt a react-scripts könyvtárban '6 high severity vulnerabilities' van, ezt lekezelhetjük.

PrimeReact

npm install primereact primeicons

Hibakeresés VSCode-ban

A launch.json tartalma legyen az alábbi:

{
    "version": "0.2.0",
    "configurations": [
        {
            "command": "npm start",
            "name": "Run npm start",
            "request": "launch",
            "type": "node-terminal"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug React Run",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

Először indítsd el "Run npm start"-al a react alkalmazást, majd "Debug React Run"-al a böngészőben a hibakeresést.

Proxy használata

npm install http-proxy-middleware --save

Az src könyvtárba másoljuk be a setupProxy.js fájlt a következő tartalommal:

const { createProxyMiddleware } = require('http-proxy-middleware');
 
module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8080',
            changeOrigin: true,
        })
    );
};

Ez beállítja a proxy útvonalakat, nem kell importálni a modult sehova!

Dupla renderelés kikapcsolása

Távolítsd el az index.tsx-ből a React.StrictMode-ot

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Így működik:

root.render(
  <App />
);

Why is my useEffect hook running twice in react.