▶Book Description
Facebook's React combined with industry-tested, server-side technologies, such as Node, Express, and MongoDB, enables you to develop and deploy robust real-world full-stack web apps. This updated second edition focuses on the latest versions and conventions of the technologies in this stack, along with their new features such as Hooks in React and async/await in JavaScript. The book also explores advanced topics such as implementing real-time bidding, a web-based classroom app, and data visualization in an expense tracking app.
Full-Stack React Projects will take you through the process of preparing the development environment for MERN stack-based web development, creating a basic skeleton app, and extending it to build six different web apps. You'll build apps for social media, classrooms, media streaming, online marketplaces with real-time bidding, and web-based games with virtual reality features. Throughout the book, you'll learn how MERN stack web development works, extend its capabilities for complex features, and gain actionable insights into creating MERN-based apps, along with exploring industry best practices to meet the ever-increasing demands of the real world.
By the end of this React book, you'll be able to build production-ready MERN full-stack apps using advanced tools and techniques in modern web development.
▶What You Will Learn
- Extend a basic MERN-based application to build a variety of applications
- Add real-time communication capabilities with Socket.IO
- Implement data visualization features for React applications using Victory
- Develop media streaming applications using MongoDB GridFS
- Improve SEO for your MERN apps by implementing server-side rendering with data
- Implement user authentication and authorization using JSON web tokens
- Set up and use React 360 to develop user interfaces with VR capabilities
- Make your MERN stack applications reliable and scalable with industry best practices
▶Key Features
- Build your career as a full-stack developer with this practical guide
- Understand how the different aspects of a MERN application come together through a series of practical projects
- Master the MERN stack by building robust social media, E-commerce store, and web-based VR game apps
▶Who This Book Is For
This is one of the most useful web development books for JavaScript developers who may have worked with React but have minimal experience in full-stack development with Node, Express, and MongoDB.
▶What this book covers
- Chapter 1, Unleashing React Applications with MERN, introduces the MERN stack technologies and the applications that will be developed in this book. We will discuss developing web applications with React, Node.js, Express, and MongoDB.
- Chapter 2, Preparing the Development Environment, helps you to set up the MERN stack technologies for development. We will explore essential development tools; install Node.js, MongoDB, Express, React, and any other required libraries; and then run code to check the setup.
- Chapter 3, Building a Backend with MongoDB, Express, and Node, implements the backend of a skeleton MERN application. We will build a standalone server-side application with MongoDB, Express, and Node.js that stores user details and has APIs for user authentication and CRUD operations.
- Chapter 4, Adding a React Frontend to Complete MERN, completes the MERN skeleton application by integrating a React frontend. We will implement a working frontend with React views for interacting with the user CRUD operations and auth APIs on the server.
- Chapter 5, Growing the Skeleton into a Social Media Application, builds a social media application by extending the skeleton application. We will explore the capabilities of the MERN stack by implementing social media features, such as post sharing, liking, commenting, following friends, and an aggregated newsfeed.
- Chapter 6, Building a Web-Based Classroom Application, focuses on building a simple online classroom application by extending the MERN stack skeleton application. This classroom application will support multiple user roles, the addition of course content and lessons, student enrollments, progress tracking, and course enrollment statistics.
- Chapter 7, Exercising MERN Skills with an Online Marketplace, utilizes the MERN stack technologies to develop basic features in an online marketplace application. We will implement buying-and selling-related features with support for seller accounts, product listings, and product search by category.
- Chapter 8, Extending the Marketplace for Orders and Payments, focuses on extending the online marketplace we built in the previous chapter by implementing capabilities for buyers to add products to a shopping cart, checkout, and place orders, and for sellers to manage these orders and have payments processed from the marketplace application. We will also integrate Stripe to collect and process payments.
- Chapter 9, Adding Real-Time Bidding Capabilities to the Marketplace, focuses on teaching you how to use the MERN stack technologies, along with Socket.IO, to easily integrate real-time behavior in a full-stack application. We will do this by incorporating an auctioning feature with real-time bidding capabilities in the MERN marketplace application.
- Chapter 10, Integrating Data Visualization with an Expense Tracking Application, focuses on using MERN stack technologies along with Victory—a charting library for React—to easily integrate data visualization features in a full-stack application. We will extend the MERN skeleton application to build an expense tracking application that will incorporate data processing and visualization features for expense data recorded by a user over time.
- Chapter 11, Building a Media Streaming Application, focuses on extending the MERN skeleton application to build a media uploading and streaming application using MongoDB GridFS. We will start by building a basic media streaming application, allowing registered users to upload video files that will be stored on MongoDB and streamed back so that viewers can play each video in a simple React media player.
- Chapter 12, Customizing the Media Player and Improving SEO, upgrades the media viewing capabilities of our media application with a custom media player and autoplay media list. We will implement customized controls on the default React media player, add a playlist that can be autoplayed, and improve SEO for the media details by adding selective server-side rendering with data for just the media detail view.
- Chapter 13, Developing a Web-Based VR Game, uses React 360 to develop a threedimensional virtual reality (VR)-infused game for the web. We will explore the threedimensional and VR capabilities of React 360 and build a simple web-based VR game.
- Chapter 14, Making the VR Game Dynamic Using MERN, is where you will build a dynamic VR game application by extending the MERN skeleton application and integrating React 360. We will implement a game data model that allows users to create their own VR games and incorporate the dynamic game data with the game developed using React 360.
- Chapter 15, Following Best Practices and Developing MERN Further, reflects on the lessons learned in previous chapters and suggests improvements for further MERNbased application development. We will expand on some of the best practices already applied, such as modularity in the app structure, other practices that should be applied, such as writing test code, and possible improvements, such as optimizing bundle size.
