React Getting Started Guide with Vite

1. How to Install Node.js

Node.js is required to run Next.js applications. Follow these steps to install Node.js:

Visit the official Node.js website
Download the LTS (Long Term Support) version (recommended for most users)
Run the installer and follow the installation wizard
Verify installation by opening a terminal/command prompt and running:
bash
```
1node --version
```

Alternatively, you can use a version manager like nvm (Node Version Manager) to install and manage multiple Node.js versions.

2. How to Install React 19

Create a new React project with the latest features using the following command:

bash

1npm create vite@latest my-react-app

You'll be prompted with several options:

bash

1✔ Project name: … my-react-app
2✔ Select a framework: > React
3✔ Select a variant: > JavaScript / TypeScript

After the installation completes, navigate to your project directory:

bash

1cd my-react-app

Install the necessary dependencies, including React 19:

bash

1npm install react@^19.0.0 react-dom@^19.0.0

If you're using TypeScript, also install the type definitions:

bash

1npm install --save-dev @types/react@^19.0.0 @types/react-dom@^19.0.0

Start the development server:

bash

1npm run dev

Your React application will be running at http://localhost:3000.

3. App Folder Structure Explanation

The App Router in Next.js 15 uses a folder-based routing system. Here's the basic structure:

Folder Structure

1my-react-app/
2├── public/
3│   └── index.html
4├── src/
5│   ├── assets/
6│   ├── App.jsx (or App.tsx for TypeScript)
7│   ├── main.jsx (or main.tsx for TypeScript)
8│   └── components/
9├── package.json
10├── vite.config.js
11└── README.md

Key directories and files:

public/: Contains static assets and the main HTML file.
src/: Contains the React components and application logic

App.jsx: The root component of your application.
main.jsx: The entry point that renders the App component.
components/: Directory to store reusable components.

4. Creating and Using Components

stc/components/ directory

In React, the UI is built using components. Here's how you can create and use a simple component:

JavaScript

1import React from 'react';
2
3function Button({ text, onClick }) {
4  return (
5    <button onClick={onClick} className="btn">
6      {text}
7    </button>
8  );
9}
10
11export default Button;

Use the Component in App.jsx:

Import and use the Button component in your App.jsx:

JavaScript

1// src/App.jsx
2import React from 'react';
3import Button from './components/Button';
4
5function App() {
6  const handleClick = () => {
7    alert('Button clicked!');
8  };
9
10  return (
11    <div>
12      <h1>Welcome to My React App</h1>
13      <Button text="Click Me" onClick={handleClick} />
14    </div>
15  );
16}
17
18export default App;

6. How to style

You can style your application using CSS. For example, to style the button component:

css

1/* src/components/Button.css */
2.btn {
3  background-color: #007bff;
4  color: #fff;
5  padding: 10px 20px;
6  border: none;
7  border-radius: 5px;
8  cursor: pointer;
9}
10
11.btn:hover {
12  background-color: #0056b3;
13}

Modify the Button.jsx file to import the CSS:

JavaScript

1// src/components/Button.jsx
2import React from 'react';
3import './Button.css';
4
5function Button({ text, onClick }) {
6  return (
7    <button onClick={onClick} className="btn">
8      {text}
9    </button>
10  );
11}
12
13export default Button;