From 56f5f03913445cb4d669a9e9da141756d149f782 Mon Sep 17 00:00:00 2001 From: Asabeneh Date: Thu, 8 Oct 2020 21:38:46 +0300 Subject: [PATCH] minor fixes --- .../01_javascript_refresher.md | 2 +- 03_Day_Setting_Up/03_setting_up.md | 5 +++-- 08_Day_States/08_states.md | 14 +++++++++++--- readMe.md | 2 +- 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/01_Day_JavaScript_Refresher/01_javascript_refresher.md b/01_Day_JavaScript_Refresher/01_javascript_refresher.md index 355e088..0c808d6 100644 --- a/01_Day_JavaScript_Refresher/01_javascript_refresher.md +++ b/01_Day_JavaScript_Refresher/01_javascript_refresher.md @@ -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 diff --git a/03_Day_Setting_Up/03_setting_up.md b/03_Day_Setting_Up/03_setting_up.md index 5c46434..fe6e71f 100644 --- a/03_Day_Setting_Up/03_setting_up.md +++ b/03_Day_Setting_Up/03_setting_up.md @@ -187,11 +187,12 @@ It is good to know these folders and files. - node_modules - stores all the necessary node packages of the React applications. - Public + - index.html - the only HTML file we have in the entire application - favicon.ico - an icon file - manifest.json - is used to make the application a progressive web app - - other images - can be used to open a graph image or for other purposes + - other images - open graph images(open graph images are images which are visible when a link share on social media) - robots.txt - information, if the website allows web scraping - src @@ -752,7 +753,7 @@ The boilerplate code can be found [here](../03/../03_Day_Setting_Up/30-days-of-r ## Exercises: Level 2 1. Import and render the following images -![Front end](../images/frontend_technologies.png) + ![Front end](../images/frontend_technologies.png) 2. Design the following user card. diff --git a/08_Day_States/08_states.md b/08_Day_States/08_states.md index d92ef18..6276f2f 100644 --- a/08_Day_States/08_states.md +++ b/08_Day_States/08_states.md @@ -19,17 +19,25 @@ ![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) - [Exercises](#exercises) - [Exercise: Level 1](#exercise-level-1) - [Exercise: Level 2](#exercise-level-2) # 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 @@ -489,8 +497,8 @@ I believe now you have a very good understanding of state. After this, we will u ![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) 🎉 CONGRATULATIONS ! 🎉 diff --git a/readMe.md b/readMe.md index 9aee240..4c78c1f 100644 --- a/readMe.md +++ b/readMe.md @@ -282,7 +282,7 @@ Programming languages are similar to human languages. English or many other lang I made a deliberate mistake. As a result, the console raises syntax errors. Actually, the syntax is very informative. It informs what type of mistake was made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors: ```js -console.log('Hello, World!') +console.log("Hello, World!") console.log('Hello, World!') ```