Ad
More Related Content
Similar to mern _stack _power _point_ presentation(1) (20)
Recently uploaded (20)
Ad
mern _stack _power _point_ presentation(1)
- 1. MERN Stack
- 2. MERN Stack Introduction • MongoDB: A NoSQL database that stores data in flexible, JSON-like documents.Stores the application's data. • Express.js: A web application framework for Node.js, designed for building web applications and APIs.Handles the application's backend logic and routes. • React: A JavaScript library for building user interfaces, particularly single-page applications.Manages the frontend, creating interactive user interfaces. • Node.js: A JavaScript runtime that allows you to run JavaScript on the server side.Executes JavaScript code on the server, enabling the backend to communicate with the frontend and the database.
- 4. React.js front end The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client- side applications in HTML. React lets you build complex interfaces through simple components, connect them to data on your back-end server, and render them as HTML. Express.js and Node.js server tier The next level down is the Express.js server-side framework, running inside a Node.js server. Express.js bills itself as a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is. Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses. MongoDB database tier JSON documents created in your React.js front end can be sent to the Express.js server, where they can be processed and (assuming they're valid) stored directly in MongoDB for later retrieval.
- 5. MongoDB • MongoDB is a document database. It stores data in a type of JSON format called BSON.Records in a MongoDB database are called documents, and the field values may include numbers, strings, booleans, arrays, or even nested documents. • MongoDB is a popular NoSQL database known for its flexibility and scalability. Here are some key features: Document-Oriented: Stores data in JSON-like documents, making it easy to work with complex data structures. Schema-Less: Allows for dynamic schemas, meaning you can store different types of data in the same collection without predefined schemas. Scalability: Supports horizontal scaling through sharding, distributing data across multiple servers. High Performance: Optimized for read and write operations, making it suitable for high- traffic applications. Rich Query Language: Offers a powerful query language for filtering and aggregating data.
- 7. MongoDB Commandas Usage Command Show Databases: Lists all databases on the server. show dbs Use Database: Switches to the specified database. If the database does not exist, it will be created. use database_name Show Collections: Lists all collections in the current database. show collections Create Collection :Creates a new collection in the current database. db.createCollection("collection_name") Insert Document: Inserts one or multiple documents into the specified collection. db.collection_name.insertOne({ key: "value" }) db.collection_name.insertMany() Find Documents: Retrieves documents from the specified collection. db.collection_name.find({ key: "value" }) db.collection_name.findOne({ key: "value" }) Update Document: Updates one or multiple documents in the specified collection. db.collection_name.updateOne({ key: "value" }, { $set: { key: "new_value" } }) db.collection_name.updateMay() Delete Document: Deletes one or multiple documents from the specified collection. db.collection_name.deleteMany({ key: "value" }) db.collection_name.deleteOne({ key: "value" })
- 8. Express.Js • Express is a small framework that sits on top of Node.js’s web server functionality to simplify its APIs and add helpful new features. • In Express JS there is the process of Middleware chaining by which multiple middleware functions sequentially can be processed and also can be able to modify the incoming requests before they reach the final route handler. • provides a robust set of routing methods to handle HTTP requests.These routing methods allow you to define the endpoints of your application and specify how they should respond to different HTTP requests. • Request Events and Response Events: req.on('data', callback): Triggered when a chunk of data is received in the request body. req.on('end', callback): Triggered when the entire request body has been received. res.on('finish', callback): Triggered when the response has been sent. res.on('close', callback): Triggered when the connection is closed before the response is sent
- 9. Express JS working • Express.js is a web application framework for Node.js, designed to build web applications and APIs. Here's a high-level overview of how Express.jsworks: • Create an Express Application: You create an instance of an Express application by calling the express() function. • Define Routes: Routes are used to define the endpoints of your application. Each route can handle different HTTP methods (GET, POST, PUT, DELETE, etc.). • Middleware: Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application's request-response cycle. Middleware can execute code, modify the request and response objects, end the request-response cycle, and call the next middleware function. • Error Handling: Express provides a way to handle errors using middleware. Error- handling middleware functions have four arguments: err, req, res, and next. • Start the Server: Finally, you start the server by calling the listen method on the Express application instance.
- 11. Node.JS • Node.Js is a powerful JavaScript runtime built on Chrome's V8 JavaScript engine. It allows you to run JavaScript on the server side, enabling you to build scalable and high- performance applications. Here are some key features and concepts of Node.js: • Event-Driven Architecture: Node.jsuses an event-driven, non-blocking I/O model, which makes it efficient and suitable for real-time applications. • Single-Threaded: Node.jsoperates on a single-threaded event loop, which handles multiple connections concurrently. This approach helps in managing a large number of simultaneous connections with high throughput. • Asynchronous Programming: Node.jsuses asynchronous programming, which means that operations are executed without waiting for previous operations to complete. This is achieved through callbacks, promises, and async/await. • Modules: Node.jshas a modular architecture, allowing you to organize your code into reusable modules. • Built-in HTTP Server: Node.jsprovides built-in modules to create HTTP servers, making it easy to build web applications and APIs
- 12. Components of the Node.js Architecture • Requests: Depending on the actions that a user needs to perform, the requests to the server can be either blocking (complex) or non- blocking (simple). • Node.js Server: The Node.js server accepts user requests, processes them, and returns results to the users. • Event Queue: The main use of Event Queue is to store the incoming client requests and pass them sequentially to the Event Loop. • Event Loop: Event Loop receives requests from the Event Queue and sends out the responses to the clients. • External Resources: In order to handle blocking client requests, external resources are used. They can be of any type ( computation, storage, etc).
- 13. Introduction to React React is a popular JavaScript library for building user interfaces, particularly single-page applications. Developed by Facebook, it allows developers to create reusable UI components, making the development process more efficient and maintainable. Here are some key features of React: Component-Based Architecture: React applications are built using components, which are self-contained modules that manage their own state and logic. This makes it easy to reuse and maintain code. Virtual DOM: React uses a virtual DOM to optimize updates and rendering. When the state of a component changes, React updates the virtual DOM first, then efficiently updates the real DOM only where necessary. JSX: JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript. It makes it easier to create and visualize the structure of your UI Component. Unidirectional Data Flow: React follows a unidirectional data flow, meaning data flows in one direction from parent components to child components. This makes it easier to understand and debug the application state.
- 14. How does React Work? • React creates a VIRTUAL DOM in memory. • Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. • React only changes what needs to be changed! • React finds out what changes have been made, and changes only what needs to be changed. • JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
- 15. Virtual DOMS