Scribd
Upload
3 views3 pages

MERN Introduction

The document provides an overview of using React with the MERN stack for building single-page applications (SPAs). It highlights key features of React, including JSX syntax, component-based structure, and routing, along with the roles of MongoDB, Express.js, React.js, and Node.js in the stack. Additionally, it discusses authentication using JWT, utility functions, and various components and pages within the application.

Uploaded by

yash.rar34
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

MERN Introduction

The document provides an overview of using React with the MERN stack for building single-page applications (SPAs). It highlights key features of React, including JSX syntax, component-based structure, and routing, along with the roles of MongoDB, Express.js, React.js, and Node.js in the stack. Additionally, it discusses authentication using JWT, utility functions, and various components and pages within the application.

Uploaded by

yash.rar34
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

React + MERN Stack Frontend Summary

React Overview

React is a JavaScript library for building UIs. It is component-based and uses JSX (JavaScript + XML) syntax.

React renders components to the DOM and re-renders them based on state or prop changes.

Key Features:

- JSX Syntax: JavaScript + XML.

- Routing with react-router-dom (used with Vite).

- Data Fetching with axios.

- Component-based structure.

Stack Used: MERN

- MongoDB: NoSQL database with Mongoose for modeling.

- [Link]: Backend framework for defining routes and handling logic.

- [Link]: Frontend UI library.

- [Link]: JavaScript runtime for backend.

Styling: Tailwind CSS for utility-first styling.

App Flow

- [Link]: Entry point using Vite.

- [Link]: Routing setup with nested routes & PrivateRoute.

- PrivateRoute: Restricts route access based on auth state.

Authentication:

- JSON Web Token (JWT) used for auth.

- userContext: stores & shares user data globally.

- useUserAuth: custom hook for protecting routes.

Utilities

- [Link]: Centralized API paths.

- [Link]: Authenticated HTTP client.


- Toast Notifications: User feedback on actions.

Pages

- Dashboard: Shows task stats using InfoCards.

- Create Task: POST to API, field validation & toast feedback.

- Manage Tasks: View/edit/delete existing tasks.

Components

- Input: With password toggle (useState).

- SelectDropdown: Custom dropdown with toggle logic.

- Modal: Reusable modal dialog.

- SelectUsers: Assign users using checkboxes and modal.

React Concepts

Props:

Inputs to components from parent to child.

useState:

React hook to store and update state in a component.

E.g. const [value, setValue] = useState(initialValue);

useEffect:

React hook to run side effects.

E.g. useEffect(() => { fetchData(); }, [dependency]);

Context:

Used to share global data across components.

Steps: createContext -> Provider -> useContext

Summary

React with the MERN stack enables efficient SPA development.

Master JSX, useState, useEffect, routing, and Context API.


Use reusable components to reduce complexity.

You might also like