Introduction to ES6

• Get acquainted with ES6, the latest version of the JavaScript programming language, exploring const, let, arrow functions, template literals, and object literals.

Introduction to React

• Understand the problems React solves.
• Build a dynamic React application using props.
• Identify single page applications and components.
• Render basic React components using JSX and the virtual Document Object Model (DOM).

Problem-Solving With React

• Apply React fundamentals to solve common user interface (UI) problems.

Getting Started With Components

• Render components within another component.
• Pass props to a nested component.

Lab 1

• Add nested components to your blog application.

Manipulating State

• Differentiate between props and state.
• Create and change state in a component.

Understanding Data Flow

• Describe the flow of methods in a component.
• Identify the triggers for the re-rendering of a component.
• Contrast class components with functional components.
• Define unidirectional flow.
• Diagram data in a component hierarchy.

Lab 2

• Use state to create editable entries in your blog application.

Exploring the Component Life Cycle

• Rewrite class components into functional components.
• Define the main categories of the component life cycle.
• Identify general methods in each category of the component life cycle.

Imperative vs. Declarative Programming

• Contrast the concepts of imperative and declarative programming.

Lab 3

• Implement functional components in your blog application.

Introduction to APIs

• Describe what an application programming interface (API) is and why we might use one.
• Use fetch() to make an API call and work with API keys.

Deploying Applications on Heroku

• Describe Heroku.
• Deploy an app on Heroku.
• Set up a CORS proxy on Heroku.

Lab 4

• Use an API to display the current weather on your blog application.

Defining React Routing

• Contrast historical and modern browser history mechanics.
• Define routing.

Using React Router

• Describe React Router's main features and history.
• Use React Router to map URLs to components.
• Use React Router to create links to different components.

Lab 5

• Use React Router to add multiple pages to your blog application.

Building React Applications

• Create a tic-tac-toe game.
• Confidently find and apply features from documentation.
• Build an ATM application.

Final Lab

• Build a working React application of your choice from scratch. Prompts and guidelines are available for students who would like help brainstorming ideas.