Skip to content

Commit

Permalink
Day_9 has been published
Browse files Browse the repository at this point in the history
  • Loading branch information
Asabeneh committed Oct 8, 2020
1 parent 56f5f03 commit fc36b2a
Show file tree
Hide file tree
Showing 16 changed files with 14,081 additions and 7 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
draft.md
react-for-everyone.md
component.md
09_Day_Conditional_Rendering
10_Day_Events
11_Day_Forms

19 changes: 13 additions & 6 deletions 08_Day_States/08_states.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,11 @@
- [State](#state)
- [What is State?](#what-is-state)
- [How to set a state](#how-to-set-a-state)
- [Resetting a state using a JavaScript method](#resetting-a-state-using-a-javascript-method)
- [Exercises](#exercises)
- [Exercise: Level 1](#exercise-level-1)
- [Exercise: Level 2](#exercise-level-2)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)

# State

Expand Down Expand Up @@ -65,6 +67,8 @@ ReactDOM.render(<App />, rootElement)

If you run the above code you will see zero on the browser. We can increase or decrease the value the state by changing the value of the state using JavaScript method.

## Resetting a state using a JavaScript method

Now, let's add some methods which increase or decrease the value of count by clicking a button. Let us add a button to increase and a button to decrease the value of count. To set the state we use react method _this.setState_. See the example below

```js
Expand Down Expand Up @@ -132,7 +136,6 @@ ReactDOM.render(<App />, rootElement)
```

Both button work well, but we need to re-structure the code well. Let us create separate methods in the component.
If you want to see it live check it [here][https://codepen.io/asabeneh/full/jjdwyom]

```js
// index.js
Expand Down Expand Up @@ -479,19 +482,19 @@ const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
```

I believe now you have a very good understanding of state. After this, we will use state in other sections too because state and props is the core of a react application.
I believe that now you have a very good understanding of state. After this, we will use state in other sections too because state and props is the core of a react application.

## Exercises

### Exercise: Level 1
### Exercises: Level 1

1. What was your state today? Are you happy? I hope so. If you manage to make it this far you should be happy.
2. What is state in React ?
3. What is the difference between props and state in React ?
4. How do you access state in a React component ?
5. How do you set a set in a React component ?

### Exercise: Level 2
### Exercises: Level 2

1. Use React state to change the background of the page. You can use this technique to apply a dark mode for your portfolio.

Expand All @@ -501,6 +504,10 @@ I believe now you have a very good understanding of state. After this, we will u

![Change Background](../images/08_day_select_country_exercise.gif)

### Exercises: Level 3

Coming

🎉 CONGRATULATIONS ! 🎉

[<< Day 7](../07_Day_Class_Components/07_class_components.md) | [Day 9 >>](../09_Day_Conditional_Rendering/09_conditional_rendering.md)
Loading

0 comments on commit fc36b2a

Please sign in to comment.