Code a web app with React and Paypal

Code a web app with React and Paypal, available at $34.99, with 123 lectures, and has 2 subscribers.

You will learn about Understanding how the Paypal API works Understanding how to configure a React app from scratch Creating API endpoints with Nodejs Combine a React app with a Nodejs backend This course is ideal for individuals who are Web developers who want to learn Nodejs or Web developers who want to learn React or Web developers who want to integrate Paypal into their apps It is particularly useful for Web developers who want to learn Nodejs or Web developers who want to learn React or Web developers who want to integrate Paypal into their apps.

Enroll now: Code a web app with React and Paypal

Summary

Title: Code a web app with React and Paypal

Price: $34.99

Number of Lectures: 123

Number of Published Lectures: 123

Number of Curriculum Items: 123

Number of Published Curriculum Objects: 123

Original Price: $29.99

Quality Status: approved

Status: Live

What You Will Learn

Understanding how the Paypal API works

Understanding how to configure a React app from scratch

Creating API endpoints with Nodejs

Combine a React app with a Nodejs backend

Who Should Attend

Web developers who want to learn Nodejs

Web developers who want to learn React

Web developers who want to integrate Paypal into their apps

Target Audiences

Web developers who want to learn Nodejs

Web developers who want to learn React

Web developers who want to integrate Paypal into their apps

This tutorial covers how to integrate Paypal functionality into a React application; the backend is made with Nodejs and Express.

Learning React is simple when coding an application from scratch; the idea is explaining the configuration of React by using Webpack and once the configuration is completed then coding the web app step by step.

I’ve divided the tutorial into very brief videos so that you don’t have to struggle understanding the topic; each video lasts around five minutes and only a few last more than ten minutes.

When processing payments with Paypal a Paypal order must be created; a Paypal order is a JSON object with many properties which describe how much will be charged to the buyer as well as all the details related to the transaction like the shipping information, the taxes and more. At first glance the Paypal order may seem intimidating because of the large number of properties but after coding this web application you will feel very familiar with Paypal and will be prepared to integrate it into any web app.

This web application contains several form fields; the content of the form fields are the values for the Paypal order. Once the form fields are filled in then the Paypal order is submitted to the Paypal API and the user is redirected to Paypal to complete the payment.

I think this tutorial is a good choice because as you learn React you also learn how to process payments with Paypal.

Finally the backend is coded with Nodejs and some API endpoints are created so that the React app can communicate with Paypal.

Course Curriculum

Chapter 1: Configure React by using Webpack step-by-step

Lecture 1: Welcome to the tutorial

Lecture 2: Webpack installation

Lecture 3: Basic configuration for Webpack

Lecture 4: Enable CSS support by using Webpack

Lecture 5: Enable support for image files by using Webpack

Lecture 6: Enable support for font files by using Webpack

Lecture 7: Install a Webpack plugin to generate HTML files

Lecture 8: Configure HtmlWebpackPlugin

Lecture 9: Create the template to generate HTML files automatically with Webpack

Lecture 10: Configure React by using Webpack

Lecture 11: Installing some dependencies necessary for React to work

Lecture 12: Installing another dependencies necessary for React to work

Lecture 13: Code a simple React application

Lecture 14: Watch mode in Webpack

Lecture 15: Installing Express

Lecture 16: Coding a web server with Nodejs

Lecture 17: Fixing a tiny bug in the code

Lecture 18: Running the web server and testing the React app

Lecture 19: Creating the first React component

Lecture 20: Fixing ReactDOM import

Chapter 2: Configure the product details for the Paypal order

Lecture 1: Splitting the webpage layout into three sections

Lecture 2: Add font files to the project

Lecture 3: Understanding a PayPal order

Lecture 4: Apply a linear gradient as the background for the webpage

Lecture 5: Apply some styling to the text content of the webpage

Lecture 6: Add a CSS framework to the project

Lecture 7: Making a responsive grid with CSS

Lecture 8: Storing the items object into an state variable

Lecture 9: Adding a text field for the name of the product

Lecture 10: Adding a text field for the description of the product

Lecture 11: Adding a text field for the product SKU

Lecture 12: Adding a text field for the price of the product

Lecture 13: Adding a text field for the tax of the product

Lecture 14: Adding a text field for the quantity of the product

Lecture 15: Adding a dropdown menu for the category of the product

Lecture 16: Updating the responsive grid

Lecture 17: Adding the handleChange event handler to the form fields

Lecture 18: Create the logic for the handleChange event handler

Lecture 19: Styling the labels of the form fields

Lecture 20: Adding a button and styling it

Lecture 21: Create a Paypal order

Lecture 22: Saving the Paypal order into the web browser

Lecture 23: Redirecting the user to the next webpage

Lecture 24: Testing the Order Items page

Chapter 3: Configure the shipping address for the Paypal order

Lecture 1: Setting up a new webpage for the project using Webpack

Lecture 2: Add some React code to the new webpage

Lecture 3: Adding a new route to the web server

Lecture 4: Create a new React component from scratch

Lecture 5: Create the basic layout of the webpage

Lecture 6: Styling the Shipping Address page

Lecture 7: Save the shipping address into an state variable

Lecture 8: Create a responsive grid to center the content

Lecture 9: Add a text field to input the fullname of the buyer

Lecture 10: Dropdown menu to select the country code

Lecture 11: Text fields for the state and city

Lecture 12: Text field for the postal code

Lecture 13: Text field for the street and the number

Lecture 14: Text field for the apartment or unit number

Lecture 15: Creating the logic for the onChange event

Lecture 16: Adding a button and styling it with CSS

Lecture 17: Adding the logic for the button

Lecture 18: Redirecting the user to the Amount Breakdown page

Lecture 19: Testing the web application

Chapter 4: Configure the amount details for the Paypal order

Lecture 1: Configure a new page for the project with Webpack

Lecture 2: Creating the basic React code for the new page

Lecture 3: Adding a new route for the new page

Lecture 4: Testing the Webpack configuration so far

Lecture 5: Creating a new React component for the Amount Breakdown page

Lecture 6: Creating the basic sections of the new page

Lecture 7: Apply some CSS styling to the new page

Lecture 8: Create a new state variable for the amount details

Lecture 9: Create a table with the CSS framework

Lecture 10: Create a responsive grid to center the content

Lecture 11: Add a text field to enter the shipping cost

Lecture 12: Add a text field to enter the handling cost

Lecture 13: Add a text field to enter the tax total

Lecture 14: Add a text field for the shipping discount

Lecture 15: Add a text field for the discount

Lecture 16: Display the final amount

Lecture 17: Styling the Amount Breakdown table

Lecture 18: Configure the handleChange event handler

Lecture 19: Explanation of the logic inside the handleChange event handler

Lecture 20: Complete the logic inside the handleChange event handler

Lecture 21: Explanation on how to calculate the item total

Lecture 22: Create the code to calculate the item total

Lecture 23: Create the code to calculate the tax total

Lecture 24: Create the code to calculate the final amount

Lecture 25: Testing the web app

Chapter 5: Configure Paypal to work with the React app

Lecture 1: Creating a test buyer account

Lecture 2: Creating a test seller account

Lecture 3: Creating a Paypal App

Lecture 4: Install fetch

Lecture 5: Get the access token from Paypal

Lecture 6: Function which creates a Paypal order

Lecture 7: PayPal request id

Instructors

Amazing Tutorials
Web Devepoler

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!