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

Created byCassidy Williams

Last updated 6/2018

English

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

14 sections • 64 lectures • 3h 18m total length

Introduction0:59
Explore the nitty gritty of javascript and react for developers, covering the DOM, event driven development, API calls, ESX, dependency management, and build tools under Cassidy Williams.
Optional: Install Software for Mac1:33
Discover mac software setup for this course, including choosing an editor (Atom recommended), and using Chrome to view results, with flexibility for other editors and browsers.
Optional: Install Software for Windows1:30
Learn how to set up a Windows development environment for JavaScript and React, including choosing an editor and using Chrome for testing and consistency.
Before we dive in...0:47

Introduction to the DOM0:36
Master the document object model (DOM) and learn to use and manipulate it for complex web apps and a common technical interview question.
What is the DOM?3: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.
What Can I Do with the DOM?7:41
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.
The DOM Activity: Find a DOM Node0:55
Students will solve a common technical interview question: finding a particular DOM node based on a data attribute.
Activity Review1:48
Students will review my solution to the activity question: finding a particular DOM node based on a data attribute.

Intro to Events and Callbacks0:34
Explore event driven development in JavaScript as you build an app that toggles themes in response to browser events like page load, hover, changes, and data loaded.
Events1:03
I will explain in further detail events in JavaScript and the functions they provide in a given application.
Callbacks6:20
I will explain what a callback is, and how to use them with regards to events.
Events and Callbacks Activity: Website Theme Toggler0:34
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: Solution1:23
Students will review my solution to the activity.

Intro to AJAX0:43
Learn how ajax enables pulling external resources and data into web pages without full page reloads, and explore what ajax does under the hood with HTTP requests.
What is AJAX?2:18
Students will learn how AJAX came to be, synchronous vs. asynchronous programming, and how prevalent AJAX is in the web today.
AJAX & HTTP Specifics1:58
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.
Calling an API Activity Part 1: The Callback Method4:27
Students will make an AJAX request to the GitHub API using XMLHttpRequest
Calling an API Activity Part 2: The Promises Method5:18
Students will make an AJAX request to the GitHub API using Promises.

Intro to JSON0:35
Explore json, a data storage and transfer format that is not javascript but its own language, essential for javascript development and usage.
Use JSON2:41
I will explain how to pull information from JSON and lead students to making an API call and parsing the data.
Calling an API Activity Part 3: JSON1:50
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: Solution5:52
Students will review my solution to the GitHub API User search activity.

Intro to ES60:34
Explore ES6, the sixth version of JavaScript under the ECMAScript standard, and learn its new features. Take quizzes and join a fun activity to reinforce ES6 topics.
Transpiling and Polyfilling1:35
I will explain transpiling and polyfilling as a means of making code work across all browsers.
var vs let vs const6:46
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.
Interview Prep #2
Default Values3:49
Students will learn the convenience of default values in ES6.
Destructuring5:17
Students will learn array and object destructuring.
Literals5:48
Students will learn about the similarly named (though differently functioning) object and template literals.
Arrow Functions2:39
Students will learn about ES6 Arrow Functions, their syntax, and how the context of "this" is lexical in an arrow function.
Interview Prep #3
JavaScript Section Final Activity: NASA Search API1:34
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.
Part 2: On Your Own0:36
Add a loading indicator and a sidebar of previous search terms to the api-driven project, using local storage to persist terms, as the instructor previews the upcoming solution.

Intro to Dependency Management0:38
Explore dependency management and build tools for modern web apps, including npm, yarn, grunt, gulp, and webpack, and learn how to compile and bundle JavaScript projects.
Optional: Install Software for Mac2:31
Install Node and npm, verify versions, and install Yarn, Grunt, Gulp, and Webpack globally. Then prepare your development environment for the course.
Optional: Install Software for Windows0:43
npm and Yarn7:07
Students will learn what npm and Yarn are, and how to run a very basic setup for projects with them.
Grunt3:53
Students will learn what Grunt is, and how an example project is set up with it.
Grunt Activity10:17
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.
Gulp3:57
Students will learn what Gulp is, and how an example project is set up with it.
Gulp Activity9:04
Students will learn how to compile Handlebars templating with Gulp, and build their own portfolio site in the process.
webpack1:07
Students will learn what webpack is, and how an example project is set up with it.
Web Application Building Recap1:44
Students will review what we have learned thus far in this section, and I'll direct them to documentation for further information, if needed.

Intro: What is React?0:36
Discover why React remains a popular front-end framework and how its core concepts transfer to other frameworks like Angular and Vue, boosting your front-end developer job prospects.
Why React2:43
Students will learn why React was built, and what React can do, and why one would choose it for their applications.
Where React Lives2:54
Students will see where React can live in a web application.
JSX1:15
Students will learn what JSX is, and the advantages of using it in React.

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)

JavaScript and React for Developers: Master the Essentials

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 5min

The DOM5 lectures • 15min

Events and Callbacks5 lectures • 10min

AJAX5 lectures • 15min

JSON4 lectures • 11min

Scope2 lectures • 7min

ES6+9 lectures • 29min

JavaScript Section Recap1 lecture • 3min

Web Application Building10 lectures • 41min

What is React?4 lectures • 7min

Requirements

Description

Who this course is for: