Arquivo padrão de qualquer projeto Node. Funciona como o arquivo de configuração do projeto.
Contém os scripts disponíveis (dev, build…) e as dependências que o projeto precisa para rodar.
Ao rodar npm install, o npm lê esse arquivo e instala tudo que está listado em dependencies e devDependencies.
// package.json
{"{"}
"scripts": {"{"}
"dev": "vite",
"build": "vite build"
{"}"},
"dependencies": {"{"}
"react": "^18.0.0",
"react-dom": "^18.0.0"
{"}"}
{"}"}
O único arquivo HTML da aplicação. Serve apenas como casca — não tem conteúdo real.
Possui uma <div id="root"> onde o React vai injetar toda a aplicação via JavaScript.
Também carrega o main.jsx, que é o ponto de entrada do React.
<body>
<div id="root"></div>
<!-- vazio, React preenche aqui -->
<script type="module"
src="/src/main.jsx">
</script>
</body>
É o ponto de entrada da aplicação React. Responsável por renderizar o componente raiz (App) dentro da div#root do HTML.
Também é aqui onde se configura o React Router (RouterProvider), quando usado.
Você raramente vai precisar editar esse arquivo no dia a dia.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM
.createRoot(document.getElementById('root'))
.render(<App />)
É o componente raiz da aplicação — o primeiro componente que o React renderiza.
Funciona como o ponto central onde você organiza os outros componentes e gerencia os estados principais.
É comum manter aqui os states globais da aplicação e passar os dados para os filhos via props.
import {"{ useState }"} from 'react'
import Tasks from './components/Tasks'
function App() {"{"}
const [tasks, setTasks] = useState([])
return <Tasks tasks={"{tasks}"} />
{"}"}
export default App
Não existe uma estrutura obrigatória, mas a convenção mais comum separa o código em pastas dentro de src/.
components/ — peças reutilizáveis da UI (botões, cards, listas…).
pages/ — componentes que representam uma rota/página inteira.
Arquivos de componentes sempre com extensão .jsx e nome em PascalCase.
📁 src/
📁 components/
AddTask.jsx
Tasks.jsx
📁 pages/
TaskPage.jsx
App.jsx
main.jsx
index.css
index.html
package.json