`.
```html theme={null}
My React App
```
**src/main.jsx** — The entry point. Renders your App component into the root div.
```jsx theme={null}
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
);
```
`React.StrictMode` is a development-only helper. It may render components (and run effects) more than once in development to help catch bugs. This can look surprising at first, but it does not happen in production builds.
**src/App.jsx** — Your main component. This is where you start building.
```jsx theme={null}
function App() {
return (
Hello, React!
);
}
export default App;
```
Start by editing `App.jsx`. Delete the default content and replace it with your own. You'll add more components as files in the `src/` folder and import them into `App.jsx`.
## The .jsx extension
React files use `.jsx` instead of `.js`. JSX lets you write HTML-like syntax inside JavaScript — you'll learn more in the next lesson.
```jsx theme={null}
// This is JSX — HTML inside JavaScript
function Greeting() {
return
Hello, World!
;
}
```
`.jsx` and `.js` both work in Vite. The convention is `.jsx` for files that contain JSX (which is almost every React file). Some projects use `.tsx` for TypeScript + JSX.
## Key scripts
Your `package.json` includes these scripts:
```bash theme={null}
npm run dev # Start development server (hot reload)
npm run build # Build for production
npm run preview # Preview the production build locally
```
You'll spend 99% of your time using `npm run dev`.
## Adding your first component
Create a new file in `src/`:
```jsx theme={null}
// src/UserCard.jsx
function UserCard({ name, email }) {
return (
);
}
export default UserCard;
```
Import and use it in `App.jsx`:
```jsx theme={null}
// src/App.jsx
import UserCard from './UserCard';
function App() {
return (
My App
);
}
export default App;
```
That's the entire workflow: create a component file, export it, import it where you need it.
## Organizing components
As your app grows, create folders to organize:
```
src/
├── components/
│ ├── UserCard.jsx
│ ├── Navbar.jsx
│ └── Spinner.jsx
├── pages/
│ ├── Home.jsx
│ └── Settings.jsx
├── api/
│ └── users.js # API functions (not React)
├── App.jsx
└── main.jsx
```
Don't over-organize early. Start with all components in `src/`, and extract into folders when you have 10+ files. The folder structure isn't enforced by React — use whatever makes sense for your project.
## What's next?
Your project is running. Now let's learn the core building blocks — components and JSX.
Build UI with reusable components using JSX syntax