Merge pull request #147 from Ajay-Dhangar/version-upadate

update code for today's work

courses/react-js/begginer-level/building-user-interfaces/IfElseExample.js

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+
+function IfElseExample() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const handleLogin = () => {
+    setIsLoggedIn(true);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+  };
+
+  if (isLoggedIn) {
+    return (
+      <div>
+        <p>Welcome, user!</p>
+        <button onClick={handleLogout}>Logout</button>
+      </div>
+    );
+  } else
+    return (
+      <div>
+        <button onClick={handleLogin}>Login</button>
+      </div>
+    );
+}
+
+export default IfElseExample;

courses/react-js/begginer-level/building-user-interfaces/KeyPropExample.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+function KeyPropExample() {
+  const items = [
+    { id: 1, name: "Apple" },
+    { id: 2, name: "Banana" },
+    { id: 3, name: "Cherry" },
+    { id: 4, name: "Date" },
+  ];
+
+  return (
+    <ul>
+      {items.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default KeyPropExample;

courses/react-js/begginer-level/building-user-interfaces/ListExample.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+function ListExample() {
+  const items = ["Apple", "Banana", "Cherry", "Date"];
+
+  return (
+    <ul>
+      {items.map((item, index) => (
+        <li key={index}>{item}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default ListExample;

courses/react-js/begginer-level/building-user-interfaces/TernaryOperatorExample.js

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+
+function TernaryOperatorExample() {
+  const [isError, setIsError] = useState(false);
+
+  const handleError = () => {
+    setIsError(true);
+  };
+
+  return (
+    <div>
+      {isError ? (
+        <p style={{ color: "red" }}>An error occurred!</p>
+      ) : (
+        <button onClick={handleError}>Trigger Error</button>
+      )}
+    </div>
+  );
+}
+
+export default TernaryOperatorExample;

courses/react-js/begginer-level/building-user-interfaces/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Module 4: Building User Interfaces with React",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "In this module, you will learn how to build user interfaces using the React library. You will learn how to create components, manage state, and use props to pass data between components."
+  }
+}

courses/react-js/begginer-level/building-user-interfaces/lesson_1.md

@@ -0,0 +1,137 @@
+---
+id: lesson-1
+title: "Conditional rendering: Displaying content based on state (if/else statements, ternary operator)"
+sidebar_label: Lesson - 1
+sidebar_position: 1
+description: "Learn how to conditionally render content in React based on component state. Understand how to use if/else statements, the ternary operator, and logical operators to control the visibility of elements."
+tags: [courses, react-js, beginner-level, building-user-interfaces, conditional-rendering, if-else, ternary-operator, logical-operators]
+---
+
+import IfElseExample from "./IfElseExample";
+import TernaryOperatorExample from "./TernaryOperatorExample";
+
+In this lesson, you will learn how to conditionally render content in React based on component state. Conditional rendering allows you to display different elements or components based on certain conditions, such as user interactions, API responses, or internal component state.
+
+## Introduction to conditional rendering in React
+
+Conditional rendering is a powerful feature in React that allows you to control the visibility of elements based on specific conditions. You can use if/else statements, the ternary operator, and logical operators to conditionally render content in your components. This enables you to create dynamic and interactive user interfaces that respond to user actions and external events.
+
+## Using if/else statements for conditional rendering
+
+In React, you can use if/else statements to conditionally render content based on component state. By checking a condition and rendering different elements accordingly, you can create dynamic UIs that adapt to changing data or user interactions. Let's see an example of using if/else statements for conditional rendering in React:
+
+```jsx title="IfElseExample.js"
+import React, { useState } from "react";
+
+function IfElseExample() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  const handleLogin = () => {
+    setIsLoggedIn(true);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+  };
+
+  if (isLoggedIn) {
+    return (
+      <div>
+        <p>Welcome, user!</p>
+        <button onClick={handleLogout}>Logout</button>
+      </div>
+    );
+  } else
+    return (
+      <div>
+        <button onClick={handleLogin}>Login</button>
+      </div>
+    );
+}
+
+export default IfElseExample;
+```
+
+<BrowserWindow minHeight="300px">
+  <IfElseExample />
+</BrowserWindow>
+
+In this example, we define a functional component called `IfElseExample` that conditionally renders content based on the `isLoggedIn` state. If the user is logged in (`isLoggedIn` is `true`), we display a welcome message and a "Logout" button. Otherwise, we show a "Login" button to allow the user to log in.
+
+## Using the ternary operator for conditional rendering
+
+Another common approach to conditional rendering in React is using the ternary operator (`condition ? true : false`). The ternary operator is a concise way to conditionally render content based on a condition. Let's see an example of using the ternary operator for conditional rendering in React:
+
+```jsx title="TernaryOperatorExample.js"
+import React, { useState } from "react";
+
+function TernaryOperatorExample() {
+  const [isError, setIsError] = useState(false);
+
+  const handleError = () => {
+    setIsError(true);
+  };
+
+  return (
+    <div>
+      {isError ? (
+        <p style={{ color: "red" }}>An error occurred!</p>
+      ) : (
+        <button onClick={handleError}>Trigger Error</button>
+      )}
+    </div>
+  );
+}
+
+export default TernaryOperatorExample;
+```
+
+<BrowserWindow minHeight="300px">
+  <TernaryOperatorExample />
+</BrowserWindow>
+
+In this example, we define a functional component called `TernaryOperatorExample` that uses the ternary operator to conditionally render content based on the `isError` state. If an error occurs (`isError` is `true`), we display an error message in red text. Otherwise, we show a button that triggers the error when clicked.
+
+## Differences between if/else statements and the ternary operator
+
+Both if/else statements and the ternary operator are commonly used for conditional rendering in React. Here are some key differences between the two approaches:
+
+|No. | Feature           | If/Else Statements | Ternary Operator |
+|----|-------------------|--------------------|------------------|
+|1.  | Syntax            | Uses `if/else` keywords to define conditions and blocks of code. | Uses a concise `condition ? true : false` syntax to conditionally render content. |
+|2.  | Readability       | Can be more readable for complex conditions and multiple branches of logic. | Provides a compact and concise way to handle simple conditional rendering. |
+|3.  | Flexibility       | Offers more flexibility for handling complex conditions and logic. | Suitable for simple conditional rendering with a single condition and two branches. |
+|4.  | Code structure    | Requires curly braces `{}` to define blocks of code for each branch. | Does not require curly braces and can be used inline within JSX expressions. |
+|5.  | Use cases         | Ideal for scenarios with multiple conditions, complex logic, and extensive branching. | Suitable for simple toggling of elements, conditional styling, and basic conditional rendering. |
+
+Understanding the differences between if/else statements and the ternary operator will help you choose the appropriate approach for conditional rendering based on the complexity of your logic and the readability of your code.
+
+
+:::tip 
+By using if/else statements, the ternary operator, and logical operators, you can control the visibility of elements based on component state and user interactions. Practice using conditional rendering in your React components to build responsive and engaging web applications.
+
+:::
+
+## Live Example for try yourself
+
+```jsx live 
+function Example() {
+  const [showMessage, setShowMessage] = React.useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setShowMessage(!showMessage)}>
+        {showMessage ? "Hide Message" : "Show Message"}
+      </button>
+      {showMessage && <p>Hello, World!</p>}
+    </div>
+  );
+}
+```
+
+In the example above, we define a functional component `Example` that toggles the visibility of a message based on the `showMessage` state. The button text changes dynamically to "Show Message" or "Hide Message" based on the current state, and the message is displayed or hidden accordingly.
+
+
+## Conclusion
+
+Conditional rendering is a fundamental concept in React that allows you to create dynamic and interactive user interfaces. By using if/else statements, the ternary operator, and logical operators, you can control the visibility of elements based on component state and user interactions. Practice using conditional rendering in your React components to build responsive and engaging web applications.

courses/react-js/begginer-level/building-user-interfaces/lesson_2.md

@@ -0,0 +1,128 @@
+---
+id: lesson-2
+title: "Rendering dynamic lists with arrays and the map() function"
+sidebar_label: Lesson - 2
+sidebar_position: 2
+description: "Learn how to render dynamic lists in React using arrays and the map() function. Understand how to iterate over data, generate list items, and display dynamic content in your components."
+tags:
+  [
+    courses,
+    react-js,
+    beginner-level,
+    building-user-interfaces,
+    dynamic-lists,
+    arrays,
+    map-function,
+  ]
+---
+
+import ListExample from "./ListExample";
+import KeyPropExample from "./KeyPropExample";
+
+In this lesson, you will learn how to render dynamic lists in React using arrays and the `map()` function. Dynamic lists allow you to display a collection of items in your components, such as a list of products, blog posts, or user comments. By iterating over an array of data and generating list items, you can create dynamic and interactive user interfaces.
+
+## Introduction to rendering dynamic lists
+
+Rendering dynamic lists is a common task in web development, especially when working with data-driven applications. In React, you can render dynamic lists by mapping over an array of data and generating list items based on the array elements. The `map()` function is a powerful tool that allows you to transform each element of an array into a new element, making it ideal for rendering dynamic content.
+
+## Using the `map()` function to render lists
+
+The `map()` function is a built-in method in JavaScript that allows you to iterate over an array and transform each element into a new value. In React, you can use the `map()` function to render dynamic lists by generating list items for each element in the array. The `map()` function takes a callback function as an argument, which is called for each element in the array.
+
+Here's an example of using the `map()` function to render a list of items in React:
+
+```jsx title="ListExample.js"
+import React from "react";
+
+function ListExample() {
+  const items = ["Apple", "Banana", "Cherry", "Date"];
+
+  return (
+    <ul>
+      {items.map((item, index) => (
+        <li key={index}>{item}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default ListExample;
+```
+
+<BrowserWindow minHeight="300px">
+  <ListExample />
+</BrowserWindow>
+
+In this example, we define a functional component called `ListExample` that renders a list of items using the `map()` function. The `items` array contains four fruit names, and we use the `map()` function to generate a list item for each element in the array. The `key` prop is used to provide a unique identifier for each list item.
+
+## Key prop in list rendering
+
+When rendering dynamic lists in React, it is essential to provide a unique `key` prop for each list item. The `key` prop helps React identify which items have changed, been added, or been removed in the list. It improves the performance of list rendering and helps maintain component state correctly.
+
+Here's an example of using the `key` prop in list rendering:
+
+```jsx title="KeyPropExample.js"
+import React from "react";
+
+function KeyPropExample() {
+  const items = [
+    { id: 1, name: "Apple" },
+    { id: 2, name: "Banana" },
+    { id: 3, name: "Cherry" },
+    { id: 4, name: "Date" },
+  ];
+
+  return (
+    <ul>
+      {items.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default KeyPropExample;
+```
+
+<BrowserWindow minHeight="300px">
+  <KeyPropExample />
+</BrowserWindow>
+
+In this example, we define a list of items as an array of objects, where each object contains an `id` and a `name` property. We use the `id` property as the `key` prop for each list item to ensure that React can identify and track the items correctly.
+
+:::note
+When using the `map()` function to render dynamic lists in React, always provide a unique `key` prop for each list item. Avoid using the array index as the `key` value, as it can lead to performance issues and incorrect rendering when the array order changes.
+:::
+
+## Live coding example for try it yourself
+
+In this live coding example, you will have the opportunity to practice rendering dynamic lists in React using the `map()` function.
+
+```jsx live
+function DynamicList() {
+  const products = [
+    { id: 1, name: "Product 1", price: 10 },
+    { id: 2, name: "Product 2", price: 20 },
+    { id: 3, name: "Product 3", price: 30 },
+    { id: 4, name: "Product 4", price: 40 },
+  ];
+  return (
+    <ul>
+      {products.map((product) => (
+        <li key={product.id}>
+          {product.name} - ${product.price}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+In this example, we define a list of products as an array of objects, where each object contains an `id`, `name`, and `price` property. We use the `map()` function to generate a list item for each product, displaying the product name and price. The `id` property is used as the `key` prop for each list item.
+
+
+
+## Conclusion
+
+Rendering dynamic lists in React using arrays and the `map()` function is a powerful technique for displaying collections of data in your components. By iterating over an array of data and generating list items dynamically, you can create interactive and data-driven user interfaces. Remember to provide a unique `key` prop for each list item to optimize list rendering and maintain component state effectively.
+```