Welcome to Orange Sparrow, 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-sparrow/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-sparrow/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 | 03/09/22 | 03/15/22 | Sign up for access to your text |
| 1 | 03/16/22 | 03/22/22 | Lesson 1.1 Project Setup and React basics |
| 2 | 03/23/22 | 03/29/22 | Lesson 1.2 React DOM and Components |
| 3 | 03/30/22 | 04/05/22 | Lesson 1.3 Props, State, and Handlers |
| 4 | 04/06/22 | 04/12/22 | Review – Lessons 1.1 – 1.3 (Lesson 1.3 especially) begin readings in Lesson 1.4 if you wish |
| 5 | 04/13/22 | 04/19/22 | Lesson 1.4 Lifting State and Props Handling |
| 6 | 04/20/22 | 04/26/22 | Lesson 1.5 Hooks and Fragments |
| 7 | 04/27/22 | 05/03/22 | Lesson 1.6 Reusable Components, Imperative React |
| 8 | 05/04/22 | 05/10/22 | Lesson 1.7 Asynchronous Data, Conditional Rendering, Advanced and Impossible State |
| 9 | 05/11/22 | 05/17/22 | 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 Mindset Assignment Link |
| 10 | 05/18/22 | 05/24/22 | Lesson 1.8 Data Fetching, Data Refetching, Memoized Handlers |
| 11 | 05/25/22 | 05/31/22 | Lesson 1.9 Third-Party Libraries, Async/Await, Forms |
Section 2: React Legacy
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 12 | 06/01/22 | 06/07/22 | Lesson 2.1 React Router, Class Components |
Section 3: React Styling
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 13 | 06/08/22 | 06/14/22 | Lesson 3.1 CSS, Styled Components, SVG |
Section 4: React Maintenance
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 14 | 06/15/22 | 06/21/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 Mindset Assignment Link |
| 15 | 06/22/22 | 06/28/22 | Lesson 4.1 Performance, TypeScript, Testing, Project Structure |
Section 5: React Real World
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 16 | 06/29/22 | 07/05/22 | Lesson 5.1 Sorting, Searches, Pagination |
Section 6: Deployment
| Week | Start | Due Date | Lessons |
|---|---|---|---|
| 17 | 07/06/22 | 07/12/22 | Final project work completion |
| 07/13/22 | 07/15/22 | Final Project Presentations (2 nights, Time TBD) | |
| — | 07/25/22 | 09/20/22 | PRACTICUM |
What You Will Be Learning
Throughout the next 16 weeks you will learn how to build a To-Do app using React through your coding assignments and a blog site through the textbook. 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.
Submitting Your Assignments
For each lesson, you will have a coding assignment and a mindset assignment. At the start of the course you will fork Code the Dream’s main project repository for your course. From then on you will follow the lesson instructions and make changes to your forked copy of that repository. We encourage you to setup a SEPARATE repository in your GitHub account to build the blog site alongside the textbook instructions. You only need to submit your link to your to do list app project repository and your mindset answers. Your project repository for the blog site is for your personal use and benefit. 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:
- Week 1, 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 Squibby 2.0 webform to submit the link to your pull request, your mindset answers, and feedback. This is how we know to review your assignment.
All of your work throughout the course will be done in your GitHub repositories (textbook work in your blog project repository and coding assignments in your ctd-react-sparrow forked repository). You should create a separate branch for each lesson. Be sure to remember to merge that branch with main at the end/start of every week so the code you’re building from week to week gets updated on your main branch, which will be the final copy of your project.
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.