You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: EXTRA.md
-2
Original file line number
Diff line number
Diff line change
@@ -15,5 +15,3 @@ React makes use of this SPA structure, bundling all your JavaScript code and inj
15
15
There is nothing inherently bad about having static frontends. However, as websites increasingly became more interactive there arose a need to display customized content. Content that is dependent upon the user and user input. This is what React aims to do.
16
16
17
17
4. Learn about the how and why of [JavaScript frameworks](https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445). Whenever building software you can build on top of what others have already done; this is why we use a framework. It not only allows us to structure our application, but also gives us tools on how to achieve certain requirements (like faster loading, and showing customized information to the user)
18
-
19
-
With that out of the way, let's get started with React!
Copy file name to clipboardexpand all lines: week1/MAKEME.md
+92-13
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@
5
5
1. Practice the concepts
6
6
2. React exercises
7
7
3. Code along
8
-
4. PROJECT: Hack Your Todolist I
8
+
4. PROJECT: Hack Your Weather I
9
9
10
10
## **1. Practice the concepts**
11
11
@@ -15,29 +15,108 @@ Let's get started with some interactive exercises! Complete the exercises from t
15
15
16
16
## **2. React exercises**
17
17
18
-
> Inside of your `React` fork, go to the `week1` 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`.
18
+
> 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.
19
19
20
-
**Exercise 1**
20
+
**Exercise 1: Extreme hobbies**
21
21
22
-
**Exercise 2**
22
+
There's nothing better than some extreme sports to get the blood pumping.
1. Create 2 functional components: `<HobbyList>` and `<Hobbies>`
31
+
2. Put the `hobbies` variable into the `<HobbyList>` component as state.
32
+
3. In the `return` statement of the `<HobbyList>` use the `map()` function to return an instance of `<Hobby>`
33
+
4. Pass down the hobby as a `prop`
34
+
5. Test out if it works by importing it into the top level component, which in this case is `<App>`
35
+
36
+
**Exercise 2: Perfect customer service!**
37
+
38
+
Don't you love it when a company provides great customer service?
39
+
40
+
Take a look at the following image:
41
+
42
+
43
+
44
+
In this exercise you have to create a single component that you'll reuse to display different information each time.
45
+
46
+
1. Create a functional component called `<Guarantee>`
47
+
2. Instantiate it 3 times
48
+
3. Give each component 3 `props`: an `img`, `title` and `description`
49
+
4. Pass down to each component the appropriate content. Take the images from the **assets** folder, inside the **exercise1** folder
50
+
5. Test out if it works by importing it into the top level component, which is `<App>`
51
+
52
+
**Exercise 3: It's higher than 10!**
53
+
54
+
Let's create a simple number counter, starting from 0 until infinity!
55
+
56
+
1. Create 3 functional components called `<Counter>`, `<Count>` and `<Button>`
57
+
2. Inside `<Counter>` define a state variable called `count` (initialized with value `0`) and state handler called `setCount`
58
+
3. Inside `<Button>` create a `<button>` with the text `Add 1!` and `onClick` attribute
59
+
4. Pass down the `count` state variable to `<Count>`, and the `setCount` to `<Button>`
60
+
5. Inside `<Counter>`, declare a variable called `feedback` above the return statement. Give this variable a ternary operator value: if `count` is higher than 10 it should display the string `"It's higher than 10!"`, else it displays `"Keep counting..."`
61
+
6.5. Test out if it works by importing `<Counter>` into the top level component, which is `<App>`
25
62
26
63
## **3. Code along**
27
64
28
-
In the following tutorial you'll learn how to make
65
+
Learning how to work with React is a fundamentally different approach to building frontends. Therefore, we need to practice a lot!
66
+
67
+
In the following tutorial you'll learn how to a `Random Quote Machine`!
68
+
69
+
Notice how you'll be writing `class` based components. This is an older React feature for writing components, but that's still valid.
70
+
71
+
Even though you'll be learning more modern ways of writing React applications, you should always be aware that applications can vary in the versions of technologies they're working with.
72
+
73
+
Don't worry! You don't have to memorize it all. Aim for understanding the principle behind it to the best you can. If you ever feel in doubt: do a Google search or ask a question in Slack!
74
+
75
+
Enjoy!
29
76
30
-
-[Build a Quiz](https://www.youtube.com/watch?v=aq-fCtg_gG4)
31
-
-[Build a Recipe App With React](https://www.youtube.com/watch?v=U9T6YkEDkMo)
32
-
-[Build a Calculator with React and Flexbox](https://www.youtube.com/watch?v=KzYUuTiHdiY)
33
-
-[Build a Movie Database](https://www.youtube.com/playlist?list=PL_kAgwZgMfWyZ6m8fDwdiwEarr_g6nFxz)
34
77
-[Build a Random Quote Machine](https://www.youtube.com/playlist?list=PL3cz80ehFCan4srLIp1HmhrQ0CU8Cw9XM)
35
78
36
-
## **4. PROJECT: Hack Your Todolist**
79
+
## **4. PROJECT: Hack Your Weather I**
80
+
81
+
> Before you start, create a new folder called `project` that includes the files for the following web application you'll be building.
82
+
83
+
During this module you'll be starting a project called `Hack Your Weather`! Like in the Node.js module, each week you'll add to it until it becomes a fully-fledged application you can be proud of.
84
+
85
+
Here's what you're eventually going end up with: [Hack Your Weather Finished](https://hyf-weather-app.netlify.com/)
86
+
87
+
Let's get into it.
88
+
89
+
### 1. Setup
90
+
91
+
The first step to any project is to setup your development environment. Follow the steps:
92
+
93
+
1. Navigate to your `project` folder
94
+
2. Inside, use `create-react-app` to create a React application. Give it the name `hackyourweather`
95
+
3. Copy and paste the file `city-weather.json` inside of your project folder, into the `src` folder
96
+
97
+
### 2. Requirements
98
+
99
+
This week you'll build the foundation of your application. It should eventually look like this:
100
+
101
+
102
+
103
+
Here are the requirements your project needs to fulfill:
104
+
105
+
- List all the cities and their weather information (taken from `city-weather.json`)
106
+
- Display each city in its own box
107
+
- Each box should contain the following pieces of data:
108
+
-`city name`
109
+
-`country name`
110
+
-`weather main`
111
+
-`weather desciption`
112
+
-`max and min temprature`
113
+
-`location (longitude and lattitude)`
37
114
38
-
> 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.
115
+
Hints:
39
116
40
-
> Before you start, create a new folder called `project` that includes the files for the following app you'll be building.
117
+
- Make use of the `map()` function to show the
118
+
- Try to "think in components"
119
+
- Look at the JSON file and carefully look at where the useful data is found
0 commit comments