epam-ai-conductor 0.1.0

package/dist/content/content/module-1/theory/module-1_hooks_useEffect.md

@@ -0,0 +1,178 @@
+---
+sidebar_position: 2
+sidebar_label: 'useEffect'
+title: 'useEffect'
+---
+
+## Why using useEffect hook?
+The Effect Hook lets you perform side effects in function components:
+```jsx
+import { useState, useEffect } from 'react';
+
+const Button = () => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    // Update the document title using the browser API
+    document.title = `Button was clicked ${count} times`;
+  });
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+
+`useEffect` accepts two parameters:  
+**The first one** is a callback which runs after render,
+much like in [`componentDidMount`](/docs/module-1/state-and-life-cycle#mounting).  
+**The second** parameter is the effect dependency array. 
+If you want to run it on mount only, pass an empty array `[]`. 
+
+:::note
+In the example above callback in the `useEffect` will be called with each render because the second argument was not passed.
+:::
+
+There are two common kinds of side effects in React components: 
+those that don’t require cleanup, and those that do. 
+Let’s look at this distinction in more detail.
+
+## Effects Without Cleanup
+
+Sometimes, we need to do extra things after React updates the DOM. Things like:
+* network requests, 
+* changing the DOM manually,
+* keeping logs are 
+
+These are examples of effects that **don't need cleaning up**.
+
+### What does useEffect actually do?
+
+When we use this Hook, we're telling React that our component needs to do 
+something after it's been shown. 
+React remembers the function we gave it (let's call it our "effect") 
+and runs it later, right after taking care of the DOM changes.
+
+### Why is useEffect put inside a component?
+
+When we put useEffect inside the component, 
+it allows us to use any props right in the effect. 
+We don't need a special tool to read it; it's already available in the function. 
+Hooks work well with JavaScript closures, avoiding the need for special React-only 
+tools when JavaScript already provides a solution.
+
+### Does useEffect run every time the component shows?
+
+Absolutely! By default, it runs both after the first show and after every update. 
+Instead of thinking about "when it's first shown" or "when it's updated," 
+it might be simpler to see that effects happen "after each show."
+
+## Handling Effects that Need Cleanup
+
+Earlier, we saw how to deal with effects that don't need cleaning up. 
+But some effects do, like setting up a subscription to an external data source. 
+In these cases, cleaning up is essential to avoid causing memory leaks. Let's explore an example:
+
+You might be thinking that we’d need a separate effect to perform the cleanup. 
+But code for adding and removing a subscription is so tightly related that `useEffect` is designed to keep it together.
+If your effect returns a function, React will run it when it is time to clean up:  
+```jsx
+import { useState, useEffect } from 'react';
+
+const StatusComponent = ({user}) => {
+  const [isOnline, setIsOnline] = useState(null);
+
+  const updateStatus = (status) => {
+    setIsOnline(status.isOnline);
+  }
+
+  useEffect(() => {
+    // start to watch status
+    subscribeToStatus(user.id, updateStatus);
+    
+    // stop to watch the status once the FriendStatus component is removed from DOM
+    // highlight-next-line
+    return () => {
+      unsubscribeFromStatus(user.id, updateStatus);
+    };
+  },[]);
+  
+  return isOnline ? 'Online' : 'Offline';
+}
+```
+
+**Why did we add a function in our effect?**
+
+This is the extra part that helps clean up effects if needed. 
+Each effect can include a function that takes care of cleaning up. 
+This way, we can manage the logic for both setting up and removing subscriptions in one place.
+
+## Tips
+### Use Multiple Effects to Separate Concerns
+Just like you can use the State Hook more than once, you can also use several effects. 
+This lets us separate unrelated logic into different effects:
+```jsx
+const StatusWithCounter = ({user}) => {
+  const [count, setCount] = useState(0);
+  const [isOnline, setIsOnline] = useState(null);
+
+  const updateStatus = (status) => {
+    setIsOnline(status.isOnline);
+  }
+
+  useEffect(() => {
+    document.title = `Button was clicked ${count} times`;
+  });
+  
+  useEffect(() => {
+    subscribeToStatus(user.id, updateStatus);
+    
+    return () => {
+      unsubscribeFromStatus(user.id, updateStatus);
+    };
+  });
+  // ...
+}
+```
+
+### Making Code Clearer with Hooks
+
+Hooks allow us to organize our code based on its purpose rather than a specific 
+lifecycle method name. React will handle each effect in the sequence they are listed.
+
+### Boosting Performance by Avoiding Unnecessary Effects
+
+Sometimes, applying or cleaning up effects after every render 
+can slow things down. In such situations, you can instruct 
+React to skip certain effects if certain values haven't changed between renders. 
+To achieve this, provide an array as an extra option when using `useEffect`:
+
+```jsx
+useEffect(() => {
+  document.title = `Button was clicked ${count} times`;
+}, [count]); // Only re-run the effect if count changes
+```
+
+In the example mentioned, we use `[count]` as the second part. What does this mean?
+
+If `count` is 1, and the component re-renders with `count` still being 1, 
+React compares [1] from the last render with [1] from the next render. 
+Since all items in the array are the same (1 === 1), React skips the effect.
+
+When we re-render with `count` changed to 2, React checks the items in the [1] 
+array from the previous render against the items in the [2] array from the next render.
+This time, React reapplies the effect because 1 !== 2.   
+**If there are several items in the array, React will redo the effect even if only one 
+of them is different.**
+
+This principle also applies to effects with a cleanup phase.
+
+
+## Materials
+1. [Effect Hook, React Documentation](https://react.dev/reference/react/useEffect)
+2. [React component lifecycle: React lifecycle methods & hooks](https://tsh.io/blog/react-component-lifecycle-methods-vs-hooks/#:~:text=React%20lifecycle%20method%20explained&text=As%20you%20probably%20know%2C%20each,a%20component%20from%20the%20DOM)

package/dist/content/content/module-1/theory/module-1_hooks_useState.md

@@ -0,0 +1,131 @@
+---
+sidebar_position: 1
+sidebar_label: 'useState'
+title: 'useState'
+---
+
+## Why you need hooks?
+Hooks let you use state and other React features without writing a class.
+
+## What's a Hook?
+
+A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components.
+
+## When would I use a Hook?
+If you write a function component and realize you need to add some state to it, 
+you do not need to convert it to a class. Now you can use a Hook inside the existing function component.
+
+## Using the State Hook
+
+Let's look at this example:
+```jsx
+import React, { useState } from 'react';
+
+const Button = () => {
+  // Declare a new state variable, which we'll call "count"
+  // highlight-next-line
+  const [count, setCount] = useState(0);
+}
+```
+Understanding Hooks in Function Components
+
+In a function component, the absence of `this` prevents the direct use of `this.state` (common in class components). Instead, the `useState` Hook is employed directly within the component.
+
+## What happens when we call useState?
+
+It makes a "state variable." 
+We named ours `count`, but it could be named anything, even something funny like `banana`. 
+This helps us keep some values between function calls.  
+Usually, variables disappear when the function finishes, but React keeps state variables.
+
+## What is passed to useState as an argument?
+
+The only argument passed to the `useState()` Hook is the initial state, 
+it can be a simple number or string if that suffices. 
+In the provided example, where we want to track the number of clicks, we pass `0` as the 
+initial state for our variable.
+
+:::tip
+If we wanted to store two different values in state, we would call `useState()` twice.
+:::
+
+**What does useState return?**  
+It returns a pair of values: the current state and a function that updates it.  
+This is why we write `const [count, setCount] = useState()`. 
+This is similar to `this.state.count` and `this.setState` in a class, 
+except you get them in a pair. 
+If you're not familiar with the syntax we used, we'll come back to it at the bottom of this page.  
+
+Let's come back to our example. Now that we know what the useState Hook does, our example should make more sense:  
+```jsx
+import React, { useState } from 'react';
+
+const Button = () => {
+  // Declare a new state variable, which we'll call "count"
+  // highlight-next-line
+  const [count, setCount] = useState(0);
+}
+```
+
+We declare a state variable called `count`, and set it to `0`.  
+**React will remember its current value between re-renders**,
+and provide the most recent one to our function. 
+If we want to update the current `count`, we can call `setCount`.
+
+### Reading State
+In a function component, we can use `count` directly:
+```jsx
+<p>You clicked {count} times</p>
+ ```
+
+### Updating State
+
+We have `setCount` and `count` as variables so we can pass new count value to the function:  
+
+```jsx
+<button onClick={() => setCount(count + 1)}>
+  Click me
+</button>
+```
+
+Let's now recap what we learned line by line and check our understanding.
+
+```jsx
+1:  import { useState } from 'react';
+2:
+3:  const Button = () => {
+4:    const [count, setCount] = useState(0);
+5:
+6:    return (
+7:      <div>
+8:        <p>You clicked {count} times</p>
+9:        <button onClick={() => setCount(count + 1)}>
+10:         Click me
+11:        </button>
+12:      </div>
+13:    );
+14:  }
+```
+**Line 1:**   
+We import the `useState` Hook from React. 
+It lets us keep local state in a function component.
+
+
+**Line 4:**  
+Inside the `Example` component, we declare a new state variable by calling the `useState` Hook.
+It returns a pair of values, to which we give names. 
+We're calling our variable `count` because it holds the number of button clicks. 
+We initialize it to zero by passing `0` as the only `useState` argument. 
+The second returned item is itself a function. It lets us update the `count` so we'll
+name it `setCount`.
+
+
+**Line 9:**  
+When the user clicks, we call `setCount` with a new value. 
+React will then re-render the `Button` component, passing the new count value to it.
+
+
+## Materials
+1. [React Documentation. useState Hook](https://react.dev/reference/react/useState)  
+2. [Rules of Hooks. React Documentation](https://react.dev/reference/rules/rules-of-hooks)  
+

package/dist/content/content/module-1/theory/module-1_react.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 2
+sidebar_label: 'What is React?'
+title: 'What is React?'
+---
+Now let's get acquainted with the [React library](https://react.dev/) and start with the one who created and is engaged in further support of it.
+
+## A Quick History Snippet
+
+React JS, a really famous technology, started at Facebook. The company wanted React JS to be a JavaScript library for making user interfaces (UI). Jordan Walke made it, and at first, he called it "FaxJS." Later on, Facebook decided to use it to make their mobile app better. Now, React has a large community, and it keeps updating it all the time.
+
+## What is React?
+
+**React is an open-source JavaScript library** that is used for building user interfaces specifically
+for single-page applications.  
+It’s used for handling the view layer for **web** and **mobile** apps.
+
+## Why React?
+
+React properties include the following:  
+⭐ React is **declarative**  
+⭐ React is **simple**  
+⭐ React is **component based**  
+⭐ React supports **server side rendering**  
+⭐ React is **extensive**  
+⭐ React is **fast**  
+⭐ React is **easy to learn**
+
+## React has several impressive features:
+
+1. [**JSX**](jsx.mdx) (we will learn more about this later)
+
+
+2. **React Native.**  
+  React has native libraries that Facebook announced in 2015, which allow the React architecture to be used in native applications such as iOS and Android.
+   
+
+3. **Single-Way data flow.**  
+   In React, a set of immutable values are passed to the component's renderer as properties in its HTML tags. The component cannot directly modify any properties, but it can pass a callback function that enables modifications to be made.
+   This entire process is commonly referred to as **“properties flow down; actions flow up”**.
+   
+
+4. **Virtual DOM.**  
+   React creates an in-memory data structure cache that computes the changes made and updates the browser accordingly. This unique feature allows programmers to code as if the entire page is rendered on each change, while the React library only renders the components that have actually changed.
+   
+
+## A few more pros of the React
+
+1. **Easy to learn.**  
+   React is relatively easy to understand for anyone with basic knowledge of HTML, CSS, and JavaScript. It has a lower entry threshold compared to other libraries/frameworks, allowing you to start creating a web application quickly.
+   
+
+2. **Performance.**  
+   Many developers faced performance issues when the DOM was updated, which slowed down the application. React addressed this problem by introducing the virtual DOM. The React Virtual DOM exists entirely in memory and is a representation of the web browser's DOM. You no longer need to manually create and remove DOM elements, as React will handle it for you.
+   
+
+3. **Testability.**  
+   React applications are straightforward to test. React views can be treated as functions of the state, allowing us to manipulate the state passed to the React view and examine the output and triggered actions, events, functions, and so on.
+
+
+
+
+
+

package/dist/content/content/module-1/theory/module-1_spa.md

@@ -0,0 +1,74 @@
+---
+sidebar_position: 1
+sidebar_label: 'What is SPA?'
+title: 'Single Page Application'
+---
+
+
+In order to work with the React library effectively, it is essential to have a clear understanding of SPA, as React is specifically designed to facilitate the development of such applications.
+
+## What is SPA?
+
+An application that loads a single HTML page with all the essential assets, including JavaScript and CSS, needed for its operation is known as a single-page application.
+
+In a single-page application, any interactions with the page or subsequent pages do not necessitate a round trip to the server, resulting in the page **not being reloaded**.
+
+## Why Go for SPAs?
+
+Back in the old days, when browsers weren't as advanced as they are now and JavaScript didn't work as well, every page came from a server. When a user clicked on something, a new request went to the server, and the browser then loaded the new page.
+
+Only a few creative products went a different way from this usual method and tried out new ways.
+## Who is using the SPA? 
+**Popular Examples of Single Page Applications:**  
+
+* Gmail
+  
+* Google Maps
+  
+* Facebook
+  
+* Twitter
+  
+* Google Drive
+
+
+## Advantages of SPAs
+
+👍 SPA delivers a **quicker user experience**, eliminating the need to wait for communication between the client and server or for the browser to re-render the page. Instead, instant feedback can be given.
+
+👍 SPA **uses fewer resources on the server**. This is because you can focus on making a good API instead of spending time on server stuff.
+
+👍 This makes it a **great option if you're thinking of creating a mobile app** based on the API, as you can entirely reuse your existing server-side code.
+
+👍 **Converting SPA into [Progressive Web Apps](https://developer.chrome.com/blog/getting-started-pwa) is a simple process.** This enables you to provide local caching and support offline experiences for your services or deliver improved error messages when users need to be online.
+
+👍 SPAs are an **excellent choice for team collaboration**. Backend developers can focus on building a robust API, while frontend developers can dedicate their efforts to creating an outstanding user experience using the API developed in the backend.
+
+
+## Disadvantages of SPAs
+
+While Single Page Applications (SPAs) offer advantages, they also have some downsides. Here are some cons to consider:
+
+👎 **Initial Loading Time:** SPAs may take longer to load initially because the entire application needs to be loaded at once. This can lead to a slower first-time user experience.
+
+👎 **Search Engine Optimization (SEO) Challenges:** SPAs heavily rely on JavaScript, and some search engines may face difficulties in crawling and indexing the content. This can potentially affect the website's search engine ranking.
+
+👎 **Resource Intensiveness:** SPAs can be resource-intensive, especially for less powerful devices or slower internet connections. This may result in performance issues on devices with limited capabilities.
+
+👎 **Security Concerns:** SPAs rely heavily on client-side processing, which may expose certain vulnerabilities if proper security measures are not implemented. Cross-site scripting (XSS) attacks are one example of potential security issues.
+
+
+:::caution
+It's important to carefully weigh the pros and cons of SPAs based on the specific requirements of your project before deciding to use this approach.
+:::
+
+## Changing the Way Navigation Works
+
+In SPAs, the usual browser navigation is not there, so you have to take care of the URLs manually.
+
+The part of the application handling URLs is called the router. Some frameworks, like Ember, do this automatically, but others need additional libraries for it, such as **React Router**.
+
+**What's the challenge?**  
+In the beginning, many developers creating Single Page Applications didn't pay much attention to this, causing a common problem known as the "broken back button." Since the browser's regular navigation was taken over, the URL didn't change when moving around the application. As a result, when users pressed the back button, hoping to return to the previous screen, they might end up on a website they visited a long time ago.
+
+Nowadays, there are solutions for this using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) provided by browsers, but most of the time, you'll use a library like [**React Router**](/docs/module-2/react-router), which internally makes use of that API.