Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Full-Stack React Projects

You're reading from   Full-Stack React Projects Modern web development using React 16, Node, Express, and MongoDB

Arrow left icon
Product type Paperback
Published in May 2018
Publisher Packt
ISBN-13 9781788835534
Length 470 pages
Edition 1st Edition
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Shama Hoque Shama Hoque
Author Profile Icon Shama Hoque
Shama Hoque
Shama Hoque has 8 years of experience as a software developer and mentor, with a Master’s in Software Engineering from Carnegie Mellon University. From Java programming to full-stack development with JavaScript, the applications she has worked on include national Olympiad registration websites, universally accessible widgets, video conferencing apps, and medical 3D reconstruction software. Currently, she makes web-based prototypes for R&D start-ups in California, while training aspiring software engineers and teaching web development to CS undergrads in Bangladesh.
Read more
See other products by Shama Hoque
Arrow right icon
View More author details
Toc

Table of Contents (14) Chapters Close

Preface 1. Unleashing React Applications with MERN FREE CHAPTER 2. Preparing the Development Environment 3. Building a Backend with MongoDB, Express, and Node 4. Adding a React Frontend to Complete MERN 5. Starting with a Simple Social Media Application 6. Exercising New MERN Skills with an Online Marketplace 7. Extending the Marketplace for Orders and Payments 8. Building a Media Streaming Application 9. Customizing the Media Player and Improving SEO 10. Developing a Web-Based VR Game 11. Making the VR Game Dynamic Using MERN 12. Following Best Practices and Developing MERN Further 13. Other Books You May Enjoy

Shopping cart

Visitors to the MERN Marketplace can add products they wish to buy to a shopping cart by clicking the add to cart button on each product. A cart icon in the menu will indicate the number of products already added to their cart as the user continues to browse through the marketplace. They can also update the cart contents and begin the checkout by opening the cart view. But to complete checkout and place an order, users will be required to sign in.

The shopping cart is mainly a frontend feature, so the cart details will be stored locally on the client side until the user places the order at checkout. To implement the shopping cart features, we will set up helper methods in client/cart/cart-helper.js to help manipulate the cart details with relevant React components.

Adding to cart

The AddToCart component in client/Cart/AddToCart.js takes a product object and a CSS styles object as props from the parent component it is added to. For example, in MERN Marketplace, it is added to a...

lock icon The rest of the chapter is locked
arrow left Previous Section
Section 5 of 9
Next Section arrow right
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Sign up now
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Start free trial
Renews at $19.99/month. Cancel anytime

Authors (1)

Profile icon Shama Hoque
Shama Hoque
Shama Hoque has 8 years of experience as a software developer and mentor, with a Master's in Software Engineering from Carnegie Mellon University. From Java programming to full-stack development with JavaScript, the applications she has worked on include national Olympiad registration websites, universally accessible widgets, video conferencing apps, and medical 3D reconstruction software. Currently, she makes web-based prototypes for R&D start-ups in California, while training aspiring software engineers and teaching web development to CS undergrads in Bangladesh.
Read more
See other products by Shama Hoque

Other recommended products

Related to this chapter
Left arrow icon
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Full-Stack React Projects
Full-Stack React Projects
Read more
This book is an updated and improved project-based guide to help you extend the capabilities of React into building full-stack projects by exploring the industry-tested MERN stack. Starting from the set up for your full-stack apps, you will learn to create the front end, back end, and everything in between by building fun and engaging projects.
Read more
Apr 2020 23h 52m
Right arrow icon
Banner background image

Personalised recommendations for you

Based on your interests and search pattern
Left arrow icon
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Right arrow icon