Become a Front End Developer

React by Example

React by Example is another course in the React series where developers learn the full scope of React and its concepts in shorter lessons. 

In continuation of the React course, where basic, intermediate, and advanced React, as well as several projects created by developers were discussed, it is only logical that the former is a prerequisite to taking this course. 

React by Example, Part 1 of 7: First Components

Through this course, the developer shall finalize developing the Tech Store Application with the use of Contentful, as well as inserting Paypal to the shopping Cart. 

Additional topics and concepts are also discussed along the way, most of which prove to be helpful to the developer in other application developments. 

This first chapter will cover the first components and the following topics:

• Introduction to Contentful
• Contentful Model
• Adding Content
• Retrieving Content
• Env Build Variables
• Paypal Setup

React by Example, Part 2 of 7: Page Setup

In this chapter, building and expanding the application through creating its first pages are elaborated. The developer shall learn to create and set up the basic pages of the application.

To further expand the processes of developing these first pages, the developer shall learn new React tools and concepts to create the following:

• Default Page
• About Page
• Contact Page
• Footer
• Home Page Services

React by Example, Part 3 of 7: Products Setup

This chapter covers several point functions wherein the developer learns to set up and design the product page. 

Some of the topics discussed in this chapter are State Context, products, and product components. To further elaborate on the lessons, the following topics are examined:

• Introduction to State Context
• Set Products
• Featured Products
• Product Component
• Products Page

React by Example, Part 4 of 7: Products to Cart Logic

The developer shall learn different functions and set up logic to adding products to the shopping cart in this chapter. A double-check of the functions, such as ensuring functionality, are also covered.

Some of the concepts discussed in this lesson are the following:

• Add Cart Logic
• Add Totals Logic
• Sync Storage Logic
• Set Single Product
• Single Products Page
• Side Cart Component

React by Example, Part 5 of 7: Cart Page

In this chapter, the developer shall learn the concepts behind the Cart Page. This includes setting up functionality for adding and deducting items, as well as clearing the cart completely.

These functionalities are elaborated in short courses that discuss the following at length:

• Initial Setup
• Cart Columns Component
• Cart Totals Component
• Cart List Component
• Cart Item Component
• Cart Functionality

React by Example, Part 6 of 7: Product Filter Component

To proceed with developing the Tech Store application, one of the last few steps is Product Filter Component. 

In this chapter, the developer shall learn to add filters to the products page and create a new component to execute this functionality.

To further elaborate on this, the developer shall learn the following concepts: 

• Context Setup
• Products Component Setup
• Filter Component
• Select Input Logic
• HandleChange Method
• SortData Method

React by Example, Part 7 of 7: Contentful and Paypal

To finalize the e-commerce application Tech Store, several concepts and processes must still be learned and executed by the developer. 

The final chapter of this course covers two specific topics, which are finalizing the development of the application with Contentful and adding Paypal to the e-commerce app’s shopping cart. 

In this last short course, the developer shall learn to execute the following:

• Contentful Introduction
• Contentful Model
• Adding Content
• Retrieving Content
• Env Build Variables
• Paypal Setup