From fc8c048f58735a117ba88b1ca57b1ac716fee7a6 Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:06:49 +0530 Subject: [PATCH 1/9] Updating question 323 What is the difference between Imperative and Declarative in React.Js? --- README.md | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0ac23c5d..629df4df 100644 --- a/README.md +++ b/README.md @@ -336,7 +336,8 @@ |320| [What is the difference between async mode and concurrent mode?](#what-is-the-difference-between-async-mode-and-concurrent-mode)| |321| [Can I use javascript urls in react16.9?](#can-i-use-javascript-urls-in-react16.9)| |322| [What is the purpose of eslint plugin for hooks?](#what-is-the-purpose-of-eslint-plugin-for-hooks)| -|323| [?](#)| +|323| [What is the difference between Imperative and Declarative in React.Js?]| +|324| (#) ? ## Core React @@ -6261,5 +6262,28 @@ **[⬆ Back to Top](#table-of-contents)** -323. ### ? - \ No newline at end of file +323. ### What is the difference between Imperative and Declarative in React.Js? + Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue. + +The imperative way of doing this would be: + ```if( user.likes() ) { + if( hasBlue() ) { + removeBlue(); + addGrey(); + } else { + removeGrey(); + addBlue(); + } + }``` +Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario. + +In contrast, the declarative approach would be: + + ```if( this.state.liked ) { + return ; + } else { + return ; + }``` +Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand. + +324. ### ? From 65e315fa61bf2cc6c0843097bd0a96689657fb94 Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:09:57 +0530 Subject: [PATCH 2/9] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 629df4df..ba50fd72 100644 --- a/README.md +++ b/README.md @@ -336,7 +336,7 @@ |320| [What is the difference between async mode and concurrent mode?](#what-is-the-difference-between-async-mode-and-concurrent-mode)| |321| [Can I use javascript urls in react16.9?](#can-i-use-javascript-urls-in-react16.9)| |322| [What is the purpose of eslint plugin for hooks?](#what-is-the-purpose-of-eslint-plugin-for-hooks)| -|323| [What is the difference between Imperative and Declarative in React.Js?]| +|323| [What is the difference between Imperative and Declarative in React.Js?] (#imperative-vs-declarative)| |324| (#) ? ## Core React @@ -6286,4 +6286,6 @@ In contrast, the declarative approach would be: }``` Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand. + **[⬆ Back to Top](#imperative-vs-declarative)** + 324. ### ? From 92062cd604bfa99a6aaac23219bdbf76a15362f5 Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:15:22 +0530 Subject: [PATCH 3/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ba50fd72..a7d7b4f9 100644 --- a/README.md +++ b/README.md @@ -336,7 +336,7 @@ |320| [What is the difference between async mode and concurrent mode?](#what-is-the-difference-between-async-mode-and-concurrent-mode)| |321| [Can I use javascript urls in react16.9?](#can-i-use-javascript-urls-in-react16.9)| |322| [What is the purpose of eslint plugin for hooks?](#what-is-the-purpose-of-eslint-plugin-for-hooks)| -|323| [What is the difference between Imperative and Declarative in React.Js?] (#imperative-vs-declarative)| +|323| [What is the difference between Imperative and Declarative in React.Js?](#imperative-vs-declarative)| |324| (#) ? ## Core React From da74861b23250fd666a397802c237722238d5424 Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:17:50 +0530 Subject: [PATCH 4/9] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a7d7b4f9..b1e4f959 100644 --- a/README.md +++ b/README.md @@ -6263,7 +6263,8 @@ **[⬆ Back to Top](#table-of-contents)** 323. ### What is the difference between Imperative and Declarative in React.Js? - Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue. + +Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue. The imperative way of doing this would be: ```if( user.likes() ) { @@ -6286,6 +6287,6 @@ In contrast, the declarative approach would be: }``` Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand. - **[⬆ Back to Top](#imperative-vs-declarative)** + **[⬆ Back to Top](#table-of-contents)** 324. ### ? From 7c1bc807388620f3ec67c7f956568649c1670f2f Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:21:48 +0530 Subject: [PATCH 5/9] Update README.md --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b1e4f959..2161bbbb 100644 --- a/README.md +++ b/README.md @@ -6263,11 +6263,11 @@ **[⬆ Back to Top](#table-of-contents)** 323. ### What is the difference between Imperative and Declarative in React.Js? - Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue. The imperative way of doing this would be: - ```if( user.likes() ) { + ```javascript + if( user.likes() ) { if( hasBlue() ) { removeBlue(); addGrey(); @@ -6280,7 +6280,8 @@ Basically, you have to check what is currently on the screen and handle all the In contrast, the declarative approach would be: - ```if( this.state.liked ) { + ```javascript + if( this.state.liked ) { return ; } else { return ; From a803407ad6c49d14679db690b70980a105179043 Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:24:16 +0530 Subject: [PATCH 6/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2161bbbb..5d8c264d 100644 --- a/README.md +++ b/README.md @@ -6262,7 +6262,7 @@ **[⬆ Back to Top](#table-of-contents)** -323. ### What is the difference between Imperative and Declarative in React.Js? +323. ### [What is the difference between Imperative and Declarative in React.Js?](#imperative-vs-declarative) Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue. The imperative way of doing this would be: From 26def984c9f74f6fcbadcf88b239079261f74a0b Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:30:05 +0530 Subject: [PATCH 7/9] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5d8c264d..424fb401 100644 --- a/README.md +++ b/README.md @@ -336,7 +336,7 @@ |320| [What is the difference between async mode and concurrent mode?](#what-is-the-difference-between-async-mode-and-concurrent-mode)| |321| [Can I use javascript urls in react16.9?](#can-i-use-javascript-urls-in-react16.9)| |322| [What is the purpose of eslint plugin for hooks?](#what-is-the-purpose-of-eslint-plugin-for-hooks)| -|323| [What is the difference between Imperative and Declarative in React.Js?](#imperative-vs-declarative)| +|323| [What is the difference between Imperative and Declarative in React.Js?](#What-is-the-difference-between-Imperative-and-Declarative-in-React.Js)| |324| (#) ? ## Core React @@ -6262,10 +6262,11 @@ **[⬆ Back to Top](#table-of-contents)** -323. ### [What is the difference between Imperative and Declarative in React.Js?](#imperative-vs-declarative) +323. ### What is the difference between Imperative and Declarative in React.Js? Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue. The imperative way of doing this would be: + ```javascript if( user.likes() ) { if( hasBlue() ) { From 0b1be682193429511899b6197ee0519525bdd1e8 Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:30:51 +0530 Subject: [PATCH 8/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 424fb401..f875eac3 100644 --- a/README.md +++ b/README.md @@ -336,7 +336,7 @@ |320| [What is the difference between async mode and concurrent mode?](#what-is-the-difference-between-async-mode-and-concurrent-mode)| |321| [Can I use javascript urls in react16.9?](#can-i-use-javascript-urls-in-react16.9)| |322| [What is the purpose of eslint plugin for hooks?](#what-is-the-purpose-of-eslint-plugin-for-hooks)| -|323| [What is the difference between Imperative and Declarative in React.Js?](#What-is-the-difference-between-Imperative-and-Declarative-in-React.Js)| +|323| [What is the difference between Imperative and Declarative in React.Js?](#what-is-the-difference-between-Imperative-and-Declarative-in-React.Js)| |324| (#) ? ## Core React From 62c407420b422c7e82b74009968cadd781f71b9e Mon Sep 17 00:00:00 2001 From: Maulik Sakhida Date: Sat, 23 Nov 2019 18:32:16 +0530 Subject: [PATCH 9/9] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f875eac3..5fa4d11b 100644 --- a/README.md +++ b/README.md @@ -336,7 +336,7 @@ |320| [What is the difference between async mode and concurrent mode?](#what-is-the-difference-between-async-mode-and-concurrent-mode)| |321| [Can I use javascript urls in react16.9?](#can-i-use-javascript-urls-in-react16.9)| |322| [What is the purpose of eslint plugin for hooks?](#what-is-the-purpose-of-eslint-plugin-for-hooks)| -|323| [What is the difference between Imperative and Declarative in React.Js?](#what-is-the-difference-between-Imperative-and-Declarative-in-React.Js)| +|323| [What is the difference between Imperative and Declarative in React?](#what-is-the-difference-between-imperative-and-declarative-in-react)| |324| (#) ? ## Core React @@ -6262,7 +6262,7 @@ **[⬆ Back to Top](#table-of-contents)** -323. ### What is the difference between Imperative and Declarative in React.Js? +323. ### What is the difference between Imperative and Declarative in React? Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue. The imperative way of doing this would be: