To use the v2.5 or newer Semantic UI libaray, install the React component of it at https://react.semantic-ui.com.

Follow the instructions on https://react.semantic-ui.com/usage to install both Semantic UI and the CSS. Highlights below:

• Install the React components in the app folder, so make sure to cd client-app in the terminal first.
  • Run npm install semantic-ui-react semantic-ui-css
• Update the ..\client-app\src\index.tsx file, just above the existing index.css import statement to import the Semantic CSS file, which will also allow the index.css file to override any styles from semantic as needed:
  • import 'semantic-ui-css/semantic.min.css';

Remove the header component from App.tsx and in its place add <Header></Header>.

If the intellisense doesn't load, open up the command pallet and do a "Developer: Reload Window". Then try typing again and the automatic import should work.

Add in a vscode extension to allow HTML/XML closing tags to be renamed when the opening tag changes:

• VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Try to resolve all console errors, first by disabling Chrome extensions like Grammerly and Speechify.

Remove the console.log for the API call if desired to reduce noise.

Then remove the React strict mode in ..\src\index.tsx:

root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);