Learn your way! Get started

React, Part 6 of 7: Food2Fork Project

with expert John Smilga


Watch trailer


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 6/6/2019
Level Advanced
Runtime 3h 32m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

React is a Javascript library for building user interfaces. This course will build out a a single page recipe application called Food2Fork. It will make good use of React life cycle methods and how React router delivers user experience.

Prerequisites

• Basic HTML,CSS and Javascript knowledge • ES6 is a plus

Meet the expert

John Smilga is a Front-End Web Developer in the Los Angeles Area. John has a Bachelor’s Degree in Software Development. He spends most of his time working with Javascript, CSS3, and HTML5, and he is passionate about everything related to web development. He learns from the community and loves to share with the community what he has learned. He strives to explain very complex topics in a simple manner that everyone can understand.

Course outline



Food2Fork

Food2Fork Intro (25:23)
  • Introduction (00:08)
  • Introduction Food2Fork (03:55)
  • Setup (07:04)
  • Fonts (03:27)
  • CSS (06:10)
  • Continuous Deployment (04:29)
  • Summary (00:08)
React Router Page Structure (21:27)
  • Introduction (00:08)
  • React Router and Page Structure (04:04)
  • Create Pages (06:43)
  • React Router (10:22)
  • Summary (00:08)
Navbar Component (10:45)
  • Introduction (00:08)
  • Navbar Component (05:54)
  • Link (04:35)
  • Summary (00:08)
Header Component (19:54)
  • Introduction (00:08)
  • Header Component (10:14)
  • Background (09:24)
  • Summary (00:08)
Default Page Recipes (19:25)
  • Introduction (00:08)
  • Default Page (07:16)
  • Recipes Page Structure (11:53)
  • Summary (00:08)
Search Component (12:27)
  • Introduction (00:08)
  • Search Component (06:45)
  • input Group (05:25)
  • Summary (00:08)
API and Recipe List (14:20)
  • Introduction (00:08)
  • Food2Fork API (07:17)
  • Recipe List Component (06:47)
  • Summary (00:08)
Recipe Component (16:42)
  • Introduction (00:08)
  • Recipe Component (09:49)
  • Recipe Component Continued (06:36)
  • Summary (00:08)
Single Recipe Page (22:02)
  • Introduction (00:08)
  • Single Recipe Page (12:13)
  • Link (09:32)
  • Summary (00:08)
Single Recipe Ajax Request (12:29)
  • Introduction (00:08)
  • Single Recipe Ajax Request (07:36)
  • Console Log (04:37)
  • Summary (00:08)
ENV Variables and SourceFiles (10:05)
  • Introduction (00:08)
  • ENV Variables (05:26)
  • Source Files (04:22)
  • Summary (00:08)
Recipe Page Ajax Request (26:40)
  • Introduction (00:08)
  • Recipe Page Ajax Request (08:37)
  • Search Functionality (17:46)
  • Summary (00:08)
Finished Project (00:49)
  • Introduction (00:08)
  • Finished Project (00:21)
  • Final Thought (00:12)
  • Summary (00:08)