01 - Rodar o comando para criar o projeto ReactJS
npm create vite@latest my-react-app -- --template react-ts
02 - Abrir a pasta do projeto criado
03 - Instalar as dependências (node modules)
npm install
04 - Rodar o script dev para subir o frontEnd. No terminal acessar o link local (ctrl + clique) http://localhost:5173/
npm run dev
05 - Limpar o arquivo App.tsx
function App() {
return <h1>Olá mundo</h1>
}
export default App
05 - Excluir arquivos CSS desnecessários (index.css, app.css)
06 - No arquivo main.tsx
excluir import './index.css'
01 - Dentro da pasta src
, criar a pasta components
, dentro de components
, criar a pasta styleds
02 - Instalar o react-router-dom
npm i react-router-dom
OBS: configuração React Router Dom
03 - Instalar o Styled-Components
npm install styled-components
04 - Dentro da pasta src
, criar a pasta configs
. Dentro de configs
criar a pasta routes
05 - Criar o arquivo AppRoutes.tsx
dentro da pasta routes
. Colar o código abaixo
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
{
path: '/',
element: <div></div>,
},
]);
export function AppRoutes() {
return <RouterProvider router={router} />;
}
06 - No arquivo App.tsx
colocar o seguinte código
import AppRoutes from "./configs/routes/AppRoutes";
function App() {
return <AppRoutes />;
}
export default App;
07 - Criar a pasta pages
dentro de src
. Criar os arquivos que vão representar as páginas, ex: Home.tsx
function Home () {
return (
<>
<h1>Bem-vindo</h1>
</>
);
}
export default Home
08 - Dentro da pasta configs
criar a pasta global
, criar o arquivo GlobalStyles.tsx
e inserir o código abaixo
import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #ffff;
font-family: "Poppins", sans-serif;
}
`;
08 - Chamar o <GlobalStyle />
no arquivo App.tsx
import { GlobalStyle } from "./configs/global/GlobalStyles";
import { AppRoutes } from "./configs/routes/AppRoutes";
function App() {
return (
<>
<AppRoutes />
<GlobalStyle />
</>
);
}
export default App;