Master Advanced JavaScript: React

Master Advanced JavaScript: React

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3.5 Hours | 1.01 GB

A Four Week Intermediate Course to Build Projects with React

Advanced JavaScript: React is a series of video lessons and tutorials that show students who have a basic JavaScript background how to build three real-world projects that you can add to your website. You will learn how to make your website more interactive and engaging using JavaScript & React.

React was created by Facebook. Think about your Facebook timeline: There are a lot of different components there with a lot going on: the timeline updates when there are new status updates, you can “like” or comment on a status update, you can get messages from Messenger, you can search for people, right?

For a long, long time, creating interactive experiences like this in JavaScript was doable but led to messy code that was difficult to maintain. A common term for this is “spaghetti code” because all the different parts of it intertwine like the pasta on a plate of spaghetti and meatballs.

React gives us a way to organize our code. Our views (i.e. components) are self-contained and, ideally, do just a single thing. This helps us work with other people because when they come look at our code it will be easier for them to understand it. And it makes our code more robust because giving each component just one role to do cuts down on the likelihood of nasty bugs being introduced.

Week 1 – Fundamentals of React.js

In week one, we’ll build a simple React app! We’ll read through a complete React project so that you can begin to answer questions like: When do I choose between JavaScript vs. React? Why do I even need React? And why is React quickly becoming the most popular JS framework on the Web?

Week 2 – Social Media Card

If you’re building the next Twitter, Instagram, or any social media site that has user profiles then React can help you build your user interface. In this week, we’ll use API data, to populate a user profile page.

Week 3 – Pomodoro Timer

The Pomodoro Technique is a time management method used to break down work intervals: 25 minutes of deep work, followed by a 5 minute break. In this week, we’ll build an app to help us focus. The Pomodoro Timer we create will tell us when to work, and when to break.

Week 4 – Product Search

In the final week, you’ll build an app that searches through a list of products. This will be necessary for any app you create where you’d like to parse through lists of users, products, or any data set.

Table of Contents

Week 1
1 Start Here
2 What is React
3 Building a Single Page Application SPA
4 The Hard Truth About React
5 Reacts Hello World
6 The Clock App
7 The Virtual DOM
8 Reading More Complex React Applications
9 Install NPM Node Packing Manager

Week 2
10 A New Social Media App Begins Now
11 Planning the Social Media Card
12 Create the Class Card
13 Create Your First Component
14 Create All The Components
15 Installing Babel via Terminal
16 Props
17 Connect To Our Data
18 Loop Through Updates
19 Homework

Week 3
20 Pomodoro Timer
21 What is the Pomodoro Technique
22 Build the Pomodoro Timer App
23 Build the Pomodoro Component
24 State
25 The Component Lifecycle
26 Alert Conditional
27 Homework

Week 4
28 Product Search App
29 Installing React as a Dependency
30 Build Your HTML Shell
31 Capture The Input
32 Pass the Query
33 Search the Product
34 Show Each Product Result
35 Make Component Files
36 Homework
37 Completed Projects