Full-Stack React projects modern web development using React 16, Node, Express, and MongoDB
Unleash the power of MERN stack by building diverse web applications using React, Node.js, Express, and MongoDB About This Book Create dynamic web applications with the MERN stack Leverage the power of React in building interactive and complex user interfaces Unlock the potential of Node, Express, a...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham ; Mumbai :
Packt
2018.
|
| Edición: | 1st edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630706706719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Packt Upsell
- Contributors
- Table of Contents
- Preface
- Chapter 1: Unleashing React Applications with MERN
- MERN stack
- Node
- Express
- MongoDB
- React
- Relevance of MERN
- Consistency across the technology stack
- Less time to learn, develop, deploy, and extend
- Widely adopted in the industry
- Community support and growth
- Range of MERN applications
- MERN applications developed in this book
- Social media platform
- Online marketplace
- Media streaming application
- VR game for the web
- Book structure
- Getting started with MERN
- Building MERN from the ground up - a skeleton application
- Developing basic web applications with MERN
- Advancing to complex MERN applications
- Going forward with MERN
- Getting the most out of this book
- Summary
- Chapter 2: Preparing the Development Environment
- Selecting development tools
- Workspace options
- Local and cloud development
- IDE or text editors
- Chrome Developer Tools
- Git
- Installation
- Remote Git hosting services
- Setting up MERN stack technologies
- MongoDB
- Installation
- Running the mongo shell
- Node
- Installation
- Upgrading npm versions
- Node version management with nvm
- npm modules for MERN
- Key modules
- devDependency modules
- Checking your development setup
- Initializing package.json and installing npm modules
- Configuring Babel, Webpack, and Nodemon
- Babel
- Webpack
- Client-side Webpack configuration for development
- Server-side Webpack configuration
- Client-side Webpack configuration for production
- Nodemon
- Frontend views with React
- Server with Express and Node
- Express app
- Bundle React app during development
- Serving static files from the dist folder
- Rendering templates at the root
- Connecting the server to MongoDB.
- npm run scripts
- Developing and debugging in real time
- Summary
- Chapter 3: Building a Backend with MongoDB, Express, and Node
- Skeleton application overview
- Feature breakdown
- Focus of this chapter - the backend
- User model
- API endpoints for user CRUD
- Auth with JSON Web Tokens
- How JWT works
- Implementing the skeleton backend
- Folder and file structure
- Setting up the project
- Initializing package.json
- Development dependencies
- Babel
- Webpack
- Nodemon
- Config variables
- Running scripts
- Preparing the server
- Configuring Express
- Starting the server
- Setting up Mongoose and connecting to MongoDB
- Serving an HTML template at a root URL
- User model
- User schema definition
- Name
- Created and updated timestamps
- Hashed password and salt
- Password for auth
- As a virtual field
- Encryption and authentication
- Password field validation
- Mongoose error handling
- User CRUD API
- User routes
- User controller
- Creating a new user
- Listing all users
- Loading a user by ID to read, update, or delete
- Loading
- Reading
- Updating
- Deleting
- User auth and protected routes
- Auth routes
- Auth controller
- Sign-in
- Sign-out
- Protecting routes with express-jwt
- Requiring sign-in
- Authorizing signed in users
- Protecting user routes
- Auth error handling for express-jwt
- Checking the standalone backend
- Creating a new user
- Fetching the user list
- Trying to fetch a single user
- Signing in
- Fetching a single user successfully
- Summary
- Chapter 4: Adding a React Frontend to Complete MERN
- Skeleton frontend
- Folder and file structure
- Setting up for React development
- Configuring Babel and Webpack
- Babel
- Webpack
- Loading Webpack middleware for development
- Serving static files with Express.
- Updating the template to load a bundled script
- Adding React dependencies
- React
- React Router
- Material-UI
- Implementing React views
- Rendering a home page
- Entry point at main.js
- Root React component
- Customizing the Material-UI theme
- Wrapping the root component with MUI theme and BrowserRouter
- Marking the root component as hot-exported
- Adding a home route to MainRouter
- Home component
- Imports
- Style declarations
- Component definition
- PropTypes validation
- Export component
- Bundling image assets
- Running and opening in the browser
- Backend API integration
- Fetch for User CRUD
- Creating a user
- Listing users
- Reading a user profile
- Updating a user's data
- Deleting a user
- Fetch for auth API
- Sign-in
- Sign-out
- Auth in the frontend
- Managing auth state
- PrivateRoute component
- User and auth components
- Users component
- Signup component
- Signin component
- Profile component
- EditProfile component
- DeleteUser component
- Menu component
- Basic server-side rendering
- Modules for server-side rendering
- Preparing Material-UI styles for SSR
- Generating markup
- Sending a template with markup and CSS
- Updating template.js
- Updating MainRouter
- Hydrate instead of render
- Summary
- Chapter 5: Starting with a Simple Social Media Application
- MERN Social
- Updating the user profile
- Adding an about description
- Uploading a profile photo
- Updating the user model to store a photo in MongoDB
- Uploading a photo from the edit form
- File input with Material-UI
- Form submission with the file attached
- Processing a request containing a file upload
- Retrieving a profile photo
- Profile photo URL
- Showing a photo in a view
- Following users in MERN Social
- Follow and unfollow
- Updating the user model
- Updating the userByID controller method.
- API to follow and unfollow
- Accessing follow and unfollow APIs in views
- Follow and unfollow buttons
- FollowProfileButton component
- Update Profile component
- Listing followings and followers
- FollowGrid component
- Finding people to follow
- Fetching users not followed
- FindPeople component
- Posts
- Mongoose schema model for Post
- Newsfeed component
- Listing posts
- List in Newsfeed
- Newsfeed API for posts
- Fetching Newsfeed posts in the view
- Listing by user in Profile
- API for posts by a user
- Fetching user posts in the view
- Creating a new post
- Creating post API
- Retrieving a post's photo
- Fetching the create post API in the view
- NewPost component
- Post component
- Layout
- Header
- Content
- Actions
- Comments
- Deleting a post
- Likes
- Like API
- Unlike API
- Checking if liked and counting likes
- Handling like clicks
- Comments
- Adding a comment
- Comment API
- Writing something in the view
- Listing comments
- Deleting a comment
- Uncomment API
- Removing a comment from view
- Comment count update
- Summary
- Chapter 6: Exercising New MERN Skills with an Online Marketplace
- MERN Marketplace
- Users as sellers
- Updating the user model
- Updating the Edit Profile view
- Updating the menu
- Shops in the Marketplace
- Shop model
- Create a new shop
- Create shop API
- Fetch the create API in the view
- NewShop component
- List shops
- List all shops
- Shops list API
- Fetch all shops for the view
- Shops component
- List shops by owner
- Shops by owner API
- Fetch all shops owned by a user for the view
- MyShops component
- Display a shop
- Read a shop API
- Fetch the shop in the view
- Shop component
- Edit a shop
- Edit shop API
- Fetch the edit API in the view
- EditShop component
- Delete a shop
- Delete shop API.
- Fetch the delete API in the view
- DeleteShop component
- Products
- Product model
- Create a new product
- Create product API
- Fetching the create API in the view
- The NewProduct component
- List products
- List by shop
- Products by shop API
- Products component for buyers
- MyProducts component for shop owners
- List product suggestions
- Latest products
- Related products
- Suggestions component
- Display a product
- Read a product API
- Product component
- Edit and delete a product
- Edit
- Delete
- Product search with category
- Categories API
- Search products API
- Fetch search results for the view
- Search component
- Categories component
- Summary
- Chapter 7: Extending the Marketplace for Orders and Payments
- The MERN Marketplace with a cart, payments, and orders
- Shopping cart
- Adding to cart
- Cart icon on the menu
- Cart view
- The CartItems component
- Retrieving cart details
- Modifying quantity
- Removing item
- Showing total price
- Option to check out
- Using Stripe for payments
- Stripe
- Stripe-connected account for each seller
- Updating user model
- Button to connect with Stripe
- The StripeConnect component
- Stripe auth update API
- Stripe Card Elements for checkout
- Stripe Customer to record card details
- Updating user model
- Updating user controller
- Creating a new Stripe Customer
- Updating an existing Stripe Customer
- Creating a charge for each product processed
- Checkout
- Initializing checkout details
- Customer information
- Delivery address
- The PlaceOrder component
- Stripe CardElement component
- Placing an order
- Empty cart
- Redirecting to Order view
- Creating new order
- Order model
- Ordered by and for customer
- Delivery address
- Payment reference
- Products ordered
- The CartItem schema
- Create order API.
- Decrease product stock quantity.
