Modern Full-Stack React Projects
Dieser Kurs beinhaltet
Lessons
TestPrep
Lab
AI Tutor (Hinzufügen Auf)
Über diesen Kurs
Fähigkeiten, die Sie erwerben werden
Holen Sie sich die Unterstützung, die Sie brauchen. Melden Sie sich für unseren Kurs mit Lehrer an.
Unterricht
21+ Unterricht |
Testvorbereitung
1
Introduction
- Who this course is for
- What this course covers
- To get the most out of this course
- Conventions used
2
Preparing for Full-Stack Development
- Motivation to become a full-stack developer
- What is new in this release of Full-Stack React Projects?
- Getting the most out of this course
- Setting up the development environment
- Summary
3
Getting to Know Node.js and MongoDB
- Writing and running scripts with Node.js
- Introducing Docker, a platform for containers
- Introducing MongoDB, a document database
- Accessing the MongoDB database via Node.js
- Summary
4
Implementing a Backend Using Express, Mongoose ODM, and Jest
- Designing a backend service
- Creating database schemas using Mongoose
- Developing and testing service functions
- Providing a REST API using Express
- Summary
5
Integrating a Frontend Using React and TanStack Query
- Principles of React
- Setting up a full-stack React project
- Creating the user interface for our application
- Integrating the backend service using TanStack Query
- Summary
6
Deploying the Application with Docker and CI/CD
- Creating Docker images
- Deploying our full-stack application to the cloud
- Configuring CI to automate testing
- Configuring CD to automate the deployment
- Summary
7
Adding Authentication with JWT
- What is JWT?
- Implementing login, signup, and authenticated routes in the backend using JWTs
- Integrating login and signup in the frontend using React Router and JWT
- Advanced token handling
- Summary
8
Improving the Load Time Using Server-Side Rendering
- Benchmarking the load time of our application
- Rendering React components on the server
- Server-side data fetching
- Advanced server-side rendering
- Summary
9
Making Sure Customers Find You with Search Engine Optimization
- Optimizing an application for search engines
- Improving social media embeds
- Summary
10
Implementing End-to-End Tests Using Playwright
- Setting up Playwright for end-to-end testing
- Writing and running end-to-end tests
- Reusable test setups using fixtures
- Viewing test reports and running in CI
- Summary
11
Aggregating and Visualizing Statistics Using MongoDB and Victory
- Collecting and simulating events
- Aggregating data with MongoDB
- Implementing data aggregation in the backend
- Integrating and visualizing data on the frontend using Victory
- Summary
12
Building a Backend with a GraphQL API
- What is GraphQL?
- Implementing a GraphQL API in a backend
- Implementing GraphQL authentication and mutations
- Overview of advanced GraphQL concepts
- Summary
13
Interfacing with GraphQL on the Frontend Using Apollo Client
- Setting up Apollo Client and making our first query
- Using variables in GraphQL queries
- Using mutations on the frontend
- Summary
14
Building an Event-Based Backend Using Express and Socket.IO
- What are event-based applications?
- Setting up Socket.IO
- Creating a backend for a chat app using Socket.IO
- Adding authentication by integrating JWT with Socket.IO
- Summary
15
Creating a Frontend to Consume and Send Events
- Integrating the Socket.IO client with React
- Implementing chat functionality
- Implementing chat commands with acknowledgments
- Summary
16
Adding Persistence to Socket.IO Using MongoDB
- Storing and replaying messages using MongoDB
- Refactoring the app to be more extensible
- Implementing commands to join and switch rooms
- Summary
17
Getting Started with Next.js
- What is Next.js?
- Setting up Next.js
- Introducing the App Router
- Creating static components and pages
- Summary
18
Introducing React Server Components
- What are RSCs?
- Adding a data layer to our Next.js app
- Using RSCs to fetch data from the database
- Using Server Actions to sign up, log in, and create new posts
- Summary
19
Advanced Next.js Concepts and Optimizations
- Defining API routes in Next.js
- Caching in Next.js
- SEO with Next.js
- Optimized image and font loading in Next.js
- Summary
20
Deploying a Next.js App
- Deploying a Next.js app with Vercel
- Creating a custom deployment setup for Next.js apps
- Summary
21
Diving Deeper into Full-Stack Development
- Overview of other full-stack frameworks
- Overview of UI libraries
- Overview of advanced state management solutions
- Pointers on maintaining large-scale projects
- Summary