Perguntas[reactjs](coding)

Estou trabalhando em um projeto React baseado em Vite. Quero adicionar Tailwind CSS e, após seguir os passos abaixo, estou encontrando um erro.

1. npm install -D tailwindcss postcss autoprefixer

Inicializar Tailwind CSS

2. npx tailwindcss init -p

O primeiro comando foi executado sem erros. No entanto, o segundo comando resultou no seguinte erro:

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\HelloWorld\AppData\Local\npm-cache\_logs\2025-02-14T17_30_29_652Z-debug-0.log

Eu tentei limpar o npm,

Clear npm Cache

Ainda não funcionou. O mesmo erro ocorreu ao executar o segundo.

Estou tentando entender como useParams funciona no React Router. Tenho duas rotas — uma com um parâmetro dinâmico e outra com um curinga (*).

O que devo fazer para obter o

 //   {
  //     "appId": "appid",
  //     "*": "page2"
  // }

Tenho duas rotas:

/appid/página2

/appid/página3

Aqui está minha configuração: https://codesandbox.io/p/sandbox/react-router-v6-forked-sw5ndw?file=%2Fsrc%2FApp.js%3A1%2C1-69%2C1

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
  Link,
  useParams,
} from "react-router-dom";

import "./styles.css";

function HomePage() {
  return <div className="page">🏠 Page</div>;
}
function Page1() {
  return <div className="page">🏠 Page1</div>;
}
function Page2() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": ""
  // }
  return <div className="page">🏠 Page2</div>;
}
function Page3() {
  console.log(useParams());
  //   {
  //     "appId": "appid",
  //     "*": "page3"
  // }
  return <div className="page">🏠 Page3</div>;
}
function Application() {
  return (
    <>
      1
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/page3" element={<Page3 />} />
      </Routes>
    </>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/" className="link">
          Home
        </Link>
        <Link to="/appid/page2" className="link">
          APP Page 2
        </Link>
        <Link to="/appid/page3" className="link">
          APP Page 2
        </Link>
      </div>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path=":appId/*" element={<Application />} />
      </Routes>
    </BrowserRouter>
  );
}

Estou trabalhando em um projeto Vite + React + TypeScript e usando ESLint com a seguinte configuração:

Configuração ESLint relevante (.eslintrc.json)

{
  "extends": [
    "eslint:recommended",
    "airbnb/hooks",
    "airbnb-typescript",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react-hooks/exhaustive-deps": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "import/order": [
      "error",
      {
        "groups": [["external", "builtin"], "internal", "parent", "sibling", "index"],
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": { "project": "./tsconfig.json" }
    }
  }
}

Emitir:

Quando executo ESLint ( eslint . --ext .ts,.tsx), não recebo erros , mas alguns dos meus colegas de equipe (que usam Windows) veem vários erros de linting.

Diferenças ambientais:

• Eu: macOS (sem erros ESLint)

• Colegas de equipe: Windows (vendo erros ESLint)

Poderia ser um problema com resolução de caminho, terminações de linha ( LFvs. CRLF) ou diferenciação de maiúsculas e minúsculas ? Qualquer informação seria útil!

O que eu tentei:

• Garantiu que todos os companheiros de equipe tivessem a mesma node_modulesversão eslint.

• Excluído node_modulese package-lock.json, depois reinstalado ( npm install).

• Configurações globais do ESLint verificadas (ESLint global desabilitado).

• Usando o VS Code apenas com ESLint e Prettier habilitados.

• Executando o ESLint manualmente (fora do VS Code).

Contexto: Estou construindo algumas bibliotecas para me ajudar a construir um portal com microfrontends. Tenho uma biblioteca ui (com componentes ui), uma biblioteca commons (usa ui, tem componentes compartilhados para todos os microfrontends), uma biblioteca renderer (usa ui, é usada para renderizar dados strapi). Todas elas usam tailwind css.

Problema: Quando eu uso um componente da biblioteca commons que aceita filhos, os breakpoints do componente usado como filho não estão funcionando. Se eu usar o mesmo componente fora do componente commons, os breakpoints funcionam. Por exemplo:

<CommonsComponent>
  <ComponentWithBreakpoint /> // breakpoints do not work
</CommonsComponent>

<ComponentWithBreakpoint /> // breakpoints work

Olhando as ferramentas de desenvolvimento, posso ver que a classe com o ponto de interrupção não está sendo aplicada (lg:flex-row de layout.css):

A classe flex-col também vem de um arquivo diferente (page.css)

Os componentes são:

const CommonsComponent = ({children}: {children: React.ReactNode}) => {
return (<div className="flex flex-col gap-4 w-full lg:w-[70%]">
  {children}
</div>)
} //from the commons library

const ComponentWithBreakpoint = () => {
return (
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2 w-full">
  //content
</div>
)} // from one of the microfrontends

Eu estava seguindo um tutorial: https://www.youtube.com/watch?v=R4AhvYORZRY&t e me deparei com um problema, onde <LinkContainer />me deram esse erro, excluí-lo, corrigi-lo, adicionar o roteador ao aplicativo ou cabeçalho apenas me disse que já era um roteador.

O código para o LinkContainer, encontrado aqui:

https://www.npmjs.com/package/react-router-bootstrap?activeTab=code

var LinkContainer = function LinkContainer(_ref) {
var children = _ref.children,
    onClick = _ref.onClick,
    _ref$replace = _ref.replace,
    replace = _ref$replace === void 0 ? false : _ref$replace,
    to = _ref.to,
    state = _ref.state,
    _ref$activeClassName = _ref.activeClassName,
    activeClassName = _ref$activeClassName === void 0 ? 'active' : _ref$activeClassName,
    className = _ref.className,
    activeStyle = _ref.activeStyle,
    style = _ref.style,
      getIsActive = _ref.isActive,
     props = _objectWithoutProperties(_ref, _excluded);

  var path = _typeof(to) === 'object' ? to.pathname || '' : to;
  var navigate = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_1__.useNavigate)();
  var href = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_1__.useHref)(typeof to === 'string' ? {
   pathname: to
  } : to);

principal.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";
import App from "./App.jsx";
import HomeScreen from "./screens/HomeScreen.jsx";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route index={true} path="/" element={<HomeScreen />} />
    </Route>
  )
);

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);

aplicativo.jsx

import Header from "./components/Header";
import { Container } from "react-bootstrap";
import { Outlet } from "react-router-dom";

const App = () => {
  return (
    <>
      <Header />
      <Container className="my-1">
        <Outlet />
      </Container>
    </>
  );
};

export default App;

Cabeçalho.jsx

import { Navbar, Nav, Container } from "react-bootstrap";
import { FaChild, FaFileUpload, FaExchangeAlt } from "react-icons/fa";
import { LinkContainer } from "react-router-bootstrap";

const Header = () => {
  return (
    <header>
      <Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>MY APP</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ms-auto">
              <LinkContainer to="/viewKids">
                <Nav.Link>
                  <FaChild /> Ver Niños
                </Nav.Link>
              </LinkContainer>
              <LinkContainer to="/uploadKids">
                <Nav.Link>
                  <FaFileUpload /> Subir Niño
                </Nav.Link>
              </LinkContainer>
              <LinkContainer to="/updateKids">
                <Nav.Link>
                  <FaExchangeAlt /> Actualizar Niño
                </Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;

Tentei várias coisas, reinstalar dependências, reiniciar o aplicativo, mas a única coisa que parece funcionar é apenas excluir o contêiner de links. Estou disposto a aceitar uma alternativa tão boa quanto o contêiner de links, mas adoraria obter uma resposta sobre o que estou fazendo errado. Se precisar de mais informações, estou disposto a compartilhá-las também.

Procurei em tudo e em todos os lugares que conheço. Você tem alguma biblioteca que:

1. Usa shadcn
2. É reagir
3. Pode pesquisar
4. Pode ter vários itens salvos (separados por vírgula ou algo assim)
5. Usa fetch ou qualquer coisa para pesquisar no banco de dados

Não quero construir isso sozinho se não for necessário...

Acabei de instalar meu projeto React com Vite e TaiwindCSS v4 (versão mais recente), mas não encontro o tailwind.config.js.

Alguém tem uma ideia de como substituir o design padrão do TailwindCSS v4, por favor? Se eu tiver que adicionar tailwind.config.js, você tem alguma ideia de como configurá-lo no projeto? Obrigado.

Tenho 2 componentes. Uma Navbar e uma Sidebar/Cart. Na Navbar, tenho um botão que abre e fecha a Sidebar. Tenho um evento que aciona a função clickOutside e está funcionando. O problema é que quando clico no item do carrinho quando a sidebar está ativa, a sidebar fecha e reabre novamente.

Meu App.jsx:

import { useEffect, useState } from "react";
import "./App.css";
import { Navbar } from "./Components/Navbar";
import { ListItem } from "./Components/ListItem";
import { Cart } from "./Components/Cart";

function App() {
  const [list, setList] = useState([]);
  const [cartActive, setCartActive] = useState(false);

  const fetchList = () => {
    fetch(`https://fakestoreapi.com/products`)
      .then((res) => res.json())
      .then((data) => {
        setList(data);
      })
      .catch((error) => {});
  };

  useEffect(() => {
    fetchList();
  }, []);

  return (
    <>
      <Navbar setCartActive={setCartActive} cartActive={cartActive} />
      <Cart cartActive={cartActive} setCartActive={setCartActive} />
      <div className="main">
        <div className="container">
          {list.map((item) => {
            return <ListItem key={item.id} item={item} />;
          })}
        </div>
      </div>
    </>
  );
}

export default App;
 

Minha barra de navegação:

import { useEffect, useState } from "react";
import { FaShoppingBag } from "react-icons/fa";
import { useSelector } from "react-redux";

export const Navbar = ({ setCartActive, cartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const [totalItems, setTotalItems] = useState(0);

  const fetchTotalItems = () => {
    setTotalItems(cart.reduce((acc, curr) => acc + curr.amount, 0));
  };

  useEffect(() => {
    fetchTotalItems();
  }, [cart]);

  return (
    <nav>
      <div className="container">
        <div className="brand">
          Redux<span>Store</span>
        </div>
        <div className="icon" onClick={() => setCartActive(!cartActive)}>
          <FaShoppingBag /> ({totalItems})
        </div>
      </div>
    </nav>
  );
};

E minha barra lateral/carrinho:

import { useSelector } from "react-redux";
import { CartItem } from "./CartItem";
import { useEffect, useRef } from "react";

export const Cart = ({ cartActive, setCartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const cartRef = useRef();

  const handleClickOutside = (e) => {
    if (cartActive && cartRef.current && !cartRef.current.contains(e.target)) {
      setCartActive(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  });

  return (
    <div className={`cart ${cartActive ? "active" : ""}`} ref={cartRef}>
      {cart.map((item) => {
        return <CartItem key={item.id} item={item} />;
      })}
    </div>
  );
};

Isso funciona, mas quando o usuário clica no ícone do carrinho quando a barra lateral está aberta, a barra lateral fecha e reabre. Isso ocorre porque ele captura a função clickOutside. Como posso parar essa função clickoutside na barra de navegação?

aqui está um link para codesandbox

Eu segui todos os passos mencionados nos documentos do Tailwind v4, para configurar o TailwindCSS v4 com o parcel. Após a configuração, quando estou executando o servidor local, então recebi esse erro.

Server running at http://localhost:1234
🚨 Build failed.

@parcel/transformer-css: Unexpected token CloseSquareBracket

C:\Users\vatsh\OneDrive\Desktop\study\coding\4\src\index.css:1781:11            
    > 1780 |   .\[host\:\]port\] {
    > 1781 |     host: ]port;
           |           ^
      1782 |   }
      1783 |   .\[keywords\:node-addon-api\] { 

Não tenho a mínima ideia porque está mostrando erro no código do arquivo interno do tailwind ( index.css) que não consigo editar.

index.cssarquivo contém apenas isto:

@import "tailwindcss";

Isso está acontecendo apenas no TailwindCSS v4. Por favor, ajude-me a resolver esse erro.

Tenho um aplicativo React Native que tem esta tela chamada TasksScreen:

export default function TasksScreen() {
  const [loading, setLoading] = useState<boolean>(true);

  const colorScheme = useColorScheme() ?? "light";
  const theme = colorScheme === "dark" ? darkTheme : lightTheme;
  const themeColors = colorStyles[colorScheme];

  const onLoadingChanged = (loading: boolean) => setLoading(loading);

  if (loading) {
    return (
      <View style={theme.loaderContainer}>
        <ActivityIndicator size="large" color={themeColors.primary} />
      </View>
    );
  }

  const selectTask = (task: TaskEntity) => {
    router.push(`/task/${task.id}`);
  };

  return (
    <SafeAreaView style={theme.container}>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          padding: 16,
          backgroundColor: themeColors.background,
        }}
      >
        <Text type="subtitle">Tasks:</Text>
        <TouchableOpacity style={theme.buttonPrimary} onPress={() => router.push('/task/create')}>
          <Text style={theme.buttonTextPrimary}>Create new task</Text>
        </TouchableOpacity>
      </View>
      <TaskList key="TabsTasklist" setLoading={onLoadingChanged} selectTask={selectTask} />
    </SafeAreaView>
  );
}

Que por sua vez usa este componente filho chamado TaskList:

const TaskList = ({
  setLoading,
  selectTask,
}: {
  setLoading: (loading: boolean) => void;
  selectTask: (task: TaskEntity) => void;
}) => {
  const [tasks, setTasks] = useState<TaskEntity[]>([]);

  const colorScheme = useColorScheme() ?? "light";
  const theme = colorScheme === "dark" ? darkTheme : lightTheme;
  const themeColors = colorStyles[colorScheme];

  useEffect(() => {
    console.log("Fetching tasks!");

    const loadTasks = async () => {
      try {
        const fetchedTasks = await getAllTasks();

        if (fetchedTasks.length === 0) {
          Alert.alert("Error", "Failed to fetch tasks.");
        }
        console.log("Tasks fetched: ", fetchedTasks);

        setTasks(fetchedTasks);
        setLoading(false);
      } catch (error) {
        Alert.alert("Error", "Failed to fetch tasks. Reason: " + error);
      }
    };

    loadTasks();
  });

  return (
    <FlatList
      data={tasks}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TaskListCell entity={item} onPress={selectTask} />
      )}
      contentContainerStyle={theme.listContainer}
      ListEmptyComponent={
        <Text style={theme.emptyText}>No task available!</Text>
      }
    />
  );
};

O problema é que o useEffectcódigo para buscar os dados não está sendo chamado de forma alguma. No entanto, quando movi o loading/setLoadingestado de TasksScreen para TaskList (ou seja, do pai para o filho), ele funciona perfeitamente. Alguém pode me dizer o que deu errado aqui?

Obrigado.