Тигран Абрамян

function App() {
  const [ startupData, setStartupData ] = React.useState([]);

  React.useEffect(() => {
    fetch('http://localhost:8080/api/v1/startup')
      .then(res => res.json())
      .then(data => setStartupData(data))
      .catch(err => console.error('Err: ', err));
  }, []);

  if (startupData?.length === 0) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      <table border="2">
        <thead>
          <tr>
            <td>startup_id</td>
            <td>startup_name</td>
            <td>startup_descr</td>
            <td>startup_price</td>
          </tr>
        </thead>

        <tbody>
          {startupData?.map(startup => (
            <tr key={startup.startup_id}>
              <td>{startup.startup_id}</td>
              <td>{startup.startup_name}</td>
              <td>{startup.startup_descr}</td>
              <td>{startup.startup_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

не понимаю как преобразовать this.State в useState.

читайте, поймете

заходим в переводчик и переводим

React component names must start with an uppercase letter

и идем менять название компонента на InputTweet

нет смысла использовать реакт если вы к контенту обращаетесь через .querySelector вместо этого создайте хук useState храните в нем ваше значение и используйте переменную где хотите. При необходимых ситуациях можно и изменять это значение

пример создания и использования
const [ text, setText ] = React.useState('Text1');

<h3 className='text'>{text}</h3>

если нужно изменять просто напишите
setText('новый текст');

да и не помешало бы чтения документации секции хуков

если не используются какие-нибудь хуки например useStateили useEffect то можно и не подключать

Очень странным мне кажется такой подход.

Не странно, не волнуйтесь В реакте используется именно такой подход.

const [value, setValue] = useState('');
const [text, setText] = useState('');

const handleChange = (e) => setValue(e.target.value);
const handleClick = () => setText(value);

<p>{text}</p>

<input type="text" onChange={e => setForm({ ...form, login: e.target.value })} />
<input type="text" onChange={e => setForm({ ...form, password: e.target.value })} />

import React, { useState } from 'react';

const SelectTaxon = (props) => {
  const [isShown, setIsShown] = useState(true);

  const toggleFIeldset = () => setIsShown(!isShown);

  let selectTaxonCheckbox = props.selectTaxonData.map((input) => (
    <InputCheckbox
      id={input.id}
      htmlFor={input.htmlFor}
      title={input.title} />
  ))


  return (
    <div className={styles.taxon}>
      <h2 className={styles.h2} onClick={toggleFIeldset}>Назва Таксону</h2>
      {isShown &&
        <fieldset className={styles.fieldset + ' ' + styles.fieldsetActive}>
          <legend className={styles.legend}>Охоронний статус</legend>
          {selectTaxonCheckbox}
          <legend className={styles.legend + ' ' + styles.legendTaxon}>
            Джерело даних
          </legend>
        </fieldset>
      }
    </div>
  )
}

У вас в файле AnswersList/AnswersList.js неправилно импортирван реакт
Правильнее
import React from 'react';

Без разницы сколько переменных, используем useState бесконечное количество раз.

const [num, setNum] = useState(0);
const [text, setText] = useState('no');
const [textUpper, setТextUpper] = useState('HELLO');

const changeState = () => {
  setNum(num + 1);
  setText('yes');
  setТextUpper('BYE');
}

Либо можем создать обьект

const [data, setData] = useState({
  num: 0,
  text: 'no',
  textUpper: 'HELLO'
});

Либо можем использовать useReducer.

Для таких целей правильнее использовать приватный роут.

import React from 'react';
import { Route, Redirect, useLocation } from 'react-router-dom';

export const PrivateRoute = (props) => {
  const token = localStorage.getItem("myToken");
  const location = useLocation();

  if (token) {
    return <Route {...props} />
  }

  return (
    <Redirect to={{ pathname: '/', state: { from: location } }} />
  );
};

// Use Private Route
import { PrivateRoute } from './PrivateRoute';
import { Home } from './Home';

<PrivateRoute path="/home">
  <Home />
</PrivateRoute>

Как лучше писать на React? Используя React Hooks или классы?

Допустим Logo(js\css) перекинуть в папку Logo и тд

Так и нужно.

В свое время читала на хабре что некоторые разработчики создают одну папку Header, и сваливают туда все компоненты

Во время создания реакта в 2013?

Первый способ более структурированный.

import React, { useEffect } from 'react';

export default function GetContent() {

  const GetData = () =>  {
    ...
  };

  useEffect(() => {
		GetData().then(res => console.log(res));
  }, []);

  return (
    <div>
      	
    </div>
  )
}