Download as KEY, PDF, TXT or read online from Scribd
Download as key, pdf, or txt
You are on page 1/ 14
Goals
Introduction to web technologies:
HTML to create the document structure and content CSS to control is visual aspect Javascript for interactivity A though he e a e lots o tags in the HTML speci ication 99º/ of the webs use a subset o HTML tags with less hat 0 ags, the mosimpO Eni are: <div>: a containe , usually es esen ts a ectangula a ea wi h in o mation inside. <img : an im age <a>: a clickable link o go o ano he URL <p>: a text pa ag ash <h1>: ü title h2. Ł3 h4 are ti les of less importa ice <input›: a widget to let he use inI oduce info ma OÜ <style>O iuse ü GPS u es <sc 'pts: to execute Javasc ip <span›: a null tag doesn’! dO any hing CSS Javascr ipt Reac tJs
1. Declarative Syntax:
React utilizes a declarative syntax, enabling developers to describe the desired
outcome of the UI, and React takes care of updating the DOM to match that state. This approach enhances code readability and makes it easier to understand and maintain. 2. Component-Based Architecture:
React embraces a component-based architecture, allowing developers to break
down the user interface into modular and reusable components. Each component encapsulates its logic and rendering, promoting code reusability and maintainability. 3. Virtual DOM:
The virtual DOM is a representation of the actual DOM elements in memory.
React uses this virtual representation to efficiently update the actual DOM, minimizing unnecessary re-rendering and significantly improving performance. 4. Unidirectional Data Flow:
React follows a unidirectional data flow, ensuring that the data flows in a single direction, making the application's state more predictable. This helps in understanding how changes in state affect the application and simplifies debugging. 5. JSX (JavaScript XML):
React introduces JSX, a syntax extension for JavaScript that resembles
XML/HTML. JSX makes it more intuitive to write component structures and allows developers to mix HTML-like code with JavaScript logic seamlessly. Project Breakdown
1) Home Page : Here we are rendering the header , footer ,
PageContent , Products and the routes. This is the default landing page of the website , all the products will be listed here by default (A- Z sorted)
2) We can search for the desired product or we can also sort the listed products according to the sorting functionality we have built in this project. 3) We have sorted the products from low to high price , here we have utilized the getSortedItems component that we created.
Now the products will be sorted according the chosen option and hence going through the if-else ladder in the code. 4) Now we get the sorted products here :
5) We will use our addToCart component to add the selected items
to the shopping cart.
export const addToCart = (id) => {
return fetch("https://dummyjson.com/carts/add", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: 1, products: [ { id: id, quantity: 1, }, ], }), }).then((res) => res.json()); }; 6) The items are added in the cart successfully.
7) The value of the checkout amount gets updated dynamically as the
user adds or removes and product or increase the quantity of the product.
8) The user checks out and fills the billing address and confirms the order THANK YOU
