From a969cd5f6d876d413e173d91cee47a07a4015521 Mon Sep 17 00:00:00 2001 From: tchar7 <115107146+tchar7@users.noreply.github.com> Date: Mon, 10 Oct 2022 20:20:15 +0530 Subject: [PATCH 1/3] Added Flashcard content --- src/hooks/useFlashcards.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/hooks/useFlashcards.js b/src/hooks/useFlashcards.js index cb371da..8159f96 100644 --- a/src/hooks/useFlashcards.js +++ b/src/hooks/useFlashcards.js @@ -5,6 +5,8 @@ const INITIAL_FLASHCARDS = [ { id: 2, front: "Props", back: "When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”." }, { id: 3, front: "Conditional Rendering", back: "Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them." }, { id: 4, front: "Composition vs Inheritance", back: "React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components." }, + { id: 5, front: "Uses", back: " It's used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript." }, + { id: 6, front: "Type", back: "ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application." }, ]; const FLASHCARDS_KEY = 'flashcards'; @@ -20,4 +22,4 @@ export function useFlashcards() { useEffect(() => localStorage.setItem(FLASHCARDS_KEY, JSON.stringify(flashCards)), [flashCards]); return [flashCards]; -} \ No newline at end of file +} From cd818bda311f80e146d2f4fdf93a27cf8652a00c Mon Sep 17 00:00:00 2001 From: tchar7 <115107146+tchar7@users.noreply.github.com> Date: Mon, 10 Oct 2022 20:32:49 +0530 Subject: [PATCH 2/3] Added flashcard --- src/hooks/useFlashcards.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/hooks/useFlashcards.js b/src/hooks/useFlashcards.js index 8159f96..42287f0 100644 --- a/src/hooks/useFlashcards.js +++ b/src/hooks/useFlashcards.js @@ -7,6 +7,8 @@ const INITIAL_FLASHCARDS = [ { id: 4, front: "Composition vs Inheritance", back: "React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components." }, { id: 5, front: "Uses", back: " It's used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript." }, { id: 6, front: "Type", back: "ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application." }, + { id: 7, front: "Aim", back: "Its aim is to allow developers to easily create fast user interfaces for websites and applications alike." }, + { id: 8, front: "Versus", back: "React is better than Angular due to it's virtual DOM implementation and rendering optimizations." }, ]; const FLASHCARDS_KEY = 'flashcards'; From a8f0dea8f0043ba5f116e368f18cf743fbed3649 Mon Sep 17 00:00:00 2001 From: tchar7 <115107146+tchar7@users.noreply.github.com> Date: Mon, 10 Oct 2022 21:17:15 +0530 Subject: [PATCH 3/3] Update useFlashcards.js --- src/hooks/useFlashcards.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useFlashcards.js b/src/hooks/useFlashcards.js index 42287f0..3e73cb8 100644 --- a/src/hooks/useFlashcards.js +++ b/src/hooks/useFlashcards.js @@ -5,10 +5,10 @@ const INITIAL_FLASHCARDS = [ { id: 2, front: "Props", back: "When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”." }, { id: 3, front: "Conditional Rendering", back: "Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them." }, { id: 4, front: "Composition vs Inheritance", back: "React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components." }, - { id: 5, front: "Uses", back: " It's used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript." }, - { id: 6, front: "Type", back: "ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application." }, - { id: 7, front: "Aim", back: "Its aim is to allow developers to easily create fast user interfaces for websites and applications alike." }, - { id: 8, front: "Versus", back: "React is better than Angular due to it's virtual DOM implementation and rendering optimizations." }, + { id: 5, front: "State", back: "The state is a built-in React object that is used to contain data or information about the component. A component's state can change over time; whenever it changes, the component re-renders." }, + { id: 6, front: "Lists", back: "Lists are used to display data in an ordered format and mainly used to display menus on websites. In React, Lists can be created in a similar way as we create lists in JavaScript." }, + { id: 7, front: "Keys", back: "A key is a special string attribute you need to include when creating lists of elements in React.Keys help React identify which items have changed (added/removed/re-ordered)." }, + { id: 8, front: "Formes", back: "Handling forms is about how you handle the data when it changes value or gets submitted. In React, form data is usually handled by the components." }, ]; const FLASHCARDS_KEY = 'flashcards';