Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
momin-riyadh committed Oct 9, 2020
2 parents f98ef1b + fa83c91 commit 2e42122
Show file tree
Hide file tree
Showing 19 changed files with 14,145 additions and 62 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

2 changes: 1 addition & 1 deletion 01_Day_JavaScript_Refresher/01_javascript_refresher.md
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ An array is a collection of different data types which are ordered and changeabl
#### How to create an empty array

In JavaScript, we can create an array in different ways. Let us see different ways to create an array.
It is very common to use _const_ instead of _let_ to declare an array variable. If you ar using const it means you do not use that variable name again.
It is very common to use _const_ instead of _let_ to declare an array variable. If you are using const it means you do not use that variable name again.

- Using Array constructor

Expand Down
99 changes: 50 additions & 49 deletions 03_Day_Setting_Up/03_setting_up.md

Large diffs are not rendered by default.

33 changes: 24 additions & 9 deletions 08_Day_States/08_states.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,27 @@
![30 Days of React banner](../images/30_days_of_react_banner_day_8.jpg)

- [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

## What is State?

What is state ? The English meaning of state is _the particular condition that someone or something is in at a specific time_.

Let us see some states being something - Are you happy or sad? - Is light on or off ? Is present or absent ? - Is full or empty ? For instance, I am happy because I am enjoying creating 30 Days Of React challenge. I believe that you are happy too.

State is an object in react which let the component re-render when data changes. We do not directly change or mutate the state but we use the _setState()_ method. As you can see below in the state object we have count with initial value 0. We can access the state object using _this.state_ and the property name. See the example below.
State is an object in react which let the component re-render when state data changes.

## How to set a state

We set an initial state inside the constructor or outside the constructor of a class based component. We do not directly change or mutate the state but we use the _setState()_ method to reset to a new state. . As you can see below in the state object we have count with initial value 0. We can access the state object using _this.state_ and the property name. See the example below.

```js
// index.js
Expand Down Expand Up @@ -57,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 @@ -124,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 @@ -471,28 +482,32 @@ 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.

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

2. After long time of lock down you may think of travelling and you do not know where to go. Then make use of this random country selector to select your holiday destination.
2. After long time of lock down you may think of travelling and you do not know where to go. Then make use of this random country selector to select your holiday destination.

![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 2e42122

Please sign in to comment.