Scribd
Upload
34 views

React - Js Learning Objectives 1

The document outlines a React.js learning curriculum consisting of 9 lessons. Each lesson covers specific React topics and by the end of each lesson, students will be able to demonstrate various React skills such as setting up a project, creating components, handling props and state, fetching asynchronous data, and more. The curriculum culminates in a final project where students will integrate concepts like sorting, searching, and pagination.

Uploaded by

Emily
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

React - Js Learning Objectives 1

The document outlines a React.js learning curriculum consisting of 9 lessons. Each lesson covers specific React topics and by the end of each lesson, students will be able to demonstrate various React skills such as setting up a project, creating components, handling props and state, fetching asynchronous data, and more. The curriculum culminates in a final project where students will integrate concepts like sorting, searching, and pagination.

Uploaded by

Emily
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

React.

js Learning Objectives

At the end of each week, each student should be able to demonstrate that their React project has met the following criteria.

Lesson Name Topics Covered Students will be able to…

Lesson 1.1: Project Setup and React Project setup, React components, JSX, Generate a new React project, create a new
Basics React lists unordered to-do list

Lesson 1.2 React DOM and React DOM, React Components Incorporate the unordered to-list into a new
Components component, create an “Add to-do” button
underneath the list.

Lesson 1.3: Props, State, and Handlers Handler functions, React state, callback Create a “To-do list item” component and
handlers move new list items into that component,
enable form submission, store “new to-do”
within React state

Lesson 1.4: Lifting State and Props Lifting state, controlled components, Move the hard-coded to-do list variable into
Handling props handling state, add new to-do items to the list,
destructure props

Lesson 1.5: Hooks and Fragments Side-effects, custom hooks, fragments Save the to-do list in their local browser,
create custom hooks

Lesson 1.6: Reusable Components, Reusable components, component Create a reusable input with label component,
Imperative React composition, imperative React, inline add a “remove” button to list items
handler

Lesson 1.7: Asynchronous Data, Asynchronous data, conditional Prepare code for asynchronous data fetching,
Conditional Rendering, Advanced and rendering, advanced state, impossible add loading state, create a conditional loading
Impossible State state indicator

Lesson 1.8 Data Fetching, Data Data fetching/re-fetching, memorized Connect to Airtable API and fetch data from
Re-fetching, Memorized Handlers handlers Airtable

Lesson 1.9: Third-Party Libraries, Third-party libraries, Async/Await, forms Install and setup React router, add a new
Async/Await, Forms route component
React.js Learning Objectives
Lesson Name Topics Covered Students will be able to…

Lesson 2.1: React Router, Class React router; React legacy: class Refactor class components to function
Components components, state, imperative React components using the useState hook (Note:
this lesson does not work with the to-do list
project)

Lesson 3.1: CSS, Styled Components, CSS, CSS modules, styled Add styling to the to-do list project using CSS
SVG components, SVG modules (see rubric)

Lesson 4.1: Performance, TypeScript, Project structure, typechecking with Install prop types library and assign
Testing, Project Structure prop types, unit testing component prop types

Lesson 5.1: Sorting, Searching, Sorting, reverse sorting Sort their application using Airtable and
Pagination JavaScript

Final Project Rubric*

*Rubric for Albatross course. Check the course website or GitHub page to see the most up-to-date grading rubric.

You might also like