CS220 - Advanced Web Development

Course Description

The Front-End Development with React course is designed to provide students with a comprehensive understanding of React, a popular JavaScript library for building user interfaces. Students will learn the core concepts of React, including component-based architecture, state management, and event handling. Through hands-on projects and practical exercises, students will gain the skills necessary to develop dynamic and interactive web applications using React.

Course Learning Outcomes

By the end of this course, students will be able to: • Set up a React project and configure the development environment. • Understand React components and JSX syntax. • Implement lists and data rendering in React. • Instantiate React components and manipulate the React DOM. • Handle events and utilize callback functions in JSX. • Pass and handle props in React components. • Manage state in React components. • Lift state up in React to share data between components. • Implement controlled components for form handling. • Handle side effects and asynchronous data fetching in React. • Conditionally render components based on data or user interactions. • Create reusable React components and compose them together. • Implement inline event handlers in JSX. • Fetch data from external sources in React applications. • Handle re-fetching of data in React applications. • Explicitly fetch data with React.

Course Materials

  • Labs
  • Lecture Notes

Course Content

  • Introduction, Dev Environment
  • Component, JSX
  • Lists, Mutliple Components
  • Component Instantiation, Virtual DOM
  • Handler function in JSX
  • Props, State
  • React Controlled Components, Props Handling, React Side-Effects
  • Reusable React Component, React Component Composition, Inline Handler
  • React Asynchronous Data, React Conditional Rendering, Data Fetching with React

TBS Grading Scale

Scale (out of 100)TBS Grading ScaleGrade Point
Grade > 90A4.0
87≤ Grade < 90A-3.7
83 ≤ Grade < 87B+3.3
80 ≤ Grade < 83B3.0
77 ≤ Grade < 80B-2.7
73≤ Grade < 77C+2.3
70 ≤ Grade < 73C2.0
67 ≤ Grade < 70C-1.7
65 ≤ Grade < 67D+1.3
60 ≤ Grade < 65D1.0
Grade < 60F0.0