HOT

Code a shopping cart with React and WordPress

Development

Enroll Now

Code a shopping cart with React and WordPress, available at $19.99, with 38 lectures, and has 5 subscribers.

You will learn about 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 This course is ideal for individuals who are WordPress developers curious about React It is particularly useful for WordPress developers curious about React.

Enroll now: Code a shopping cart with React and WordPress

Summary

Title: Code a shopping cart with React and WordPress

Price: $19.99

Number of Lectures: 38

Number of Published Lectures: 38

Number of Curriculum Items: 38

Number of Published Curriculum Objects: 38

Original Price: $27.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

  • WordPress developers curious about React

Target Audiences

  • WordPress developers curious about React

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.

Course Curriculum

Chapter 1: Course Prerequisites

Lecture 1: System Requirements and Assumptions

Chapter 2: Creating the backend of the web application

Lecture 1: Setting up a new WordPress theme from scratch

Lecture 2: What is a custom post type in WordPress

Lecture 3: Setting up a custom post type

Lecture 4: Checking whether the post type was registered successfully

Lecture 5: Enable thumbnails to upload the cover of the movie

Lecture 6: See how to input content to the website

Lecture 7: Adding one movie to the website

Lecture 8: Why using WordPress REST API ?

Lecture 9: Making the Custom Post Type accessible through the REST API

Lecture 10: Testing the REST API configuration

Chapter 3: Creating the frontend of the web application

Lecture 1: Check out what the homepage will be like

Lecture 2: A brief introduction to Webpack

Lecture 3: Installing Webpack

Lecture 4: Adding the configuration file for Webpack

Lecture 5: Enabling CSS styles support in Webpack

Lecture 6: Enabling font files support in Webpack

Lecture 7: Enabling JSX support in Webpack

Lecture 8: Adding React to the project

Lecture 9: Attaching the javascript code to the WordPress template

Lecture 10: Using the Google Chrome Developer Tools

Lecture 11: Splitting the template into different parts

Lecture 12: Customizing the look of the header and footer

Lecture 13: Reading the DVD movies data from the REST API

Lecture 14: Displaying the movies data to the web browser by using a grid

Lecture 15: Adding the cover image for each movie

Lecture 16: Summarizing the lifecycle of the moviesGrid component

Lecture 17: Adding the “+Add to cart” button

Lecture 18: Adding the logic to the “+ Add to cart” buttons

Lecture 19: Adding the navigation bar and the cart items counter

Lecture 20: Check out what the shopping cart will be like

Lecture 21: Setting up the shopping cart from scratch

Lecture 22: Reading the data from the sessionStorage object

Lecture 23: Requesting the movies data from the REST API

Lecture 24: Adding some styling to the shopping cart

Lecture 25: Adding some logic to the Delete button

Lecture 26: Adding the top navigation to the shopping cart

Lecture 27: Calculating the total amount to be paid

Instructors

Rating Distribution

  • 1 stars: 0 votes
  • 2 stars: 0 votes
  • 3 stars: 0 votes
  • 4 stars: 0 votes
  • 5 stars: 0 votes

Frequently Asked Questions


How long do I have access to the course materials?


You can view and review the lecture materials indefinitely, like an on-demand channel.


Can I take my courses with me wherever I go?


Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

You may also like

Google Shopping Ads Digital Marketing Course

Complete Copywriting System : write to sell with ease

Product Positioning Masterclass: Unlock Market Traction