React is a JavaScript library for building user interfaces, particularly single-page applications (SPAs). It was developed by Facebook (now Meta) and is widely used due to its component-based architecture, making UI development more efficient and scalable.
Key Features of React
- Component-Based Architecture – React applications are made up of reusable components, improving maintainability and reusability.
- Virtual DOM – React updates only the necessary parts of the UI, improving performance.
- JSX (JavaScript XML) – JSX allows writing HTML-like syntax within JavaScript for a more readable and structured code.
- One-Way Data Binding – React follows unidirectional data flow, making state management predictable.
- Hooks – Functions like
useStateanduseEffectenable state management in functional components without using class components.
Why Use React?
- Fast and Efficient – Virtual DOM optimizes rendering for better performance.
- Reusable Components – Saves development time by allowing components to be reused.
- Strong Community Support – Backed by Facebook and a vast developer community.
- SEO-Friendly – With server-side rendering (Next.js) and React optimizations, it improves search engine visibility.
Getting Started with React
To start a new React project, use the following command:
npm create vite@latest my-react-app
# or
npm create vite@latest my-react-app --template react
# if you want typescript setup
npm create vite@latest my-react-app --template react-ts
# using Yarn
yarn create vite my-react-app --template react
Install Dependencies
Move into your project folder and install the required dependencies:
cd my-react-app
npm install
# with Yarn
yarn installStart the Development Server
Run the following command:
npm run dev
# with Yarn
yarn devThis will start your React app at http://localhost:5173/.
This folder structure represents a Vite + TypeScript React project setup. Below is a breakdown of each folder and file, along with their use cases and examples
ProjectRoot
node_modules # Installed dependencies (auto-generated)
public # Static assets like images, fonts
src # Source code for React app
App.tsx # Main React component
main.tsx # Entry point for the React app
index.css # Global styles
.env # Environment variables
.gitignore # Files to ignore in Git
eslint.config.js # ESLint configuration
index.html # Main HTML file (outside the public folder)
package.json # Project dependencies and scripts
package-lock.json # Ensures consistent dependency versions
README.md # Documentation
tsconfig.app.json # TypeScript config for the app
tsconfig.json # Main TypeScript configuration
tsconfig.node.json # TypeScript config for Node-related code
vite.config.ts # Vite configuration fileFolder and File Breakdown
1. node_modules/
- Contains all the installed dependencies and packages for the project.
- Managed by
package.json. - Do not modify manually
Example: If you install react-router-dom, it gets added here.
npm install react-router-dom2. public/
- Stores static assets like images, fonts, and icons.
Example: Place an image inside public/ and use it in React:
3. src/
- The main folder for React components, styles, and logic.
- Contains the core app code.
Example: src/App.tsx
function App() {
return <h1>Hello, React with Vite!</h1>;
}
export default App;4. .env
- Stores environment variables.
Example:
VITE_API_URL=https://api.example.comUse in React:
const apiUrl = import.meta.env.VITE_API_URL;5. .gitignore
- Specifies files to ignore in Git.
Example:
node_modules/
.env
dist/6. eslint.config.js
- Configuration file for ESLint to enforce coding standards.
Example:
module.exports = {
extends: "eslint:recommended",
rules: {
"no-unused-vars": "warn",
},
};7. index.html
- The entry point for the React app.
- React injects the app into
<div id="root"></div>.
Example:
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>8. package.json
- Manages project dependencies and scripts.
Example:
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}Run with:
npm run dev9. tsconfig.app.json, tsconfig.json, tsconfig.node.json
- TypeScript configuration files.
- Controls how TypeScript compiles the project.
Example (tsconfig.json):
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext"
}
}10. vite.config.ts
- Configuration file for Vite.
import { defineConfig } from 'vite';
export default defineConfig({
server: {
port: 3000,
},
});
