O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

ReactJS Fundamentals, Second Edition

Video Description

6+ Hours of Video Instruction

Get started with React.js for front-end web development

Overview

React.js Fundamentals LiveLessons covers vanilla React, as well as a refresher on some advanced JavaScript topics and essential ES6 features. You first learn how to create a modern React toolchain. Next, the training covers the advanced JavaScript concepts that regularly pop up in React and the modern ES6 features you’ll need to write more idiomatic React code. Next, the training covers a conceptual understanding of React and takes an in-depth look at how React’s virtual dom works. Starting in Lesson 6, you dive into writing React code using the original create class syntax and begin to look at the JSX. Next, you see how to rewrite your earlier code using modern ES6 features. From there, you learn the remaining vanilla React topics, such as component life cycle and state management. The training wraps up with a discussion of how you can tweak performance in React apps.

About the Instructor

Charles Crawford III has more than ten years of software experience and five years of experience in software education. He is currently a lead instructor at Code Fellows, where he teaches full-stack web programming. He is also an active software and writing consultant and the director of marketing for Hack The People, a distributed non-profit organization focused on fostering mentor-mentee relationships in software development. Additionally, Charles is an active blog contributor at The New Stack, a site featuring news about and analysis of an ever-changing software development ecosystem. Prior to this, Charles was a developer evangelist for Shippable, a SaaS that leverages Docker to provide continuous integration services. He was also a software engineer at Amazon Web Services on the Elastic Beanstalk team, where he worked on things such as the Elastic Beanstalk Ruby container, Nodejs container, and the Docker container.

Skill Level

  • Intermediate
Learn How To
  • Utilize the React toolchain
  • Understand the advanced JavaScript features used with React
  • Use ES6 features with React
  • Understand basic React concepts
  • Utilize React’s virtual DOM
  • Code a React app with traditional and ES6
  • Optimize React performance
  • Utilize libraries to make React a complete front-end solution
  • Use React router
  • Use Flux
  • Use Redux
  • Test React applications
Who Should Take This Course
  • Intermediate to experienced developers who want to learn React.js for front-end web development
Course Requirements
  • JavaScript
  • HTML
  • AJAX (not required, but useful for this course)
  • REST (not required, but useful for this course)
  • ES6 (not required, but useful for this course
About Pearson Video Training

Pearson publishes expert-led video tutorials covering a wide selection of technology topics designed to teach you the skills you need to succeed. These professional and personal technology videos feature world-leading author instructors published by your trusted technology brands: Addison-Wesley, Cisco Press, Pearson IT Certification, Prentice Hall, Sams, and Que Topics include: IT Certification, Network Security, Cisco Technology, Programming, Web Development, Mobile Development, and more. Learn more about Pearson Video training at http://www.informit.com/video.

Table of Contents

  1. Introduction
    1. ReactJS Fundamentals: Introduction 00:02:48
  2. Lesson 1: Creating Your React ToolChain
    1. Learning objectives 00:01:49
    2. 1.1 Understand the requirements of your toolchain 00:04:11
    3. 1.2 Use NPM to manage your application's dependencies and run tasks 00:09:43
    4. 1.3 Compile es6 to es5 with Babel 00:08:13
    5. 1.4 Bundle applications with Webpack 00:04:04
    6. 1.5 Understand how Babel and Webpack work together and create a basic build process 00:06:39
    7. 1.6 Create a development optimized build process 00:04:02
    8. 1.7 Create a production optimized build process 00:02:39
    9. 1.8 Use create-react-app 00:11:05
  3. Lesson 2: Understanding Advanced JavaScript Required for ReactJS
    1. Learning objectives 00:01:20
    2. 2.1 Use functional programming in JavaScript 00:21:02
    3. 2.2 Understand execution context and the this keyword! 00:10:38
    4. 2.3 Control execution context with bind/call/apply 00:06:20
  4. Lesson 3: Utilizing ES6 in Your React Applications
    1. Learning objectives 00:00:46
    2. 3.1 Understand ES6 template strings 00:02:28
    3. 3.2 Understand ES6 default arguments 00:04:24
    4. 3.3 Understand ES6 rest and spread 00:09:19
    5. 3.4 Understand ES6 arrow functions 00:08:03
    6. 3.5 Understand ES6 destructuring (bug fix) 00:10:13
    7. 3.6 Understand ES6 modules 00:04:03
    8. 3.7 Understand ES6 classes 00:06:53
    9. 3.8 Understand ES6 promises, Part 1 00:08:25
    10. 3.9 Understand ES6 promises, Part 2 00:03:02
    11. 3.10 Understand ES6 promises, Part 3 00:15:03
    12. 3.11 Understand ES6 fetch 00:03:10
    13. 3.12 Understand ES6 generators 00:08:16
    14. 3.13 Combine generators and Promises 00:04:15
    15. 3.14 Understand Async await 00:04:07
  5. Lesson 4: Understanding Basic React Concepts
    1. Learning objectives 00:01:10
    2. 4.1 Utilize component-based design 00:12:15
    3. 4.2 Use one-way data flow and rendering 00:06:43
  6. Lesson 5: Understanding the Virtual DOM
    1. Learning objectives 00:01:08
    2. 5.1 Understand the virtual DOM versus the actual DOM 00:04:27
    3. 5.2 Understand the diffing algorithm 00:13:09
  7. Lesson 6: Coding Your First React App with Traditional React
    1. Learning objectives 00:00:23
    2. 6.1 Use createClass and render 00:11:50
    3. 6.2 Understand JSX 00:05:48
    4. 6.3 Set initial app state 00:08:01
  8. Lesson 7: React Fundamentals with New ES6 Syntax
    1. Learning objectives 00:00:23
    2. 7.1 Create with new ES6 class syntax 00:02:38
    3. 7.2 Understand properties and state 00:09:44
    4. 7.3 Adding new state to an app 00:09:04
    5. 7.4 State changes through child components 00:08:07
    6. 7.5 Use inputs with React 00:10:56
    7. 7.6 Functional stateless components 00:05:32
    8. 7.7 Utilize data fetching in React applications 00:11:10
    9. 7.8 Understand React component lifecycle methods 00:05:15
    10. 7.9 Utilize content of custom components 00:03:05
    11. 7.10 Understand higher order components 00:06:27
    12. 7.11 Utilize propTypes 00:04:39
    13. 7.12 Utilize ref to access child components 00:02:13
  9. Lesson 8: React Performance
    1. Learning objectives 00:00:16
    2. 8.1 Improve child rendering performance by setting keys 00:03:15
    3. 8.2 Implement performance optimizations with shouldComponentUpdate 00:04:29
  10. Lesson 9: Styling with React
    1. Learning objectives 00:00:23
    2. 9.1 Inline styles 00:04:41
    3. 9.2 Use external style sheets 00:06:45
    4. 9.3 Manually configure CSS modules 00:06:30
    5. 9.4 Implement CSS modules with styled-jsx 00:02:25
  11. Summary
    1. ReactJS Fundamentals: Summary 00:00:32