JavaScript and React for Developers: Master the Essentials

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

2,341 students enrolled

Created by Cassidy Williams

Last updated 6/2018

English

English [Auto]

Preview this course

JavaScript and React for Developers: Master the Essentials

$97.99 $139.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

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

+ – Introduction

4 lectures 04:49

Preview 00:59

Optional: Install Software for Mac

01:33

Optional: Install Software for Windows

01:30

Before we dive in...

00:47

5 lectures 14:40

Introduction to the DOM

Preview 00:36

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.

What is 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.

What Can I Do with the DOM?

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

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

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

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

9 lectures 28:38

Preview 00:34

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

Intro to Dependency Management

Preview 00:38

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

Intro: What is React?

Preview 00:36

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

4 more sections

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)

Featured review

Melissa Kyd ( 28 courses, 2 reviews )

6 months ago

The course is pitched at exactly the level stated, so it is going to be the most relevant for those with previous dev experience, looking to transition/upskill to using React. I personally found it consolidated a lot of JS and React concepts that I'd read about in the past, by providing useful examples and concise explanations. I would definitely recommend the course.