Welcome to 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. Students are expected to attend at least two Mentor Sessions a week. Sign up for mentor sessions using the Calendly links below.
If you need assistance with non-curriculum items please contact your Cohort Instructional Leader on Slack or by this email: dove@codethedream.org
Class Wiki: https://github.com/Code-the-Dream-School/dove-react/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/dove-react/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 Date | Due Date | Lessons |
|---|---|---|---|
| 0 | Mar 1, 2023 | Mar 7, 2023 | Prepare for class! Make sure your machine is in good working order, pay attention to Slack for class announcements, AND Pre-class Information |
| 1 | Mar 8, 2023 | Mar 14, 2023 | Lesson 1.1 Project Setup and React basics |
| 2 | Mar 15, 2023 | Mar 21, 2023 | Lesson 1.2 React DOM and Components |
| 3 | Mar 22, 2023 | Mar 28, 2023 | Lesson 1.3 Props, State, and Handlers |
| 4 | Mar 29, 2023 | Apr 4, 2023 | Review – Lessons 1.1 – 1.3 (Lesson 1.3 especially), begin readings in Lesson 1.4 if you wish |
| 5 | Apr 5, 2023 | Apr 11, 2023 | Lesson 1.4 Lifting State and Props Handling |
| 6 | Apr 12, 2023 | Apr 18, 2023 | Lesson 1.5 Hooks and Fragments |
| 7 | Apr 19, 2023 | Apr 25, 2023 | Lesson 1.6 Reusable Components, Imperative React |
| 8 | Apr 26, 2023 | May 2, 2023 | Lesson 1.7 Asynchronous Data, Conditional Rendering, Advanced and Impossible State |
| 9 | May 3, 2023 | May 9, 2023 | 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 | May 10, 2023 | May 16, 2023 | Lesson 1.8 Data Fetching, Data Refetching, Memoized Handlers |
| 11 | May 17, 2023 | May 23, 2023 | Lesson 1.9 Third-Party Libraries, Async/Await, Forms |
Section 2: React Legacy
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 12 | May 24, 2023 | May 30, 2023 | Lesson 2.1 React Router, Class Components |
Section 3: React Styling
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 13 | May 31, 2023 | Jun 6, 2023 | Lesson 3.1 CSS, Styled Components, SVG |
Section 4: React Maintenance
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 14 | Jun 7, 2023 | Jun 13, 2023 | 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 | Jun 14, 2023 | Jun 20, 2023 | Lesson 4.1 Performance, TypeScript, Testing, Project Structure |
Section 5: React Real World
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 16 | Jun 21, 2023 | Jun 27, 2023 | Lesson 5.1 Sorting, Searches, Pagination |
Section 6: Deployment
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 17 | Jun 28, 2023 | July 4, 2023 | Final project work completion |
| July 5, 2023 | July 7, 2023 | Final Project Presentations (2 nights, Time TBD) | |
| — | July 17, 2023 | Sept 12, 2023 | 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
You’ll be provided with a PDF copy of your lesson materials. Please watch your class Slack announcement channel for details.
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 Homework Assignment Submission Form 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 react-cockatoo 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.
Mentor Information
Traditional / Group Mentors
Traditional Mentors are volunteer mentors who will host one or more one-hour long group sessions weekly. Typically these sessions are question-answer format so be sure to bring your questions from covering your learning materials or working on your coding assignment to the session. To sign up for a group mentor session:
- Click this link to be taken to your class Mentor Session Sheet – a Google Spreadsheet
- Find the session(s) you wish to attend for the week and list your name in that column. The document auto-saves so other than typing your name, there’s nothing else you need to do!
- By appointment mentor Calendly links are also listed in the first column of that spreadsheet. You can use those links or the links below to sign up for one on one sessions.
If you need help finding your way around the spreadsheet, watch the video below.
NOTE: This recording was for a previous class, so dates and names in the video will not match dates and names for this class!
1:1 / By Appointment Mentors
By Appointment Mentors are volunteer mentors who will help you one-on-one. If you’re unable to make a group session, or would just like to have one-on-one assistance, use the links below. To sign up for a one on one session:
- Click on the orange “Sign Up with this Mentor” button under the mentor with whom you want to meet
- This will open their Calendly page in a new window. Click on the blue circled date for the day you want to meet with them. A list of times they’re available that day will appear on the right side of the calendar. If a day does not have a blue circle, they are not available that day.
- Click on the time to the right of the calendar to select what time you want to meet with them
- Click Confirm
- Use the instructions or link in the email confirmation you receive after clicking Confirm to join your session on the day and at the time you selected