JavaScript and React for Developers: Master the Essentials
4.5 (429 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,341 students enrolled

JavaScript and React for Developers: Master the Essentials

Advance your JavaScript skills and learn the modern approach to web applications by building projects from the ground up
4.5 (429 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,341 students enrolled
Created by Cassidy Williams
Last updated 6/2018
English
English [Auto]
Current price: $97.99 Original price: $139.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 2 articles
  • 20 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build modern web applications with JavaScript and React
  • Master core JavaScript concepts to nail a JavaScript-focused job interview
  • Explore the differences between package managers, build tools, and deployment options
  • Utilize real-world APIs to write portfolio-building projects
Course content
Expand all 64 lectures 03:18:48
+ Introduction
4 lectures 04:49
Optional: Install Software for Mac
01:33
Optional: Install Software for Windows
01:30
Before we dive in...
00:47
+ The DOM
5 lectures 14:40

I will explain what the DOM is and how it relates to the HTML we write in webpages, and show that JavaScript can access the DOM.

Preview 03:40

I will explain the DOM API, and cover functions from typical job interviews, including getElementById, querySelector, createAttribute, and more. This is a fundamental topic to understand moving forward.

Preview 07:41

Students will solve a common technical interview question: finding a particular DOM node based on a data attribute.

The DOM Activity: Find a DOM Node
00:55

Students will review my solution to the activity question: finding a particular DOM node based on a data attribute.

Activity Review
01:48
+ Events and Callbacks
5 lectures 09:54
Intro to Events and Callbacks
00:34

I will explain in further detail events in JavaScript and the functions they provide in a given application.

Events
01:03

I will explain what a callback is, and how to use them with regards to events.

Callbacks
06:20

In this activity, we will create a browser event triggered by a button click that will change the theme of a website.  This should take around 10-15 minutes, depending on how much you want to customize!

Events and Callbacks Activity: Website Theme Toggler
00:34

Students will review my solution to the activity.

Events and Callbacks Activity: Solution
01:23
+ AJAX
5 lectures 14:44
Intro to AJAX
00:43

Students will learn how AJAX came to be, synchronous vs. asynchronous programming, and how prevalent AJAX is in the web today. 

What is AJAX?
02:18

I will go over the different AJAX methods one might find when using an API, what each means, and what HTTP responses you can expect from them.

AJAX & HTTP Specifics
01:58

Students will make an AJAX request to the GitHub API using XMLHttpRequest

Calling an API Activity Part 1: The Callback Method
04:27

Students will make an AJAX request to the GitHub API using Promises.

Calling an API Activity Part 2: The Promises Method
05:18
+ JSON
4 lectures 10:58
Intro to JSON
00:35

I will explain how to pull information from JSON and lead students to making an API call and parsing the data.

Use JSON
02:41

Students will parse the data retrieved from the GitHub API and display it in the browser, building their own GitHub User search engine.

Calling an API Activity Part 3: JSON
01:50

Students will review my solution to the GitHub API User search activity.

Calling an API Activity: Solution
05:52
+ Scope
2 lectures 06:36
Intro to Scope
00:32

I will explain the nuances of scope and the variable this in JS compared to other languages, and how it works through examples.

Scope and the Variable this
06:04

Students will be quizzed on the DOM, events and callbacks, AJAX, JSON, and Scope.

Interview Prep #1
10 questions
+ ES6+
9 lectures 28:38

I will explain transpiling and polyfilling as a means of making code work across all browsers.

Transpiling and Polyfilling
01:35

I will explain the different variable declaration types in ES6. I will also explain how block scoping as evolved in ES6 compared to previous versions of JavaScript.

var vs let vs const
06:46

Students will be quizzed on the differences between var vs. let vs. const, what transpiling/polyfilling is, and the differences between block scope versus previous types of discussed scope.

Interview Prep #2
4 questions

Students will learn the convenience of default values in ES6.

Default Values
03:49

Students will learn array and object destructuring.

Destructuring
05:17

Students will learn about the similarly named (though differently functioning) object and template literals.

Literals
05:48

Students will learn about ES6 Arrow Functions, their syntax, and how the context of "this" is lexical in an arrow function.

Arrow Functions
02:39
Interview Prep #3
5 questions

In this activity, we'll make a NASA image search site. This will be similar to our GitHub user search activity, but with a few more parts.

Your assignment:

  • Pull data from the NASA Image API using AJAX.  A link to the API and its documentation is attached to this lecture.  You can get a free API key from NASA, and the link to that is also attached.  Make sure you use ES6 arrow functions for all of your callbacks.
  • Handle 200, 400, and 500 response errors using Promises.
  • Display different image search results by using destructuring to parse the JSON response.
  • Save the user's previous searches using the DOM local storage API.  We didn't cover this in the course, but it's very easy to work with, and a link to its documentation is also attached.
  • Use a mouseover event to make the caption appear for each image search result.
  • Use a default value for when a user doesn't input anything in the search box.
  • Use template strings to display all the text on the page.
JavaScript Section Final Activity: NASA Search API
01:34
Part 2: On Your Own
00:36
+ JavaScript Section Recap
1 lecture 03:15

In this section, students will review what we learned so far about JavaScript.

JavaScript Recap
03:15
+ Web Application Building
10 lectures 41:01
Optional: Install Software for Mac
02:31
Optional: Install Software for Windows
00:43

Students will learn what npm and Yarn are, and how to run a very basic setup for projects with them.

npm and Yarn
07:07

Students will learn what Grunt is, and how an example project is set up with it.

Grunt
03:53

Students will learn how to set up a watcher and an uglifier with Grunt, and are challenged to also add in the grunt-babel plugin.

Grunt Activity
10:17

Students will learn what Gulp is, and how an example project is set up with it.

Gulp
03:57

Students will learn how to compile Handlebars templating with Gulp, and build their own portfolio site in the process.

Gulp Activity
09:04

Students will learn what webpack is, and how an example project is set up with it.

webpack
01:07

Students will review what we have learned thus far in this section, and I'll direct them to documentation for further information, if needed.

Web Application Building Recap
01:44
+ What is React?
4 lectures 07:28

Students will learn why React was built, and what React can do, and why one would choose it for their applications.

Why React
02:43

Students will see where React can live in a web application.

Where React Lives
02:54

Students will learn what JSX is, and the advantages of using it in React.

JSX
01:15
Requirements
  • Before taking this course you should know how to read HTML and CSS and be able to write very basic JavaScript (if statements, loops, and objects).
  • In this course, I will help you install the necessary software, libraries, and tools on your computer. It will be helpful if you are comfortable with installing your own software and knowing a couple terminal commands (specifically mkdir and cd).
  • The ideal student would be eager to learn the theory behind certain aspects of the browser, JavaScript, and React, in addition to hands-on applications.
Description

If you have some coding experience under your belt, but you want to take your web development skills to the next level, this course is for you.  This is a comprehensive introduction to the deeper ins-and-outs of JavaScript, and the modern, increasingly popular framework, React.

Whether you are a student or working developer who only knows Java or Python, a wannabe developer who’s learning on their own, an applicant for a coding bootcamp, or a developer who hasn’t touched web technologies in a while, the concepts covered in this course will help you beef up your knowledge, your skills, your resume, and your portfolio.

In this course, you will:

  • Master fundamental JavaScript concepts like the DOM, Events and Callbacks, and AJAX

  • Call real-world APIs and parse the data in your own web projects

  • Work with the new features of the JavaScript language thanks to ES6

  • Use popular web tooling including npm, Yarn, Grunt, Gulp, and webpack

  • Study the ins and outs of React component lifecycles, state, properties, and other core React concepts

  • Build modern web projects with React

  • Deploy your web applications online for the world to see

  • Take real-world interview practice quizzes as you build your knowledge

You’ll be practicing your skills through quizzes and by building both simple and complex projects in this course, including but not limited to a website theme toggler, a NASA Image Search site, a personal portfolio site, and a markdown note manager.  Each of these projects are expandable in a way where you can customize it to your heart’s content, perfect for your own portfolios. The quizzes cover actual interview questions as well as topics you’ll see throughout your front-end development career. By the end of this course, you should feel comfortable doing a JavaScript job interview.

Who this course is for:
  • People who want to build modern web applications with React
  • Intermediate-level developers (students or professional developers who know some programming, not necessarily JavaScript, but can understand the syntax and very basics of JS)
  • Wannabe developers who have finished tutorials on Codecademy (or similar) and want a deeper dive into JavaScript
  • Developers who want to build their resume material with a modern framework
  • People interested in applying to join a coding bootcamp
  • Former web developers who haven’t used JavaScript in 4+ years
  • Web developers who want a refresher on core JavaScript concepts and how to use React
  • College students who want to try their hand at web programming
  • This course is NOT for people with no coding experience. You should be able to understand the basic syntax of JavaScript (objects, conditionals, loops)