Introduction to React Programming

2-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Introduction to React Library training class teaches attendees how to build rich client-side web applications using HTML, CSS, JavaScript, and React. Students develop real-world JavaScript and React applications and learn how to use modern JavaScript programming techniques with an emphasis on core JavaScript concepts, the latest JavaScript syntax features, and popular user interface (UI) development with React. This class is for developers with modern JavaScript experience but wish to learn to React. Vue.js and Angular developers looking to add a new UI library to their skillset will greatly benefit from this class. Also, this class is for developers who want to learn how to create UIs using a popular and modern JavaScript library.

Students will build a project using React to apply their JavaScript skills and to learn about modern UI development. Developers can do wonders with React, an ecosystem that scales between a library and a full-featured framework when combined with related libraries. This course teaches all that you need to know about React to create modern interactive web applications. Students will learn the basics, such as building components and displaying dynamic data, and then progress to advanced features such as using Jest for unit testing JavaScript and React applications, managing state with context, and much more!

Course ObjectivesObjectives

  • Develop real-world JavaScript applications with React
  • Use the basic features of React such as JSX to create functional and class-based components
  • Use hooks to manage state and execute code during renders
  • Compare and contrast functional and class-based components
  • Managing state with context
  • Explore how to unit test JavaScript and React code
  • Apply testing techniques such as snapshot and shallow testing

Course PrerequisitesPrerequisites

Attendees should have a good working knowledge of HTML, CSS, ES2015 JavaScript and web development. Also, students should have general programming experience.

Course RequirementsRequirements

We teach all classes online using Zoom. Students will need to be able to join a Zoom session. We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note taking and coding along with the instructor. All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources.

Course OutlineOutline

The course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. Introduction to React
    1. What is React?
    2. What is TypeScript?
    3. What Problem Does React Solve?
    4. Development Ecosystem
    5. React versus other frameworks
  2. Getting Started
    1. Create React App project generator
    2. Web Browser Developer Tools
    3. React Developer Tool Extension
    4. Running and Debugging a React Application
    5. Role of Node.js
    6. Purpose of React and ReactDOM
    7. ES2015 Modules
  3. Functional Components
    1. What are Components?
    2. Create Element and JSX
    3. Benefits of JSX
    4. Fragments
    5. JavaScript Arrow Functions
    6. JSX and Expressions
    7. Displaying Collections of Data
    8. JavaScript Array Maps and React Keys
    9. Passing Data with Props
    10. Validating Props with PropTypes
    11. Default Props
    12. Managing State with Context API
  4. Class-Based Components
    1. JavaScript Classes and Extends
    2. Configuring State
    3. Component Did Mount Lifecycle Method
    4. Context of Event Handlers
    5. Class Properties and Class Arrow Functions
    6. PropTypes and Default Props on Classes
  5. Hooks
    1. Overview of Hooks
    2. State Hook
    3. Effect Hook
  6. Unit Testing with Jest
    1. What is Unit Testing?
    2. JavaScript Unit Testing
    3. Unit Testing with Jest
    4. Snapshot, DOM and Shallow Testing
    5. Handling Events
    6. Testing Functional Components
    7. Testing Class-based Components
Scroll to Top