Skip to content

Latest commit

 

History

History
150 lines (105 loc) · 9.14 KB

Week-00.md

File metadata and controls

150 lines (105 loc) · 9.14 KB
Raw
title filedUnder dateModified dateCreated tags context parent content
Week-00
unsorted
2024-10-09
2024-08-27
react
ctd
freelance
personal
work
[[Intro to React V3]]
lesson plan

Week-00

Introduction

Topics Covered

  • What You'll Get out of this Course
  • Course Structure
  • Weekly Lesson Structure
  • Weekly Assignments
  • Final Project
  • Practicum and CTD Learns Apprenticeship (optional)

Lesson Objectives

By the end of this lesson, we will:

  • explain the objectives of the course
  • outline the course structure and weekly lesson layout
  • summarize the project that you'll be building with the weekly lessons
  • explain the required weekly assignments and the final project at the end of the course
  • list where you can find further resources for the week's lesson

Discussion Topics

What You'll Get Out of this Course

You will be learning React, a popular user interface (UI) development library used to create interactive web applications. We will build a to-do list application over the course of the weekly assignments. The final two weeks of the course are dedicated to a final project. With the knowledge gained from this course, you will be equipped with the knowledge to work on real-world React applications!

Course Structure

Curriculum Outline

The Intro to React v3 course consists of 13 weekly lessons and 2 project weeks for a final project of your choosing. Each of the weekly lessons builds on previous lessons so it is important that you go through the course in order. Don't skip around or miss a week.

  • Weeks 1-6 focus on the basics of React and how to build out a simple application
  • Weeks 7-9 teach how to incorporate remote data fetched from and saved to an API
  • Week 10 covers how to use CSS to style an application's user interface (UI)
  • Weeks 11-12 teach techniques to manage complex data in an application
  • Week 13 introduces common tools and libraries that a React developer will need to know about
  • Week 14-15 project time!

One of the main requirements1 for graduation is that all weekly assignments must include a link to a pull request (PR) that has been reviewed and approved by your assigned reviewer.*

The materials for the course is further broken down into a full list of topics covered each week. Every section is titled with their topics so that they double as useful search terms when looking for external resources.

  • Week 1 - Intro to React, App Installation, and Project Setup
  • Week 2 - ReactDOM, Components, JSX, and Troubleshooting
  • Week 3 - State, Props, Common Component Props
  • Week 4 - Basic Hooks, Passing Props, Events, Updating State
  • Week 5 - Controlled Components and Forms
  • Week 6 - Re-usable Components, Refactoring, Project Organization, and Testing
  • Week 7 - Data fetching, Conditional Rendering, UI Update Strategies
  • Week 8 - Sorting, Filtering
  • Week 9 - useCallback, useMemo, Limiting Network Requests, and Refetching
  • Week 10 - Styling and Including Graphical Elements
  • Week 11 - Advanced State and useReducer, useContext
  • Week 12 - react-router, Routing, and Pagination
  • Week 13 - Deploying an App and a Snapshot of the React Ecosystem (frameworks, libraries, TS)
  • Week 14 - Final Project Begin - Requirements, Planning, and Getting Started
  • Week 15 - Final Project - Continued Work

Weekly Lesson Structure

Each weekly lesson page has the same structure so you'll know where to find specific information where you need it:

[!Lesson Page Structure]

  1. Introduction
  2. Topics
  3. Objectives
  4. Discussion
  5. Cover topics in order
  6. Code examples
  7. Weekly assignment instructions
  8. Description of app's capabilities on submission
  9. Instructions
  10. References and Further Reading

1. Introduction

The introduction will give you information about what you're going to learn that week and how it applies to to the bigger picture.

2. Discussion

In the discussion portion of each weekly lesson, we will explore each of the listed topics in depth. We will learn key techniques and best practices that developers employ while working with the topics presented. All coding examples are from another project we'll watch come together: CTD's new eCommerce Store : CTD Swag2. No coding for that project is required from you, but if you're interested, a repo for this project can be found here: #placeholder/swag-app-link

3. Weekly Assignment Instructions

Most of our weekly assignments will involve developing a to-do application. A demo of the app can be found here: #placeholder/todo-app-link. Each week you will apply the lesson materials to develop the to-do app until it is complete, functional, and is worthy of a place in your portfolio.

The instructions will provide enough details to code out the week's assignment but you will also be given certain tasks to figure out how to accomplish on your own. Balancing written instruction with individual problem solving keeps the course reasonably challenging and a lot more interesting than a list of things to type into your code. Professional developers are expected to engage in problem solving and research while doing their work. Some tasks you will be responsible for may be challenging but are designed to be reasonable for a junior developer to undertake.

Once completed with the weekly lesson instructions, you'll submit a PR of the week's code changes using an assignment submission form linked at the the "Instructions" section. A step-by-step of how to open a PR can be found here: #placeholder/pr-instructions. The assignment submission form also includes open-ended mindset questions that will help you start to think like a professional developers.

A reviewer will look at the PR to approve it or recommend changes. You'll be expected to make any requested changes before starting the next lesson. If you have questions about the review or need any clarifications, use the conversation tools on the PR page and/or Slack to talk with your reviewer. They are there to help you out!

A final note: there will be a few weeks where you will work with other repos but those will be clearly indicated in the assignment instructions.

4. References and Further Reading

The curriculum links to resources in each lesson but these can be difficult to find when scanning through paragraphs of text. Every weekly lesson's page ends with a section that re-lists all of these links and include other useful resources.

We hope that you find the weekly lesson page layout easy to navigate. If you have any suggestions to improve your learning experience or discover useful resources you want to share with future students, please let us know! #placeholder/feedback-form

Final Project

The final two weeks of the course will be used to develop a final project. You will demonstrate your React knowledge to make a web application of your own choosing! It will be an opportunity to work on a problem that you find interesting or an idea that sounds like fun. Don't worry at this point if you don't have any project ideas. We will brainstorm some ideas and discuss how to plan our project work before starting on it.

Practicum and CTD Learns Apprenticeship

Note

Both the practicum and the apprenticeship are optional and happen after the end of the course

  • #placeholder/practicum info
  • #placeholder/apprenticeship info

Weekly Assignment Instructions

We are almost done with this week as we prepare to jump into the course. You are encouraged to become familiar with all the material above and the student handbook. A thorough review of all materials will help you set up a routine that will support your learning.

  • After reading this week's materials you will probably have a few questions. Write down your questions that you have. Bring them to your first group session and share them with the mentor hosting that session.
  • Finally, complete the quiz at the following link. #placeholder/quiz-link will let us know that you understand how to navigate the course.

References and Further Reading

Footnotes

  1. Exceptions may be made if you have deferred from midway through an earlier class but you must discuss those with the class coordinator before the start of a course. ↩

  2. this isn't a real store but it really should be! ↩