Welcome to Red Canary, the React Front End Class!
Below is a quick outline of this course. Remember to keep pace with the mentor sessions, and don’t hesitate to ask lots of questions! Slack is the best place for your questions, and you have a Slack channel for that purpose. Get oriented on the Student Resources page. Sign up for mentor sessions on the Google sign-up sheet will will be sent out every Monday via Slack.
Class Wiki: https://github.com/Code-the-Dream-School/ctd-react-canary/wiki
The Class Wiki is an easy to read and reference location where you can see all of the below information (week numbers, when they start and end, what the topic is for each week, with links to the lesson instructions for each week). If you need any assistance please contact the Class Coordinator.
General Instructions: https://github.com/Code-the-Dream-School/ctd-react-canary/wiki/General-Instructions
The General Instructions are steps that should be completed with each week’s assignment, regardless of the topic for the week. These are also good habits to be familiar with as you will use them very often in a developer job. If you have any questions please contact the Class Coordinator.
Course Calendar
The calendar below shows the start date of each week of the course and includes breaks and special events.
Course Sections
Section 1: React Fundamentals
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 0 | 10/13/21 | Sign up for access to your text | |
| 1 | 10/13/21 | 10/19/21 | Lesson 1.1 Project Setup and React basics |
| 2 | 10/20/21 | 10/26/21 | Lesson 1.2 React DOM and Components |
| 3 | 10/27/21 | 11/02/21 | Lesson 1.3 Props, State, and Handlers |
| 4 | 11/03/21 | 11/09/21 | Review – Lessons 1.1 – 1.3 (Lesson 1.3 especially) begin readings in Lesson 1.4 if you wish |
| 5 | 11/10/21 | 11/16/21 | Lesson 1.4 Lifting State and Props Handling |
| 6 | 11/17/21 | 11/23/21 | Lesson 1.5 Hooks and Fragments |
| — | 11/24/21 | 11/30/21 | HOLIDAY – use this time to review/catch up |
| 7 | 12/01/21 | 12/07/21 | Lesson 1.6 Reusable Components, Imperative React |
| 8 | 12/08/21 | 12/14/21 | Lesson 1.7 Asynchronous Data, Conditional Rendering, Advanced and Impossible State |
| 9 | 12/15/21 | 12/21/21 | Review/Catch up Week ✔ Review or catch-up on any work from the beginning of class to now ✔ Complete lesson 1.7 coding assignment ✔ Read “React Fundamentals – Data Fetching” in your text |
| — | 12/22/21 | 01/11/22 | HOLIDAY – use this time to review/catch up |
| 10 | 01/12/22 | 01/18/22 | Lesson 1.8 Data Fetching, Data Refetching, Memoized Handlers |
| 11 | 01/19/22 | 01/25/22 | Lesson 1.9 Third-Party Libraries, Async/Await, Forms |
Section 2: React Legacy
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 12 | 01/26/22 | 02/01/22 | Lesson 2.1 React Router, Class Components |
Section 3: React Styling
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 13 | 02/02/22 | 02/08/22 | Lesson 3.1 CSS, Styled Components, SVG |
Section 4: React Maintenance
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 14 | 02/09/22 | 02/15/22 | Review/Catch up Week ✔ Review or catch-up on any work from the beginning of class to now ✔ Work ahead on 4.1 if you wish |
| 15 | 02/16/22 | 02/22/22 | Lesson 4.1 Performance, TypeScript, Testing, Project Structure |
Section 5: React Real World
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 16 | 02/23/22 | 03/01/22 | Lesson 5.1 Sorting, Searches, Pagination |
Section 6: Deployment
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 17 | 03/02/22 | 03/08/22 | Final project work completion |
| 03/09/22 | 03/11/22 | Final Project Presentations (2 nights, Time TBD) | |
| — | 03/14/22 | 05/06/22 | PRACTICUM |
What You Will Be Learning
Throughout the next 16 weeks you will learn how to build a To-Do app using React. This course utilizes Road to React as it’s learning material, with supplemental assignments created by our curriculum developers.
Before You Begin
Be sure to sign up for access to your online textbook here. You should also already know which code editor you would like to use, and how to access your terminal. For this course each lesson is an individual assignment, but you will work out of the same repository for the entire course/project.
NOTE: The curriculum for this class is being developed and updated throughout the course. If there is no link for the lesson in the calendar above, the lesson is still under construction and will be published (the link will become live) once it is complete.
Submitting Your Assignments
For each lesson, you will have one or several assignments. Each assignment is provided to you as a git repository, and a link will be provided to you for that git repository. You should have basic familiarity with git before starting this course, but if you aren’t confident in your git skills, see this Github Cookbook. For each assignment, you will do the following steps:
- Fork the repository into your own git account. The fork should be public.
- Clone your fork onto your workstation. Important: Clone your fork, not the original repository.
- Create a branch for your lesson. Commit changes to that branch periodically, and push them to github.
- When the lesson is complete and all your work has been pushed to github, open a pull request for your branch.
- Then use the Ask Squibby slackbot in Slack to submit a link to your pull request. This is how we know to review your assignment.
Some of the git repositories will be used for several lessons. You should create a separate branch for each lesson. Each time you will create the new branch from the branch for the previous lesson, so that your work builds on previous steps.
When Submitting Your Code
When you submit your code, it should be working. If you are not able to get your code working, ask for help on Slack, or bring up questions in a mentor session, or ask for a special mentor session.
All code should be readable. There are many aspects to good code style, but the most important for right now is indentation! The content of blocks, methods, and classes should be indented two spaces. The end statement should line up, being indented the same number of spaces, with the statement that begins the block, method, or class. Here’s an example:
function my_function(parameter) {
if (x === 0) {
return x;
else {
return error;
}
}We need proper indentation in order to be able to review your assignments. You need proper indentation to make sure your code is structured correctly.
