Coursework
#
1) Mid-Course FeedbackWe're now over half way through the Full Stack Course!
Your feedback is really important to us. We use your feedback to improve the course for all of the hundreds of students across CodeYourFuture now and in the future.
This feedback is anonymous meaning we won't have an idea who you are after you submit.
We really appreaciate you being honest since this allows us to improve faster.
https://docs.google.com/forms/d/e/1FAIpQLSfrAtvR5HonJZiqlPXocAz7d1l-Kn57X5xp3oH_NmVUL9xTQQ/viewform
#
2) Review Solutions for the TV Show ProjectAt the end of this week, be sure to review the solutions for last weeks coursework
https://github.com/CodeYourFuture/JavaScript-Core-3-Coursework-Week3-Solution
and
https://github.com/CodeYourFuture/TV-Show-DOM-Project-Solution
Note: This is a private repository. Please speak to your Teacher, Buddy or Class Coordinator to get access. You should ask them to invite your whole class.
#
3) In Class ExercisesIf you haven't already, complete the in-class exercises on your pokedex
app
#
4) FreeCodeCamp Practice (3 hours)You should complete the following exercises from this website:
https://www.freecodecamp.org/learn/front-end-libraries/react/
- Create a Simple JSX Element
- Create a Complex JSX Element
- Add Comments in JSX
- Render HTML Elements to the DOM
- Define an HTML Class in JSX
- Learn About Self-Closing JSX Tags
- Create a Stateless Functional Component
#
4) CYF Hotel (7 hours)#
4.1) Complete ChallengeComplete all of the Lesson 1 exercises in the cyf-hotel-react
project
https://github.com/CodeYourFuture/cyf-hotel-react#lesson-1
#
4.2) Deploy your Hotel ProjectOnce you have set up your React Hotel application, we should deploy it to Netlify.
Follow the deployment instructions here:
https://syllabus.codeyourfuture.io/guides/creating-a-react-app#deployment-with-netlify
Once it is deployed, follow these instructions to change your new site's name to cyf-USERNAME-hotel-react
.netlify.app (where USERNAME
is YOUR Github username):
https://syllabus.codeyourfuture.io/workshops/deployment/workshop/cheatsheet#rename-your-site
Check that your site is visible at: https://cyf-[[your-github-username]]-hotel-react.netlify.app/.
#
5) Challenges (10 hours+)The key way to get better at React is to build lots of small projects and build up your knowledge.
You should complete the following project
- High Score Table - Level 1
#
6) Prepare for the next class (1 hour)In our next class we'll be exploring the difference between Props vs State.
Spend some time reading about the difference between the two.
Here are some resources to get you started
- Read Props vs State
#
7) (Optional) More ChallengesYou can see a full list of the challenges here
Suitable projects for you to work on right now are:
- Baby Names Picker - Level 1
- Countries - Level 1
- Job Listing - Level 1
You should complete these challenges in the order they are in above.
#
7) (Optional) IronHack Labs PracticeIf you want more practice with the basics of making React components and passing props,
You should completed exercises 1-7 of https://github.com/ironhack-labs/lab-react-training
Notes:
- Do NOT make a pull request although the repo readme says so. We don't want the staff at the other school getting your PRs!
- Skip or simplify "Iteration 3" if you have problems with the maths.
E.g. just pass a max number<RandomNumber max={100} />
and multiply that by Math.random().
Or pass no props. - In "Iteration 6" just pass the prop as normal:
<Rating rating={4.5} />
.- To do it as specified in the exercise would require you to use something new: "props.children".