Code A Shopping Cart With React And Wordpress

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