Building a React App from Scratch with Vite & Redux

1. React.js Overview

React.js is a JavaScript library for building user interfaces, primarily for single-page applications. It allows developers to create reusable UI components.

Key Features of React

• Component-based architecture

• Virtual DOM for efficient rendering

• State and Props for managing data

• Hooks for managing state and side effects

---

2. Vite Overview

Vite is a modern front-end build tool that improves the development experience by providing:

• Fast server start-up with ES modules

• Hot Module Replacement (HMR) for faster updates

• Optimized production builds

---

3. Redux Overview

Redux is a state management library that helps manage global state in a predictable way.

Key Concepts

• Store: Holds the application state.

• Actions: Describe state changes.

• Reducers: Handle actions and modify state.

• Dispatch: Sends actions to the store.

---

Building a React App from Scratch with Vite & Redux

We’ll create a simple counter app using React, Vite, and Redux.

---

Step 1: Create a React App using Vite

Open your terminal and run:

npm create vite@latest my-app --template react

Navigate into the project folder:

cd my-app

Install dependencies:

npm install

Start the development server:

npm run dev

---

Step 2: Install Redux Toolkit

Redux Toolkit simplifies Redux implementation.

npm install @reduxjs/toolkit react-redux

---

Step 3: Setup Redux Store

Create a folder store inside src and a file store.js inside it.

📌 src/store/store.js

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Step 4: Create a Counter Slice

Create a file counterSlice.js inside the store folder.

📌 src/store/counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
    reset: (state) => { state.value = 0 },
  }
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

---

Step 5: Provide the Redux Store to React

Wrap the App component with Provider in main.jsx.

📌 src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store/store";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>
);

---

Step 6: Create Counter Component

📌 src/components/Counter.jsx

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "../store/counterSlice";

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
};

export default Counter;

---

Step 7: Use Counter Component in App

📌 src/App.jsx

import React from "react";
import Counter from "./components/Counter";

const App = () => {
  return (
    <div>
      <h2>Redux Counter App</h2>
      <Counter />
    </div>
  );
};

export default App;

---

Step 8: Run the App

Start the development server again if needed:

npm run dev

Go to http://localhost:5173/, and you should see the counter app working.