Welcome to Emu, 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 (#emu-discussion). Get oriented on the Student Resources page. See below for information on mentor sessions and how to sign up for them.
Class Wiki:
The Class Wiki is an easy to read and reference location where you can see lesson page links and coding assignment instructions links in one spot. If you need any assistance please contact your Cohort Leader.
General Instructions:
The General Instructions are steps that you need to get started and/or steps that you should repeat weekly, 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 your Cohort Leader.
If you need assistance with non-curriculum items please contact your Cohort Instructional Leader, Elijah Bernstein-Cooper, on Slack or by this email: emu@codethedream.org
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 | May 30, 2023 | Prepare for class! Make sure your machine is in good working order, pay attention to Slack for class announcements | |
| 1 | May 31, 2023 | June 6, 2023 | Lesson 1.1 Project Setup and React basics |
| 2 | June 7, 2023 | June 13, 2023 | Lesson 1.2 React DOM and Components |
| 3 | June 14, 2023 | June 20, 2023 | Lesson 1.3 Props, State, and Handlers |
| 4 | June 21, 2023 | June 27, 2023 | Review – Lessons 1.1 – 1.3 (Lesson 1.3 especially) begin readings in Lesson 1.4 if you wish |
| 5 | June 28, 2023 | July 4, 2023 | Lesson 1.4 Lifting State and Props Handling |
| 6 | July 5, 2023 | July 11, 2023 | Lesson 1.5 Hooks and Fragments |
| 7 | July 12, 2023 | July 18, 2023 | Lesson 1.6 Reusable Components, Imperative React |
| 8 | July 19, 2023 | July 25, 2023 | Lesson 1.7 Asynchronous Data, Conditional Rendering, Advanced and Impossible State |
| 9 | July 26, 2023 | Aug 1, 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 | Aug 2, 2023 | Aug 8, 2023 | Lesson 1.8 Data Fetching, Data Refetching, Memoized Handlers |
| 11 | Aug 9, 2023 | Aug 15, 2023 | Lesson 1.9 Third-Party Libraries, Async/Await, Forms |
Section 2: React Legacy
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 12 | Aug 16, 2023 | Aug 22, 2023 | Lesson 2.1 React Router, Class Components |
Section 3: React Styling
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 13 | Aug 23, 2023 | Aug 29, 2023 | Lesson 3.1 CSS, Styled Components, SVG |
Section 4: React Maintenance
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 14 | Aug 30, 2023 | Sept 5, 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 | Sept 6, 2023 | Sept 12, 2023 | Lesson 4.1 Performance, TypeScript, Testing, Project Structure |
Section 5: React Real World
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 16 | Sept 13, 2023 | Sept 19, 2023 | Lesson 5.1 Sorting, Searches, Pagination |
Section 6: Deployment
| Week | Start Date | Due Date | Lessons |
|---|---|---|---|
| 17 | Sept 20, 2023 | Sept 26, 2023 | Final project work completion |
| Sept 27, 2023 | Sept 29, 2023 | Final Project Presentations (2 nights, Time TBD) | |
| — | Oct 9, 2023 | TBD | PRACTICUM |
What You Will Be Learning
Throughout the next 17 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. Please see your class announcements channel for information on how to access the Road to React content.
Before You Begin
You should 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, building on the same project from week to week.
Submitting Your Assignments
For each lesson, you will have a coding assignment and a mindset assignment. At the start of the course you will create a project repository in your GitHub account. Follow the lesson instructions and make changes to your project in 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, create the project repository in your own GitHub account. Make sure your repository is public.
- Clone your repository onto your computer.
- 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 Assignment Submission Form to submit the link to your pull request, your mindset answers, and feedback.
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-todo 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 arrange a 1:1 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.
Having useful commenting in your code is also advised. It helps you, your reviewer, and anyone else who may work with your code find needed areas during review or debugging. Here’s an example of a useful comment on the example code from above:
//ERROR CATCH FUNCTION
function my_function(parameter) {
if (x === 0) {
return x;
else {
return error;
}
}Mentor Session Calendar Links
Traditional 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:
- Open the calendar of mentor sessions for your class using this link.
- Double check you have the correct week selected (tabs for each week are at the bottom of the spreadsheet)
- Determine which session(s) work for your schedule. Use the Converter links to see what day/time the session will be in your local time if you’re in a different time zone than the mentor/host.
- In the column of the session(s) you wish to attend, find an empty field and type your name.
If you need help finding your way around the spreadsheet, watch the video below.
By Appointment Only Mentors
By Appointment Only 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 whose session you want to attend for the week
- This will open their Calendly page in a new window. Click on the blue circled date for the session you wish to attend
- Click on the button to the right of the calendar for the time you wish to attend
- Click Confirm
- Use the instructions or link in the email confirmation you receive after clicking Confirm to join your session on the day and time you signed up for