![Mega Web Development Bootcamp with React Bootstrap 5, Redux, and REST API [Video]](https://content.packt.com/V21162/cover_image_small.jpg)
Mega Web Development Bootcamp with React Bootstrap 5, Redux, and REST API [Video]
Subscription
FREE
Video
$59.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
Subscription
FREE
Video
$59.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
-
Free ChapterIntroduction and Setup
-
Designing NavBar, About us, Contact us with Routing
- Creating First React Component the NavBar
- Styling NavBar Component with Bootstrap5 NavBar
- Customizing NavBar Menu
- Creating About and Contact Pages
- Installing NPM Package for react-router-dom
- Adding Routing for All the Components
- Single Page Behavior on Menu Items Click with NavLink
- Designing About Us Page Header Section
- Designing About Us Page Content Section
- Styling Our Contact Us Form with Bootstrap - Part 1
- Styling Our Contact Us Form with Bootstrap - Part 2
-
Designing Footer, Homepage, and Call to Action
- Designing Footer Section Layout - Part 1
- Designing Footer Section Heading - Part 2
- Designing Footer Quick Links - Part 3
- Designing Footer Newsletter - Part 4
- Designing Footer Contact Address - Part 5
- Homepage Layout
- Designing Homepage Hero Section Slider
- Designing Homepage Featured Post Section
- Designing Homepage Latest Post Section
- Designing Homepage Portfolio Section
- Add Home Link to the NavBar
- Designing Call to Action section
-
Working on All Posts and Post Detail with REST API Integration
- Create All Post Page and Link to NavBar Navigation
- Designing All Posts Page
- Understanding REST API for Getting Post Data
- React Hooks useState and useEffect to Call Posts API and Store Data on Page
- Show Posts Data on UI by Looping All Data
- Showing Loading Icon While the Data Is Fetched from the REST API
- Adding API Base URL to a Config File and Using It Everywhere
- Dynamic Routing Passing Data from One Component to Another
- Get Post and User Data from REST API Call
- Design Layout of Post Detail Page
- Destructuring and Setting Post and User Data from Response to State Variables
- Displaying Post and User Information on Screen
- Styling the Post Detail and All Posts Images
- Implementing Opening Email and Phone Functionality
-
Working on Create, Edit, Delete Post Functionality with API Integration
- Implementing Create Post Functionality
- Alert Message for Success and Error Scenarios
- Update All Posts with Edit and Delete Buttons
- Edit Post Reuse the Create Post Flow
- Testing Edit and Create Post Functionality
- Delete Post and Show Alert Message after Deletion
- Delete Confirmation Yes or No
- Reload All Posts after Deletion
- Add a Back Button on the Post Detail Screen
-
Working on Signup, Login, and Logout with API Integration
-
User Session, Dynamic Menu, Redux, Context API
- What Is Redux and Why We Need It
- Define User Reducer with Different Actions
- Props Versus Context API
- Implement Restricted Routes Based on User Session with Context API and Redux
- Dispatch Action to Reducer after Successful Login
- Implementing Logout Functionality
- Implement Dynamic Menu Based on User Session
- Get All Posts for Logged-In User
- Testing All Functionality End to End
About this video
In this course, we will explore the intricacies of Redux state management, leveraging the power of the Context API to dynamically control functionality based on user sessions. To kickstart, we will establish our local development environment, installing the VS Code and NodeJS runtime. By harnessing the power of GET, POST, PUT, and DELETE endpoints, you will gain hands-on experience in consuming APIs and performing various operations.
Then, we will create our first React app and dive deep into understanding the inner workings of application creation. To elevate the aesthetics of our websites, we will integrate Bootstrap 5, FontAwesome, Google Fonts, and essential NPM packages into our ReactJs projects.
Our website will feature a visually appealing navigation bar, a captivating hero section with carousel and slider components, engaging sections for featured and latest posts, a compelling call-to-action segment, a portfolio showcase, and user-friendly contact and about pages. Additionally, we will implement essential functionalities such as creating, updating, and deleting posts, user login and signup capabilities, dynamic navigation, and integration with Redux and Context API for efficient state management.
By the end of the course, you will have mastered the art of frontend development with modern web technologies, empowering you to confidently create professional and captivating websites.
- Publication date:
- June 2023
- Publisher
- Packt
- Duration
- 8 hours 5 minutes
- ISBN
- 9781835084601