added w3/4 project instructions, finished readings w3/4

Author: Noer Paanakker

.vscode/settings.json

@@ -0,0 +1 @@
+{}

assets/project/week3.png

@@ -0,0 +1,39 @@
+# How to hand in homework
+
+In this module you'll submit your homework only using GIT and GitHub.
+
+1. [GitHub](https://www.github.com/HackYourFuture/React)
+
+## 1. GitHub homework guide
+
+Follow the walkthrough to learn how to submit your homework for each week:
+
+ONE TIME ONLY (START OF EVERY MODULE)
+
+1. Create a [fork](https://help.github.com/en/articles/fork-a-repo) of the teacher's forked repository (ask in Slack what the URL for it is). You do this by using the `fork` option on the top right
+2. Navigate to the URL of the cloned repository (it should be in your personal GitHub account, under "repositories")
+3. Clone the repository, using SSH, to your local machine. You can do this by typing in `git clone <git url>` in the command line
+4. On your local machine, navigate to the folder using the command line
+5. Make sure you've cloned it correctly by running `git status` from the command line.
+
+EVERY WEEK
+
+1. Create a new branch for each week you have homework. For example, for the week 1 homework for React create a branch called `week-1-homework-YOUR_NAME`
+2. Inside the correct week folder, create another folder called `homework`. Make your homework files in there, while on the correct branch
+3. Once you're finished, add and commit everything. Make the commit message meaningful, for example `finished project for homework week1`
+4. Push the branch to your forked repository
+5. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is your teacher's repository, on branch master
+6. Give the pull request a title in the following format:
+
+```markdown
+Homework week 1 <Your name>
+```
+
+7. Submit the pull request from your forked repository branch into the `master` branch
+8. Do a little victory dance because you did it! Good job!
+
+For a visual walkthrough the steps please watch the following video one of our teachers, Unmesh Joshi, has made:
+
+- [GitHub Homework flow](https://www.youtube.com/watch?v=2qJPAVTiKPE)
+
+If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!

assets/project/week4.png

@@ -196,7 +196,11 @@ In our example, it means that our `props` can only move from `<Contact>` > `<Add
 
 A static website is a collection of HTML, CSS and client-side JavaScript files. That's it. It is usually only a frontend, hosted on a web server that only serves the pages the client asks for (for example, `/`, `/about` or `/privacy`).
 
-As you've learned in the Node.js module, we can use server-side frameworks like `Express` or just native Node.js modules (like `http`)
+As you've learned in the Node.js module, we can use server-side frameworks like `Express` or just native Node.js modules (like `http`) in order to serve our static files to a client.
+
+But what if we don't want to setup a whole web server to do this?
+
+### Static site generators
 
 We call these `static site generators`. They take a lot of the basic web server setup out of our hands. All we have to do is upload our frontend (in other words, our static website) to that particular service's web server and that's it. The generator creates a URL for us that we can use to access our website.
 
@@ -211,6 +215,6 @@ To learn more about static site generators, study the following:
 - [The Reign of Static Site Generators](https://www.netlify.com/blog/2018/07/12/the-reign-of-static-site-generators/)
 - [Why use a Static Site Generator](https://www.youtube.com/watch?v=mDKQGANttyE)
 
-### Static site generators
+## Finished?
 
-[React Philosophy](https://reallifeprogramming.com/react-philosophy-e8cdea991599), [Components](https://medium.com/the-andela-way/understanding-react-components-37f841c1f3bb), [JSX](https://reactgo.com/learn-react-jsx-detailed/), [Props](https://www.robinwieruch.de/react-pass-props-to-component/)
+Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md).

hand-in-homework-guide.md

@@ -15,21 +15,22 @@ We'll start the week off with some online exercises again. Complete the exercise
 
 ## **2. React exercises**
 
-> Inside of your `React` fork, go to the `week1` folder and create a React application called `react-exercises` (use `create-react-app`). Inside of the `src` folder create a JavaScript file with an appropriate name.
+> Inside of your `React` fork, go to the `week2` folder and create a React application called `react-exercises` (use `create-react-app`). Inside of the `src` folder create a JavaScript file with an appropriate name.
 
 **Exercise 1: New friend on demand**
 
 What if there was an app that could generate a new friend, instantly? How about we make one!
 
 In this exercise we'll be using the following API endpoint: `https://www.randomuser.me/api?results=1`
 
-1. Create 2 functional components called `<Friend>` and `<Button>`
-2. Inside create a state variable called `friend` (with initial state of `{}`) and state handler `setFriend`
-3. Inside (before the return statement) also create a function called `getFriend`. The purpose of this function is to make an API call to `https://www.randomuser.me/api?results=1`. You can either use `fetch` or `axios`. At the end of the function reassign the `friend` state value using `setFriend`
+1. Create 3 functional components called `<Friend>`, `<FriendProfile>` and `<Button>`
+2. Inside `<Friend>` create a state variable called `friend` (with an initial state of `{}`) and state handler `setFriend`
+3. Inside `<Friend>` (before the return statement) also create a function called `getFriend`. The purpose of this function is to make an API call to `https://www.randomuser.me/api?results=1`. You can either use `fetch` or `axios`. At the end of the function reassign the `friend` state variable using `setFriend`
 4. Inside the `<Button>` component, create a `<button>` that has the text "Get a friend!" and `onClick` attribute
 5. Pass down the function `getFriend` to `<Button>`
-6. NOT FINISHED
-7. Test if everything works by importing it into the top level component, which is `<App>`
+6. Inside `<FriendProfile>` create an `<ul>` that showcases the following attributes of the person: The first and last names, the address and country, the email address, and finally also the phone number
+7. Pass down the `friend` state variable to the `<FriendProfile>`
+8. Test if everything works by importing it into the top level component, which is `<App>`
 
 **Exercise 2: Dog photo gallery**
 
@@ -39,13 +40,25 @@ In this exercise we'll be using the following API endpoint: `https://dog.ceo/api
 
 1. Create 3 functional components: `<DogGallery>`, `<DogPhoto>` and `<Button>`
 2. Inside `<DogGallery>` create a state variable called `dogPhotos` (initialize with value `[]`) and state handler `setDogPhotos`
-3. Inside (before the return statement) also create a function called `getDogPhoto`. The purpose of this function is to make an API call to `https://dog.ceo/api/breeds/image/random`. You can either use `fetch` or `axios`. At the end of the function push the new `dog image URL` into the `dogPhotos` array state value using `setDogPhotos`
+3. Inside (before the return statement) also create a function called `getDogPhoto`. The purpose of this function is to make an API call to `https://dog.ceo/api/breeds/image/random`. You can either use `fetch` or `axios`. At the end of the function push the new `dog image URL` into the `dogPhotos` array state variable using `setDogPhotos`
 4. Inside the `<Button>` component, create a `<button>` that has the text "Get a dog!" and `onClick` attribute
 5. Pass down the function `getDogPhoto` to `<Button>`
-6. Inside `<DogGallery>` return all the dogs stored in the `dogPhotos` array using the `map()` function. However, when there are no dogs yet make sure to display the message "Get your first dog by clicking the button!"
-7. Test your components by importing it into the top level
+6. Inside `<DogGallery>` return all the dogs stored in the `dogPhotos` array using the `map()` function. Pass down each `dogPhoto` into an instance of `<DogPhoto>`.
+7. However, when there are no dogs in the array yet make sure to display the message "Get your first dog by clicking the button!"
+8. Test your components by importing it into the top level component, which is `<App>`
 
-**Exercise 3**
+**Exercise 3: Random Joke Generator**
+
+Never run out of jokes with the Random Joke Generator!
+
+In this exercise we'll be using the following API endpoint: `https://official-joke-api.appspot.com/random_joke`
+
+1. Create 2 functional components: `<RandomJoke>` and `<Joke>`
+2. Inside `<RandomJoke>` create a state variable called `joke` (with initial state `{}`) and state handler `setJoke`
+3. Make use of the `useEffect` hook to make an asynchronous API call to the API endpoint. Put the end result into the state variable using `setJoke`
+4. Now pass the reassigned state variable `joke` to the `<Joke>` component
+5. Inside the `<Joke>` component, display the `setup` and `punchline` attributes in 2 `<p>` tags
+6. Test out your work by importing your components into the top level component, which is `<App>`
 
 ## **3. Code along**
 
@@ -77,6 +90,8 @@ Here are the requirements your project needs to fulfill:
 - Make an API call when the button is clicked
 - Display the city + weather information similar to week 1
 - Make a component for the search
+- Incorporate error handling for the API call
+- Show user feedback when there are no cities searched for yet
 
 Hints:
 

week1/README.md

@@ -23,7 +23,7 @@ Like any other system, React is always evolving. Before we had Hooks, we used to
 ```js
 class Example extends React.Component {
   state = {
-    exampleMessage: 'This message is for the example'
+    exampleMessage: "This message is for the example"
   };
 
   render() {
@@ -108,4 +108,17 @@ Forms have always been slightly different than any other element in HTML. So it
 
 ### Controlled vs. uncontrolled
 
+These terms refer to whether or not a component has its own state or not. We're talking about a `controlled` component when it doesn't have its own state: it's being controlled by
+
+A component is `uncontrolled` when it does have state, meaning state values are defined within in.
+
+Learn more about this here:
+
+- [Controlled and uncontrolled elements](https://www.youtube.com/watch?v=nSGZEQa5C_c)
+- [How React Hooks change the way we build forms](https://www.youtube.com/watch?v=8yo44xN7-nQ)
+
 ### EventListeners & preventing default behavior
+
+## Finished?
+
+Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md).

week2/MAKEME.md

@@ -15,13 +15,7 @@ This week we'll practice some (hopefully) familiar concepts, with some online ex
 
 ## **2. React exercises**
 
-> Inside of your `React` fork, go to the `week3` folder and create a folder called `react-exercises`. For each exercise create a new folder (call it `exercise` follwed by the right number) and create 3 files: and `index.html`, `script.js` and `style.css`.
-
-**Exercise 1**
-
-**Exercise 2**
-
-**Exercise 3**
+**No exercises this week**
 
 ## **3. Code along**
 
@@ -31,9 +25,26 @@ In the following tutorial you'll learn how to make
 
 ## **4. PROJECT: Hack Your Weather III**
 
-> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
+> Make sure you're building on last week's codebase.
+
+The main additions you'll add this week is to (1) keep adding to the list of already searched cities and (2) allow users to remove a city from previous search result.
+
+### 1. Requirements
+
+By the end of this week's assignment your application should look similar to this:
+
+![Week 3 Wireframe](../assets/project/week3.png)
+
+Here are the requirements your project needs to fulfill:
+
+- Any time a user searches for a new city, add it to a list of already searched cities
+- Allow a user to delete a search entry, by clicking the "X"
+- Only allow a user to use the "Search City" button when the input field has at least 1 character
+
+Hints:
 
-> Before you start, create a new folder called `project` that includes the files for the following app you'll be building.
+- Think about what data structure makes most sense to use
+- Make use of `filter()` when removing cities
 
 ## **SUBMIT YOUR HOMEWORK!**
 
@@ -43,7 +54,6 @@ If you need a refresher, take a look at the following [guide](../hand-in-homewor
 
 The homework that needs to be submitted is the following:
 
-1. React exercises
-2. Project: Hack Your Weather III
+1. Project: Hack Your Weather III
 
 _Deadline Saturday 23.59 CET_

week2/README.md

@@ -6,14 +6,78 @@ These are the topics for week 3:
 
 1. Hooks II
    - Building custom hooks
-2. Third party components
+   - Using other people's custom hooks
+2. Third party React tools
+   - UI toolkits
+   - Utilities
 
 ## 1. Hooks II
 
 ### Building custom hooks
 
-## 2. Third party components
+One of the main benefits of using the React hooks (like `useState`, `useEffect`, etc.), is that they can be used in any functional component.
 
-Why write everything yourself when you can access other's software, for free? Like with any software ecosystem, whether it's React, Angular or Vue, there will be developers who've made certain functionalities easier for you to
+However, that's not the only big benefit. Another one is that it allows us to isolate `stateful logic` into a reusable function that can be used in other functional components.
 
-It's highly recommended
+This `stateful logic` is just a complicated way for saying state variables and the instructions that manipulate it.
+
+In a custom hook we can create state everytime we use it, and modify it according to the instructions that are included in the hook. This is the strength of using custom hooks: by defining custom hooks we can replicate a certain functionality for us to use in multiple different functional components.
+
+In terms of implementation, a custom Hook is simply a JavaScript function whose name starts with ”use” (for example, `useSomeAction`). It incorporates existing hooks (like `useState`) and adds logic to it.
+
+Study the following to learn more about it:
+
+- [Building your own hooks](https://reactjs.org/docs/hooks-custom.html)
+- [Building Custom React Hooks](https://medium.com/prototyped/building-custom-react-hooks-f6aad8567825)
+
+### Using other people's custom hooks
+
+Like anything in development, once someone has found a solution to a common problem it (hopefully) gets published for everyone to use. This is also the case with `hooks`.
+
+Check the following resources out to learn more about these custom hooks others have made for you to use:
+
+- [usehooks.com](https://usehooks.com/)
+
+## 2. Third party React tools
+
+Third party React tools can roughly be divided into 2 categories:
+
+1. UI toolkits
+2. Utilities
+
+### UI toolkits
+
+These kind of component libraries serve to **structure your user interface**. If you've ever worked with a CSS framework, this is what it means.
+
+Popular presentational component libraries are the following:
+
+- [Semantic UI](https://react.semantic-ui.com/)
+- [Material UI](https://material-ui.com/)
+- [Shards](https://designrevision.com/docs/shards-react/getting-started)
+
+All of these are called `UI toolkits` and provide components that structure a particular part of your page.
+
+For example, Let's say you want to add a `button` component in your form. You could make it yourself. Or you could take it from the toolkit!
+
+```js
+import React from "react";
+import { Button } from "semantic-ui-react";
+
+const ButtonExampleButton = () => <Button>Click Here</Button>;
+
+export default ButtonExampleButton;
+```
+
+### Utilities
+
+There are also tools that solve certain problems within the React ecosystem.
+
+- [Enzyme](https://github.com/airbnb/enzyme) is a React-specific component testing tool, that makes it easier to test your React Components' output
+- [Redux](https://redux.js.org/introduction/getting-started) is a state management tool, used to make it possible to connect every component directly to the entire state and thus eliminates the need to use props or callbacks.
+- [React Intl](https://github.com/formatjs/react-intl) is a tool that provides an application the ability to have multiple languages (English, Dutch, etc.) within the application
+
+All of these tools are not necessarily React-specific, but allow us to use React in order to create more engaging, feature-rich applications.
+
+## Finished?
+
+Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md).

week3/MAKEME.md

@@ -15,13 +15,7 @@ Let's finish the online exercises. Start from `Review Using Props with Stateless
 
 ## **2. React exercises**
 
-> Inside of your `React` fork, go to the `week4` folder and create a folder called `react-exercises`. For each exercise create a new folder (call it `exercise` follwed by the right number) and create 3 files: and `index.html`, `script.js` and `style.css`.
-
-**Exercise 1**
-
-**Exercise 2**
-
-**Exercise 3**
+**No exercises this week**
 
 ## **3. Code along**
 
@@ -31,9 +25,39 @@ In the following tutorial you'll learn how to
 
 ## **4. PROJECT: Hack Your Weather IV**
 
-> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
+> Make sure you're building on last week's codebase.
+
+This week we'll finish our application by integrating 2 things: `client-side routing` with [React-Router-Dom](https://reacttraining.com/react-router/web/guides/quick-start) and `charting` our data (in either hourly or five day forecasts).
+
+### 1. Setup
+
+1. Install the following packages: [React Router Dom](https://www.npmjs.com/package/react-router-dom) and [Recharts](https://www.npmjs.com/package/recharts)
+
+```
+npm install react-router-dom recharts
+```
+
+### 2. Requirements
+
+At the end of the week the user interface of your application will look mostly the same, but with an additional page:
+
+![Week 4 Wireframe](../assets/project/week4.png)
+
+Here are the requirements your project needs to fulfill:
+
+- Divide your page into 2 different routes (`/` and `/:cityId`), using `react-router-dom`
+- Allow users to click on the searched city to open the city page
+- The city page will be on a different route identified by the city id (make use of the `<Link>` component given by `react-router-dom`)
+- On the city page there will be several things:
+  - Two tabs, one for the hourly forecast and the other for a 5 day forecast
+  - A chart (made with `recharts`) that displays the correct data according to which tab is active
+- Clicking on a tab will do 2 things: (1) make an API call to get the right data (using the city id from the URL params), and (2) switch the active component (from the hourly forecast to the five day forecast and vice versa)
+- Add a "Back" button to go back to `/`, on the city page
+
+Hints:
 
-> Before you start, create a new folder called `project` that includes the files for the following app you'll be building.
+- Read the documentation to get a basic sense of what problems both `react-router-dom` and `recharts` are trying to solve, and to learn how to use them
+- Make sure to have a clear overview of your application so far, before you add this week's features to it
 
 ## **SUBMIT YOUR HOMEWORK!**
 
@@ -43,7 +67,6 @@ If you need a refresher, take a look at the following [guide](../hand-in-homewor
 
 The homework that needs to be submitted is the following:
 
-1. React exercises
-2. Project: Hack Your Weather IV
+1. Project: Hack Your Weather IV
 
 _Deadline Saturday 23.59 CET_