Code A Shopping Cart With React And Wordpress
Published 3/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 327.50 MB | Duration: 1h 27m
Published 3/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 327.50 MB | Duration: 1h 27m
Learn Wordpress REST API and React easily
What you'll learn
Understanding how to configure React from scratch by using Webpack
Understanding how to use and configure the Wordpress REST API
Creating a custom user interface to input data into Wordpress
Combine React and Wordpress and make a web application
Learning to make HTTP requests to the Wordpress REST API from a React app
Requirements
Basic understanding of Wordpress; if you can install it and publish a 'Hello World' post then you can complete the tutorial
Basic understanding of Javascript, HTML and CSS
Basic understanding of Nodejs
Basic understanding on how to use the console or command prompt
Description
This course covers how to code a shopping cart with React and the Wordpress REST API; in this case we are going to use Wordpress as a Heeadless CMS which means we are going to get rid of the built in php functions and instead we are going the consume the data by making HTTP requests.You are going to learn how to integrate React into a Wordpress theme from scratch and how to make HTTP requests from a React app.All the process is split into small sections so that the topics a easy to understand. Moreover the source code is provided as a ZIP folder in order to clarify any doubts. Firstly, you are going to create the backend with Wordpress by setting up a custom post type and then the REST API will be configured so that the data can be consumed from the React application.Secondly, you are going to configure React from scratch; you will use Webpack to generate the bundles and you will gain a deep understanding on how React works under the hood.Lastly, you are going to style the web application with a CSS framework and some basic CSS rules.You don't need to be an expert to complete this tutorial; you only need beginner-level skills on topics like Wordpress, Javascript, CSS and REST API.
Overview
Section 1: Course Prerequisites
Lecture 1 System Requirements and Assumptions
Section 2: Creating the backend of the web application
Lecture 2 Setting up a new Wordpress theme from scratch
Lecture 3 What is a custom post type in Wordpress
Lecture 4 Setting up a custom post type
Lecture 5 Checking whether the post type was registered successfully
Lecture 6 Enable thumbnails to upload the cover of the movie
Lecture 7 See how to input content to the website
Lecture 8 Adding one movie to the website
Lecture 9 Why using Wordpress REST API ?
Lecture 10 Making the Custom Post Type accessible through the REST API
Lecture 11 Testing the REST API configuration
Section 3: Creating the frontend of the web application
Lecture 12 Check out what the homepage will be like
Lecture 13 A brief introduction to Webpack
Lecture 14 Installing Webpack
Lecture 15 Adding the configuration file for Webpack
Lecture 16 Enabling CSS styles support in Webpack
Lecture 17 Enabling font files support in Webpack
Lecture 18 Enabling JSX support in Webpack
Lecture 19 Adding React to the project
Lecture 20 Attaching the javascript code to the Wordpress template
Lecture 21 Using the Google Chrome Developer Tools
Lecture 22 Splitting the template into different parts
Lecture 23 Customizing the look of the header and footer
Lecture 24 Reading the DVD movies data from the REST API
Lecture 25 Displaying the movies data to the web browser by using a grid
Lecture 26 Adding the cover image for each movie
Lecture 27 Summarizing the lifecycle of the moviesGrid component
Lecture 28 Adding the “+Add to cart” button
Lecture 29 Adding the logic to the “+ Add to cart” buttons
Lecture 30 Adding the navigation bar and the cart items counter
Lecture 31 Check out what the shopping cart will be like
Lecture 32 Setting up the shopping cart from scratch
Lecture 33 Reading the data from the sessionStorage object
Lecture 34 Requesting the movies data from the REST API
Lecture 35 Adding some styling to the shopping cart
Lecture 36 Adding some logic to the Delete button
Lecture 37 Adding the top navigation to the shopping cart
Lecture 38 Calculating the total amount to be paid
Wordpress developers curious about React