DEV Community: vaatiesther

LegalMindAI – Your AI-Powered Legal Document Hub

vaatiesther — Mon, 27 Oct 2025 06:40:14 +0000

LegalMind AI – Auth0 AI Agents Challenge Submission

This is a submission for the Auth0 for AI Agents Challenge.

What I Built

LegalMind AI showcases how secure AI systems can empower professionals in regulated industries to leverage generative AI without compromising data privacy or compliance. It bridges the gap between document security and AI accessibility, offering a foundation for building trusted, enterprise-grade AI tools.

It offers a secure, AI-powered document management system that enables users and AI agents to interact with legal documents safely and intelligently.

Problems It Solves

Secure Access: Ensures only authorized users or agents can view or query documents through Auth0 FGA.
Efficient Retrieval: Uses AI to quickly find and summarize relevant legal information from large document sets.
Data Privacy: Prevents unauthorized data exposure while still allowing AI-driven insights.
Workflow Automation: Reduces manual document searching and analysis for legal professionals.
Compliance: Maintains full audit trails for all document actions to meet legal and regulatory standards.

Demo

Repo : https://github.com/essykings/LegalMindAI

Live Link : https://legal-mind-sh89.onrender.com/

1. Homepage

The homepage welcomes users to LegalMind AI, showing login options

2. User Login

User 1 (Sarah) logs in securely using Auth0.

3. Uploading a Document

Sarah uploads a private legal case document. This document is only visible to her unless shared or set as public.

4. Viewing My Documents

Sarah can view all her uploaded documents under My Documents.

5. Making a Document Public

Sarah uploads another document and marks it as public. Any user can now see and query this document.

6. AI-Powered Chat

Users can ask questions about their accessible documents. The AI respects user permissions and only answers based on documents they can access.

Example Questions:

“Who are the legal counsels listed for Apex Solutions and GreenTech Partners?”

Since Sarah doesnt have viewer priviledges to the "Apex case", she cant get any information, however she has access to information regarding US law since its a public document

7. Audit Logs

AI queries, and access events are logged for compliance.

8. Share Documents

User 1 (Sarah) uploads a confidential document. She can choose to share this document with User 2 (James), giving him explicit access while keeping it private from everyone else.

Private documents that are not shared remain visible only to the owner.

Example Flow:

Sarah uploads Case_Confidential_A.pdf (private by default).
Sarah shares the document with Jame via the app.
Michael logs in and sees Contract_Review_Apex.pdf in his "My documents" section.

9. Audit Logs

The application keeps a complete audit trail of AI queries, including which documents were used as context and who performed the query.

Example Audit Entry:

{
    "timestamp": "2025-10-26T23:52:21.366970+00:00",
    "question": "How does US law define breach of contract?",
    "documents": [
        {
            "id": "TLnWpz0_6NEWqfCBNjTH7",
            "title": "Public_Legal_Guide"
        }
    ],
    "agent_id": "query agent"
}

10. Summary of Features Demonstrated

Secure login via Auth0
Document upload, sharing, and privacy control
Public and private document distinction
AI-powered document query (RAG pipeline)
Audit logging of all document and AI actions
Role-based access enforced through FGA

How I Used Auth0 for AI Agents

Authentication: Auth0 manages secure user login and session handling.

def authenticate(self, request, token=None):
        if not token:
            return None


        user_info = token.get('userinfo', {})
        auth0_id = user_info.get('sub')
        if not auth0_id:
            raise ValueError("Auth0 user ID ('sub') is missing!")

Authorization: Fine-grained control using FGA ensures users only access documents they own or are shared with them.

 retriever = FGARetriever(
        retriever=vector_store.as_retriever(),
        build_query=lambda doc: ClientBatchCheckItem(
            user=f"user:{user_email}",
            object=f"doc:{doc.metadata.get('document_id')}",
            relation="can_view",
        ),
    )

Key Lessons and Challenges

File Handling: Faced difficulties serving and displaying PDF files securely within Django while preserving access restrictions.
Database Selection: Spent significant time finding the right database setup for semantic search and vector storage
Integration Complexity: Managing communication between Django, Auth0 FGA, and AI services required careful configuration and debugging.
Error Management: Handling unexpected API or embedding errors without exposing sensitive details was a constant learning process.

Takeaways

I learned how powerful and flexible Auth0 tools are for building secure, fine-grained authorization systems.

Test Users

Email: sarah.mitchell@lexfirm.com
Password :TestPass123!

Email: james.thompson@example.com
Email :TestPass123!

How to Manage Multiple promises concurrently with Promise.all()

vaatiesther — Wed, 06 Nov 2024 07:58:20 +0000

Asynchronous programming in JavaScript allows resource-intensive operations to run in the background without interrupting the main thread. Operations like API calls and file processes are some of the operations which should be run asynchronously.

Promises. all() is a powerful function that can manage these operations concurrently. This article will cover how to manage multiple promises concurrently with Promise.all()

Let’s dive in.

What is a Promise

A promise is an object that represents the eventual failure or completion of an asynchronous event. Let’s look at a simple promise.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

A promise takes a function with two parameters, resolve and reject. In our example, the promise will resolve if the operation is successful (i.e., if the userId===1.If the operation fails the promise will be rejected.

The lifecycle of a promise starts in the pending state, and it will eventually either be fulfilled or rejected. Currently, the promise is pending. To consume the promise, we call .then() to handle the result.

The output will either be the user data(if fulfilled) or an error(if rejected).

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

Since the operation is successful, the promise will resolve.

const userId = 1;
let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (userId === 1) {
      resolve({ name: "John Doe", email: "john@example.com" });
    } else {
      reject(new Error("User not found"));
    }
  }, 1000);
});

promise
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });

if we change the value of userId, the promise will be rejected and you will get the error User not found

Suppose you had multiple promises, you would handle each promise independently like this:

const promise1 = new Promise((resolve, reject) => resolve(1));
const promise2 = new Promise((resolve, reject) => resolve(2));
const promise3 = new Promise((resolve, reject) => resolve(3));
promise1
  .then((value) => {
    console.log(value);
    promise2
      .then((value) => {
        console.log(value);
        promise3
          .then((value) => {
            console.log(value);
          })
          .catch((err) => {
            console.log("promise3 error", err);
          });
      })
      .catch((err) => {
        console.log("promise2 error", err);
      });
  })
  .catch((err) => {
    console.log("promise1 error", err);
  });

There are a few potential issues that will arise from the execution above:

Each promise runs after the previous one is completed. promise2 will start after promise1 resolves and promise3 will start after promise2 resolves; This slows down execution.
The nested structure in the .then chaining results in “callback hell”, making the code harder to read and maintain.
Each error is handled independently which adds to more complexity.

A better approach would be to use Promise.all(),which allows promises to run at the same time, hence improving performance and error handling

Enhancing Asynchronous Operations with `Promise.all()`

Promise.all() takes an iterable of promises and returns a single promise. The syntax looks like this:

Promise.all(iterable)

If we use Promise.all() In our earlier example, we have something like this:

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values);
  })
  .catch((err) => {
    console.log("promise all error", err);
  });

As you can see, this approach is cleaner and easier to understand.

JavaScript is a single-threaded language, meaning that each piece of code waits for the previous one to complete before going to the next.

So if JavaScript is single-threaded, how does Promise.all()handle multiple promises?

Promise.all()operates on the concurrency principle, which means that all the promises will start executing not necessarily at the same moment, but initiated without waiting for one to complete before starting the next.

Promise.all()only resolves when all the promises in the iterable are fulfilled, However, if any of the promises in the iterable rejects, Promise.all() will reject immediately and ignore the result of the remaining promises.

Practical Examples

Promise.all() excels in scenarios where you need to perform multiple independent asynchronous operations and wait for all of them to finish before proceeding.

Let’s look at some of these examples where Promise.all() can be used to improve efficiency in real-world applications.

1.Fetching Data from multiple API’s

Consider a scenario where you are working on an application that fetches data from two different APIs simultaneously.

Let’s attempt to fetch the data sequentially from multiple API’s and also log the time taken to finish the request.

const apiUrl = "https://jsonplaceholder.typicode.com/todos/1";
const apiUrl2 = "https://jsonplaceholder.typicode.com/todos/2";
const fetchData = async () => {
  console.time("fetch");
  try {
    const response = await fetch(apiUrl);
    const data1 = await response.json();
    const response2 = await fetch(apiUrl2);
    const data2 = await response2.json();
    console.log(data1);
    console.log(data2);
    console.timeEnd("fetch");
  } catch (error) {
    console.error(error);
  } finally {
    //clean up here
  }
};
fetchData();

Here is the output:

The time taken to process the request is 50.36 ms. This execution time can be improved. To illustrate the benefits of concurrency, Let’s compare the approach using Promise.all()

const apiUrl = "https://jsonplaceholder.typicode.com/todos/1";
const apiUrl2 = "https://jsonplaceholder.typicode.com/todos/2";
function fetchData1() {
  console.time("fetch1");
  Promise.all([
    fetch(apiUrl).then((response) => response.json()),
    fetch(apiUrl2).then((response) => response.json()),
  ])
    .then((results) => {
      console.log("Results:", results);
      console.timeEnd("fetch1");
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
}
fetchData1();

Here we are using Promise.all() to run multiple asynchronous operations concurrently. Promise.all()will take an array of promises and return a single promise when all the promises have resolved.

Here is the output.

From the output, we can see that using Promise.all() is slightly more efficient: This improvement occurs because Promise.all()allows both operations to start simultaneously, rather than waiting for one to finish before starting the other.

In real-world applications with more complex operations or additional API calls, the performance gains from using Promise.all()can be even more significant.

However, if you want to wait for all the promises to settle, regardless of whether they fulfill or reject, you can use Promise.allSettled()

Sending Multiple Chunks of Data Suppose you have an array of text chunks that represent customer feedback or reviews and you need to analyze the sentiment of each chunk by sending it to an external API for analysis.

In this case, all the data needs to be sent at the same time. In this case, you can use Promise.all() and send all the requests concurrently, and then wait for all of them to resolve before getting the results.

For example, suppose we needed to analyse this sample data:

const data = [
  "I absolutely love this product! It's amazing.",
  "The service was terrible. I won't come back again.",
  "Great experience overall. Would recommend to friends.",
  "Beyond what I expected. The product quality is excellent.",
  "Jazz performance was mind-blowing, I enjoyed every moment.",
];

In this case, all the data needs to be sent at once; sending data sequentially will be time-consuming. Instead, we will use Promise.all() to initiate multiple API calls simultaneously.

You will have something like this:

const AnalyseReviews = async (textChunk) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const sentiment =
        textChunk.includes("love") || textChunk.includes("great")
          ? "positive"
          : "negative";
      resolve({ text: textChunk, sentiment });
    }, 500);
  });
};
const reviewFeedback = async () => {
  try {
    const results = await Promise.all(
      data.map((chunk) => AnalyseReviews(chunk))
    );
    console.log("results:", results);
  } catch (error) {
    console.error("An error occurred, please try again:", error);
  }
};
reviewFeedback();

3. Reading and Processing multiple files concurrently.

Suppose you have an application that accepts bulk uploads from users. After taking all the necessary measures to validate the files, you can use Promise.all()to perform multiple file reads in parallel. This is far more efficient than reading each file one by one in a sequential manner.

Without Promise.all(), you would have to wait for each file to be read completely before reading the next file. This would lead to more processing time, especially if you have a larger number of files.

However, with Promise.all(), all file reading operations are initiated simultaneously, leading to considerable time savings and a great user experience.

import { readFile } from "fs/promises";
async function processFiles(filePaths) {
  try {
    const fileContents = await Promise.all(
      filePaths.map((path) => readFile(path, "utf8"))
    );
    return fileContents.map((content) => content.toUpperCase());
  } catch (error) {
    console.error("Error processing files:", error);
    throw error;
  }
}

// Usage
const filePaths = ["file3.txt", "/file3.txt", "file3.txt"];
processFiles(filePaths)
  .then((contents) => console.log(contents))
  .catch((error) => console.error(error));

It’s also important to note that when reading many large files simultaneously, you should be mindful of potential memory considerations.

Summary

In conclusion, Promise.all() offers a lot of benefits which are summarised below

Cleaner Code: Promise.all()makes your code easier to understand since you don’t have nested .then() chains. Requests are handled in a single .then() block.

Efficient: By making requests concurrently, your application’s overall performance improves, as the total time required to fetch the data is reduced.

Level Up Your JavaScript

Get practical JavaScript tips and code snippets delivered to your inbox. Join 1000 + developers who write better code.

How to Build a Weather App in React

vaatiesther — Mon, 21 Oct 2024 13:59:24 +0000

If you want to master crucial web development skills like working with API's, fetching data, and asynchronous functions such as async and await in React, then building a weather app is the best way to learn.

It is also a fun project since you get the see real-time weather and weather forecasts.

In this tutorial, we will use React to build a fully functional weather app that will show the weather for any city and as a 5-day weather forecast for the city.

In addition to knowing whether it will rain tomorrow 😊, you will also learn these concepts:

How to communicate with external APIs
Data fetching in React
Asynchronous operations and the mysteries of async and await.

By the end of this tutorial, you'll have build an app that looks something like this:

If you need to brush up on your React fundamentals, read this Tutorial:

Getting Started with React: A Beginner's Complete Guide

Let's get started.

Development Environment

Vite is a build tool designed for a faster and more efficient development experience. It comes with a dev server that enhances native ES modules with capabilities like extremely fast Hot Module Replacement (HMR) and a build command that utilizes Rollup to bundle code into highly optimized static assets for production.

In your terminal, issue this command which will create a new application called react-weather

npm create vite@latest react-weather

In the next step, select Reat as the framework and JavaScript as the variant.

Once Vite creates the application, cd into the react-weather folder and run npm install and npm run commands.

 cd react-weather
 npm install
 npm run dev

Now your application should be running at http://localhost:5173/

Building the Interface

We will start by building the UI, in your app.jsx file, and delete all the content in the returned fragment. Your app.jsx should now look like this:

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

The UI will have 3 sections.

Header: this will show the city, temperature, and weather conditions
Weather details section: this section will show the Humidity and wind speed
Forecast section: this will show the weather forecast for the next 5 days for each city. Each day will show the temperature and weather conditions (cloudy, sunny, overcast) and so on.

Inside the return statement, let's start by adding a wrapper div. This div element will contain all the sections:

import { useState } from 'react'
import './App.css'

function App() {

  return (
     <div className="wrapper">

      </div>
  )
}

export default App

Inside the wrapper, add a header with an <h1/> to display the city, a <p/>element for the temperature, and another</p/>for the overall weather condition.

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
    </div>
  );
}

export default App;

In the details section, we want to display the humidity and the wind speed in a row, so each will be in its div element.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
    </div>
  );
}

Lastly, the forecast section will have a title and a couple of list items for each day. For the list items, let's start by displaying two days for now.

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  return (
    <div className="wrapper">
      <div className="header">
        <h1 className="city">London</h1>
        <p className="temperature">60°F</p>
        <p className="condition">Cloudy</p>
      </div>
      <div className="weather-details">
        <div>
          <p>Humidity</p>
          <p> 60%</p>
        </div>
        <div>
          <p>Wind Speed</p>
          <p>7 mph</p>
        </div>
      </div>
      <div className="forecast">
        <h2 className="forecast-header">5-Day Forecast</h2>
        <div className="forecast-days">
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
          <div className="forecast-day">
            <p>Monday</p>
            <p>Cloudy</p>
            <p>12°F</p>
          </div>
        </div>
      </div>
    </div>
  );
}

So far, our app now looks like this:

Styling with CSS

To make our interface beautiful, let's add some style, we will use CSS. In the main.jsx file, we already have this import which imports all the global styles for our app

import './index.css'

Let's start by styling the body by using flex.

body {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #60a5fa, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: Arial, sans-serif;
}

Here, we have set justify-items:center and justify-content:centerto ensure all the content is centered horizontally and vertically.

For the wrapper, let's add a different background color, a min-width, a border-radious and a box shadow, and also a margin on all sides.

.wrapper {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  padding: 2rem;
  min-width: 400px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Add a bigger font size to the city name and temperature elements and make them bold. The overall styles for the header elements will look like this:

.city {
  font-size: 2.5rem;
  font-weight: bold;
}
.temperature {
  font-size: 3.5rem;
  font-weight: bold;
}

.condition {
  font-size: 1.25rem;

}

To ensure the elements in the weather details section (i.e, humidity and wind speed) are aligned on the same row, use display: flex and justify-content: space-between; These are the styles for the weather detail and its elements:

.weather-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

Lastly, for the weather forecast section,add the following styles:


.forecast {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 2rem;
}

.forecast-header {
  font-size: 1.5rem;
  font-weight: bold;
}

.forecast-days {
  display: flex;
  justify-content: space-between;
}

.forecast-day {
  font-weight: bold;
}

.forecast-temp,
.forecast-condition {
  font-size: 0.875rem;
}

Now our App looks like this:

Get Real-Time Weather Data

So far we are using placeholder data, to get real-time weather information, we will use the openweather API. Head over to https://openweathermap.org/api and get a FREE API key.

Define the API_KEY.

function App() {

  const API_KEY ="your_api-key";

}

In a production environment, you should add sensitive data like API keys in a .env file.

Store Weather Data using State

In React, state is a crucial concept because it allows components to manage and respond to dynamic data. When you fetch data from an API, you need a way to store and manipulate that data within your component.

This is where state comes in.

Everything in a React component that can change over time is managed by the state. When the state changes, the React component will rerender and reflect the new changes.

For example, in our weather app, we want to get the current weather information for a specific city and store it in the state.

To do that, we will use the useState hook. The syntax for this hook looks like this:

const [value, setValue] = useState(initialValue);

value is the current state value.
setValue is a function that allows you to update the state.
initialValue is the value that the state starts with (it can be a number, string, object, or even an array).

Define the weather data state at the top of the App function. The initial value will be null

function App() {
  const [weatherData, setWeatherData] = useState(null);
}

weatherData will store the weather details
setWeather will update the weather details

Define the state for the city and set the initial state variable of the city name to London

 const [city, setCity] = useState("london");

Fetch Data with the useEffect Hook

React by default has no way of handling side effects. Side effects are operations that occur outside of Reacts control such as asynchronous operations, local storage, e.t. c .

Since React components render when they mount, making an API request at this stage will not have access to the data yet since a fetch request takes time to complete.

In such cases, React uses the useEffect hook to perform side effects. The useEffect hook takes a function as the first parameter and a dependency array. Its syntax looks like this:

 useEffect(()=>{

  // perform side effects operations here

},[dependencies] )

The dependency array in the useEffect hook contains variables that determine when the effect should run. For example, in our case, the useEffect should run when the weather data changes rather than on every render.

Inside the useEffect, create an asynchronous function that will fetch the weather for a specific city from the Open weather API. Since it's an asynchronous operation, our function should also be asynchronous.

The function takes the cityName as the parameter

  useEffect(()=>{
    const fetchWeatherData = async (cityName) => {
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=imperial`;
      const response = await fetch(url);
      const data = await response.json();

     }

  })

Once the data is fetched, use the setWeatherData setter function to update the state with the response data. Ensure to wrap your code in a try-catch block to handle any potential errors.

  useEffect(() => {
    const fetchWeatherData = async (cityName) => {
      try {
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=imperial`;
        const response = await fetch(url);
        const data = await response.json();
        setWeatherData(data);
      } catch (error) {
        console.log(error);
      }
    };
  });

For the data to be fetched on mount, we need to invoke the fetch weather data function inside the useEffect.

When invoking the function, we will pass the value of the current city as the argument. This will ensure that when the app mounts for the first time, we already have some data to show for the value specified in the city state.

 useEffect(() => {
    const fetchWeatherData = async (cityName) => {
      try {
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=imperial`;
        const response = await fetch(url);
        const data = await response.json();
        setWeatherData(data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchWeatherData(city)
  });

If you check the logs with your developer tools, you will see that we are making multiple API requests on every render.

This is a very expensive operation,to prevent fetching on every render, we need to provide some dependencies to the useEffect. These dependencies will determine when an API call is made to the open weather API.

So let's add city in the dependency array to ensure API calls will only be made on the first mount or when the value of city changes.

  useEffect(() => {
    const fetchWeatherData = async (cityName) => {
      try {
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=imperial`;
        const response = await fetch(url);
        const data = await response.json();
        setWeatherData(data);
        console.log(data);
      } catch (error) {
        console.log(error.message);
      }
    };

    fetchWeatherData(city)
  },[city]);

When we log the data, we get an object containing the weather details for the city of London.

{
    "coord": {
        "lon": -0.1257,
        "lat": 51.5085
    },
    "weather": [
        {
            "id": 801,
            "main": "Clouds",
            "description": "few clouds",
            "icon": "02d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 289.65,
        "feels_like": 289.16,
        "temp_min": 288.4,
        "temp_max": 290.92,
        "pressure": 1012,
        "humidity": 69,
        "sea_level": 1012,
        "grnd_level": 1008
    },
    "visibility": 10000,
    "wind": {
        "speed": 5.14,
        "deg": 270
    },
    "clouds": {
        "all": 20
    },
    "dt": 1729349117,
    "sys": {
        "type": 2,
        "id": 2075535,
        "country": "GB",
        "sunrise": 1729319499,
        "sunset": 1729357131
    },
    "timezone": 3600,
    "id": 2643743,
    "name": "London",
    "cod": 200
}

Now let's inject the weather details into the elements using JSX.

{weatherData && weatherData.main && weatherData.weather && (
  <>
    <div className="header">
      <h1 className="city">{weatherData.name}</h1>
      <p className="temperature">{weatherData.main.temp}°F</p>
      <p className="condition">{weatherData.weather[0].main}</p>
    </div>
    <div className="weather-details">
      <div >
        <p >Humidity</p>
        <p style={{fontWeight:"bold"}}>{Math.round(weatherData.main.humidity)}%</p>
      </div>
      <div>
        <p>Wind Speed</p>
        <p style={{fontWeight:"bold"}}>{Math.round(weatherData.wind.speed)} mph</p>
      </div>
    </div>
  </>
)}

In JavaScript, the expression condition && is used for conditional rendering within React components.

The && operator checks two conditions and returns true only if both conditions are true. In our case, if weatherDataexists, the specified data properties will be rendered.

If weatherData is null (or undefined), the elements will not be rendered, preventing any errors that could occur from trying to access properties of null.

Get and Display the Weather Forecast in React

To get the forecast, we will do another fetch request in the same useEffect Hook using this API https://api.openweathermap.org/data/2.5/forecast?q=${CITY}&appid=${API_KEY}&units=imperial

First, create a forecast state to store the forecast data and initialize the initial value to an empty array.

 const [forecast, setForecast] = useState([]);

Inside the fetchWeatherData function, make a fetch request to the above API, and set the forecast state to the response data.

  useEffect(() => {
    const fetchWeatherData = async (cityName) => {
      setCity(cityName);
      try {
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=imperial`;
        const response = await fetch(url);
        const data = await response.json();
        setWeatherData(data);
        console.log(data);

        const foreCastresponse = await fetch(
          `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${API_KEY}&units=imperial`
        );
        const forecastdata = await foreCastresponse.json();

        const dailyForecast = forecastdata.list.filter(
          (item, index) => index % 8 === 0
        );
        setForecast(dailyForecast);
      } catch (error) {
        console.log(error.message);
      }
    };

    fetchWeatherData(city);
  }, [city]);

The forecast API usually returns the forecast after every 3 hours for the next 5 days, resulting into 40 data points, here is the truncated output.

{
    "cod": "200",
    "message": 0,
    "cnt": 40,
    "list": [
        {
            "dt": 1729360800,
            "main": {
                "temp": 59.92,
                "feels_like": 58.95,
                "temp_min": 56.59,
                "temp_max": 59.92,
                "pressure": 1013,
                "sea_level": 1013,
                "grnd_level": 1010,
                "humidity": 71,
                "temp_kf": 1.85
            },
            "weather": [
                {
                    "id": 801,
                    "main": "Clouds",
                    "description": "few clouds",
                    "icon": "02n"
                }
            ],
            "clouds": {
                "all": 17
            },
            "wind": {
                "speed": 3.29,
                "deg": 229,
                "gust": 5.64
            },
            "visibility": 10000,
            "pop": 0,
            "sys": {
                "pod": "n"
            },
            "dt_txt": "2024-10-19 18:00:00"
        },
        {
            "dt": 1729371600,
            "main": {
                "temp": 56.8,
                "feels_like": 55.85,
                "temp_min": 54.43,
                "temp_max": 56.8,
                "pressure": 1015,
                "sea_level": 1015,
                "grnd_level": 1012,
                "humidity": 78,
                "temp_kf": 1.32
            },
            "weather": [
                {
                    "id": 803,
                    "main": "Clouds",
                    "description": "broken clouds",
                    "icon": "04n"
                }
            ],
            "clouds": {
                "all": 59
            },
            "wind": {
                "speed": 4.09,
                "deg": 196,
                "gust": 10.11
            },
            "visibility": 10000,
            "pop": 0,
            "sys": {
                "pod": "n"
            },
            "dt_txt": "2024-10-19 21:00:00"
        },

The variable dt is a timestamp, so if we want to convert it to a human-readable time using the toLocaleDateString() method.

new Date(1729360800 * 1000).toLocaleDateString('en-US', { weekday: 'short' })

The output for this timestamp is sat

So for the array of 40 forecast items, we have used the filter function to filter based on the given (item, index) => index % 8 === 0condition.

(item, index) => index % 8 === 0: This condition means: "Only keep the forecast where the index is divisible by 8." Since the forecast is every 3 hours, every 8th item represents one forecast per day (3 hours × 8 = 24 hours).

So for example, given that the indices range from 0–39, every 8th index is added to the dailyForecast array. In total, we will have 5 instances of weather data.

Each weather forecast data point looks like this:

{
            "dt": 1729360800,
            "main": {
                "temp": 59.92,
                "feels_like": 58.95,
                "temp_min": 56.59,
                "temp_max": 59.92,
                "pressure": 1013,
                "sea_level": 1013,
                "grnd_level": 1010,
                "humidity": 71,
                "temp_kf": 1.85
            },
            "weather": [
                {
                    "id": 801,
                    "main": "Clouds",
                    "description": "few clouds",
                    "icon": "02n"
                }
            ],
            "clouds": {
                "all": 17
            },
            "wind": {
                "speed": 3.29,
                "deg": 229,
                "gust": 5.64
            },
            "visibility": 10000,
            "pop": 0,
            "sys": {
                "pod": "n"
            },
            "dt_txt": "2024-10-19 18:00:00"
        }

Since we have 5 instances, we will use the map() method to iterate and display the forecast for each day.

Update the forecast section as follows:

{forecast.length > 0 && (
  <>
    <div className="forecast">
      <h2 className="forecast-header">5-Day Forecast</h2>
      <div className="forecast-days">
        {forecast.map((day, index) => (
          <div key={index} className="forecast-day">
            <p>
              {new Date(day.dt * 1000).toLocaleDateString("en-US", {
                weekday: "short",
              })}
            </p>
            <img
              src={`http://openweathermap.org/img/wn/${day.weather[0].icon}.png`}
              alt={day.weather[0].description}
            />
            <p>{Math.round(day.main.temp)}°F</p>
          </div>
        ))}
      </div>
    </div>
  </>
)}

Here, we are also checking if the forecast array contains data to ensure we don't loop over an empty array that will cause errors to pop up.

After checking the forecast data, we map over the forecast array and inject the following data for each day.

day of the week
weather icon
temperature

Now our App looks like this:

Get custom Weather Information

Our app looks great, but we still can't fetch dynamic data. Let's add a search form at the top to allow the users to get information about any city.

But first, we need a state for the input field. Declare the state with an empty string as the initial value.

 const [searchInput, setSearchInput] = useState("");

Create the form, bind the input to the searchInput state, and add the onChange event that will update the searchInput value when the user types a new city.

 <div className="wrapper">
      <form className="search-form">
        <input
          type="text"
          value={searchInput}
          onChange={(e) => setSearchInput(e.target.value)}
          placeholder="Enter city name"
          className="search-input"
        />
        <button type="submit" className="search-button">
          Search
        </button>
      </form>

    {/* the rest of the code */}
 </div>

Here are the styles for the form.

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.3); 
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 400px;
}

.search-input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px 0 0 5px;
  background-color: rgba(255, 255, 255, 0.2); 

  outline: none;
  transition: border-color 0.3s ease;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7); 
}

.search-input:focus {
  border-color: #3b82f6; 
}

.search-btn {
  padding: 10px 15px;
  font-size: 16px;
  color: white;
  background-color: #3b82f6; 
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

Since we need to invoke the weatherData function when the form is submitted, we will move the function definition outside the useEffect hook but still call it since the app needs to display some data for the initial city value when it mounts.

const fetchWeatherData = async (cityName) => {
    setCity(cityName);
    try {
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=imperial`;
      const response = await fetch(url);
      const data = await response.json();
      setWeatherData(data);
      console.log(data);

      const foreCastresponse = await fetch(
        `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${API_KEY}&units=imperial`
      );
      const forecastdata = await foreCastresponse.json();

      const dailyForecast = forecastdata.list.filter(
        (item, index) => index % 8 === 0
      );

      setForecast(dailyForecast);
    } catch (error) {
      console.log(error.message);
    }
  };

useEffect(() => {
    fetchWeatherData(city);
  }, [city]);

Get Weather Data when the Form is Submitted

After a user searches for a city with a search form, we need to call another function that will invoke the fetchWeatherData with the new city and update the weatherData state to the weather information for the new city.

Add an onSubmitevent to the form and reference the function as shown below.

 <form onSubmit={handleSearch} className="search-form">
        <input
          type="text"
          value={searchInput}
          onChange={(e) => setSearchInput(e.target.value)}
          placeholder="Enter city name"
          className="search-input"
        />
        <button type="submit" className="search-button">
          Search
        </button>
      </form>

When the form is submitted, it will fetch the weather information for the new city.

 function handleSearch(e) {
    e.preventDefault();
    fetchWeatherData(searchInput);
  }

Since the fetchWeatherData function already updates the new state of the weatherData state with the new data, we only invoke the function and pass the value of the new city from the user (searchInput).

Error Handling

When fetching data from API, various issues can occur. For example, in our case, the weather API might be down, or we might have an invalid API key, or we might have exhausted our daily API limit.

In this case, we need to add a proper error-handling mechanism so the user doesn't experience server errors.

For example, when the app loads for the first time, the forecast array will be empty, and the weatherData will be null. To ensure a good user experience, let's add error and loading states.

const [error, setError] = useState(null);
const [loading, setLoading] = useState(false)

In the fetchWeatherData function, just before any fetch happens, set the initial states of error and loading

  const fetchWeatherData = async (cityName) => {
    try {
     setLoading(true)
     setError(null)

     // the rest of the code

}

In the catch block, let's set the error state to a user-friendly message

} catch (error) {
    setError("Couldnt fetch data,please try again")

} finally {
    setLoading(false)

 }

In JavaScript, the finally clause in the try catch block is great for cleaning up. Regardless of the outcome of the API operation, we want to remove the loading state.

catch (error) {
    setError("Sorry, we couldn't retrieve the weather data at this time");

} finally {
    setLoading(false)

 }

To ensure the error and loading states are reflected in the UI, add this code just before the return statement

 if (loading) return <div className="wrapper">Loading...</div>

To display the error message if it occurs add this <p/> tag after the form.

   {error && <p className="error">{error}</p>}

This condition ensures that if an error occurs, the error message stored in the state will be displayed.

Here is the app in loading state.

Here is the output when an error occurs.

Conclusion

We have come to the end of this tutorial. You can find the source code here.

If you found this tutorial a bit challenging, you might need to brush up on your React Fundamentals.

Get my Free React Guide and Level up.

Happy Coding.

Getting Started with React: A Beginner's Complete Guide

vaatiesther — Thu, 17 Oct 2024 20:06:38 +0000

This post is a bit long. If you'd prefer the complete version in a 60-page PDF, you can download it here.

In this Guide, we will cover the following:

React basics and its component-based architecture
JSX syntax and how it differs from HTML
Creating and using components
Managing state with the useState hook
Handling user interactions and events
Conditional rendering and list rendering
Working with forms in React
Lifting state up for better component communication
Managing side effects with the useEffect hook

What is React?

React is an open-source JavaScript library developed by Facebook in 2013 for building user interfaces, particularly for web applications. Facebook developed React because they had a problem with the state of messages where read messages would still display the unread count.

React comes with its own rules, and to understand React, you need to adhere to these rules and understand how React renders when an application loads. Once you understand these concepts, learning React becomes a breeze

💡Why React

React is one of the most popular frameworks and one of the most in-demand libraries. It also relies heavily on JavaScript, so if you are proficient in JavaScript, learning React will prove to be easier.

React is also an evolving library with a strong vibrant, active community who are continuously improving its features.

React operates on the principle of reusable components. Unlike in a traditional setting where you would have an index.html file with all the code, React allows you to have components for each section, for example, you can have a Header component, a Sidebar component, a Main component, and a Footer component and so on.

💡Getting Started with React

While it's common to build in React by using a framework, you can use a CDN (Content Delivery Network) to start building in with React. This approach allows you to understand how React works under the hood.

Step1: Set up Your HTML File

Create an HTML file with the basic structure, including <! DOCTYPE html>, <html> </html>, <head> </head>, and <body> </body> and the necessary scripts and the CDN links.

Load both React and ReactDOM with CDN links. By using a CDN, you can start building with React without installing any extra tools on your local development environment.

In this example, we will use the unpkg to load React.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React CDN Example</title>
    <!-- React Library -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- React DOM Library -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // Your React code will go here
    </script>
</body>
</html>

In the head section, we have two script tags for loading React and ReactDom from a CDN. Then a div with the id = root. This is where our react application will be rendered.

What is CreateElement

CreateElement is a function used by React to create React elements. React elements are the building blocks of React. The basic syntax of creating a React element with the createElement function looks like this:

React.createElement(type, [props], [...children])

type - this can be a string for HTML elements (i.e. “div”, “h1”), etc.
props : this is an object containing the properties to be passed to the element. For example {id:” container”} might be passed to a div element.
children : this is the content inside the element.

Create and Render an Element

Let’s start by creating a simple H1 heading with the content “ Hello React “. In the script tag, add the code below.

 const element = React.createElement('h1', {},"Hello World!");
 ReactDOM.render(element, document.getElementById('root'));

When you open the index.html file with your browser, you can see the content rendered on your browser.

Congratulations, you have just created your first React App.

Adding Properties.

Our H1 element at the moment does not have any properties, let's fix that, add an id == header

const element = React.createElement('h1', {id :"header"},"Hello World!");
ReactDOM.render(element, document.getElementById('root'));

Now, if you inspect with Developer tools, you can see the ID has been applied.

Nesting Elements

You can also nest createElement call to create more elements. For example, let's add more elements and enclose them with a div.

const element = React.createElement('h1', {id :"header"},"Hello World!");
const element2 = React.createElement('p', {id :"paragraph"}, "This is a paragraph.");

const divElement = React.createElement('div', {id :"container"},element,element2);

ReactDOM.render(divElement, document.getElementById('root'));


const divElement = React.createElement('div', {id: "container"}, element, element2);

This creates a <div> element with the ID "container". Inside this div, we are passing the 2 elements as children.

Here is the final code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React CDN Example</title>
    <!-- React Library -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- React DOM Library -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>

       const element = React.createElement('h1', {id :"header"},"Hello World!");
       const element2 = React.createElement('p', {id :"paragraph"}, "This is a paragraph.");
       const divElement = React.createElement('div', {id :"container"},element,element2);
       ReactDOM.render(divElement, document.getElementById('root'));
    </script>
</body>
</html>

This method of creating a React application is a great way to understand how React works under the hood but for larger applications, you would typically use JSX. JSX syntax is the recommended way to create React applications

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript files. JSX is easier to read and write because it utilizes pure JavaScript. So if you have a solid foundation in JavaScript, Learning React will not be that difficult.

For example, if we were to use a component, the previous code we have just written in JSX, we will have something like this;

function MyComponent() {
  return (
    <div id="container">
      <h1 id="header">Hello World!</h1>
      <p id="paragraph">This is a paragraph.</p>
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

As you can see, this code is more concise

What is JSX

Normally, when creating web applications, you write all your HTML in one file and the JavaScript logic in a .js file. However, this is not the case with JSX. With JSX, all the HTML and Javascript live in one file

So let's convert our code to use JSX

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN Example</title>
    <!-- React Library -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- React DOM Library -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script >
      const name = "World";
      const message = "This is a dynamic paragraph.";

      const element = (
        <div id="container">
          <h1 id="header">Hello !</h1>
          <p id="paragraph">Hello</p>
        </div>
      );

      ReactDOM.render(element, document.getElementById("root"));
    </script>
  </body>
</html>

This code will not work because the JSX code needs to be compiled. Compiling is important because browsers don't understand JSX code, so tools like Babel transform the code into a format suitable for browsers to read.

To fix this issue, include a compiler such as Babel and specify that the JSX code should be transpiled. Update the code as follows:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>React CDN Example</title>
   <!-- React Library -->
   <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
   <!-- React DOM Library -->
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
   <!-- Babel for JSX -->
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 </head>
 <body>
   <div id="root"></div>
   <script type="text/babel">
     const name = "World";
     const message = "This is a dynamic paragraph.";

     const element = (
       <div id="container">
         <h1 id="header">Hello {name}!</h1>
         <p id="paragraph">{message}</p>
       </div>


     );

     ReactDOM.render(element, document.getElementById("root"));
   </script>
 </body>
</html>

The line <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> loads Babel, which allows JSX to be compiled in the browser.
Change the script tag containing JSX to type="text/babel". This ensures that Babel knows how to process it.

Now our code is working as expected.

You might have noticed when we injected the javascript variable inside our HTML markup, we used curly braces.

<h1 id="header">Hello {name}!</h1>
<p id="paragraph">{message}</p>

In JSX, if you need to add JavaScript expressions or variables inside your HTML-like markup, you need to wrap the JS code inside curly braces . The curly braces tell JSX that the code inside the braces is Javascript code and not plain text.

Setting up a React environment

We have seen how to create a React app using a CDN, along with createElement, ReactDOM, and Babel. However, this method is not recommended for production applications, as it does not scale well for larger projects.

Luckily, several frameworks and tools exist that provide built-in support for React and abstract away the complexities of setting up a build process. These tools enable developers to focus on writing code rather than managing configurations.

Recommended Tools for React Development:

Vite:Vite is a modern build tool that provides a fast and efficient development environment for React applications.
Create React App (CRA):Create React App is a widely used tool that sets up a new React project with a solid default configuration.

If you don't fancy a local development environment, you can use https://codesandbox.io to host your code.

Head over to https://codesandbox.io and create an account. Once you are logged in. On your dashboard, create a new React application.

In the next screen, select React

Provide a name for your project and click the Create Sandbox button.

If you prefer a local environment, then you should have Node.js installed. React requires Node.js to run its development server and build the project. You can download the latest stable version of Node.js from Node.js official website.

Start a New React Project with Create-react app

To create a new project, issue the npx create-react app command.

npx create-react-app hello-react

You should see something like this:

Once the installation is complete, cd into the app and issue the npm start command

cd hello-react
npm start

Your app should now be running at http://localhost:3000/

Application Structure

The app structure looks like this:

Whether you use a local development environment or an online tool like CodeSandbox, the structure of the application will be the same. Both methods provide a similar setup, with files like index.js, App.js, and index.html acting as the foundation of your React app.

In this guide, we will use CodeSandbox but for larger applications, a local development environment offers more control and is preferred.

In the public folder, we have an index.html file which looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
</head>
<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

</body>
</html>

The index.html file is a standard HTML file, except that it includes a . In React, this serves as the mounting point where React renders your application.

All the content will be injected into this div. Unlike in a traditional app, where you would select each element using methods like getElementById or querySelector, React uses the ReactDOM.render() method to render components into this div. This process is handled in the index.js file.

In your **index.js **file, you have the code below

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Here, we have imported StrictMode from react and createRoot from react-dom/client. StrictMode is a feature in React used to catch potential bugs and errors in your application. It helps enforce best practices like warning about deprecated features, checking for side effects, and verifying component lifecycle methods.

const rootElement = document.getElementById("root"); is a reference to the div with the id == root from the index.html. Unlike JavaScript where we use a DOM, React uses a virtual DOM to render components.

The virtual DOM allows React to make updates more efficiently by calculating changes in memory and then updating only the necessary parts of the actual DOM.

Once we get a reference to the root, we call createRoot to create a React root. The React root will display content in the browser. Lastly, we render the App component.

This is the App component in the app.js file.

import "./styles.css";

export default function App() {
 return (
   <div className="App">
     <h1>Hello CodeSandbox</h1>
     <h2>Start editing to see some magic happen!</h2>
   </div>
 );
}

The App component introduces us to the JSX (JavaScript XML) syntax. React uses JSX syntax to describe the UI. Most of the code in React applications is written in JSX.

As you can see, JSX looks similar to regular HTML. Behind the scenes, JSX is transformed into JavaScript function calls (e.g., React.createElement) before being rendered to the DOM.

At the top of the file, we can see import "./styles.css"; statement that imports a CSS file that styles the component.

In a regular HTML file, we use class to apply style, but in JSX, the equivalent is className . The className="App" is used to apply CSS styles defined in the styles.css file. In JSX, class is a reserved keyword in JavaScript, so it can't be used as an attribute name.

To prevent conflicts with the JavaScipt language, JSX uses className instead of class to define CSS classes on elements.

A React component is a regular javascript function or class that returns JSX. In the return statement, we have the JSX code that describes the UI. The UI has a div element with two headings: an <h1> and an <h2>.

The export default keyword is important because it allows us to export a component (like App) as the default export of a file. This means that when another file imports App, it can do so without using curly braces around the component name.

In our case, we have seen the App component imported in the index.js file.

// index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

If you don't use export default, then you would then have to use a named export like this

import { App } from './App';

JSX Expressions

Earlier, we saw that we need to enclose any Javascript code with curly braces { }

Let’s do more practice.

Create the following variables in the **App.js **file.

greeting ("Hello codeSandox")
message (e.g., "Start editing to see some magic happen
.")

Inject them into h1 and p tags respectively. The elements should be contained in a div element. The App component now looks like this.

import "./styles.css";

export default function App() {
 const greeting = "Hello CodeSandbox";
 const message = "Start editing to see some magic happen! ";
 return (
   <div className="App">
     <h1>{greeting}</h1>
     <h2>{message}</h2>
   </div>
 );
}

Let’s duplicate the div with the className = App

import "./styles.css";

export default function App() {
 const greeting = "Hello CodeSandbox";
 const message = "Start editing to see some magic happen! ";
 return (
   <div className="App">
     <h1>{greeting}</h1>
     <h2>{message}</h2>
   </div>
    <div className="App">
    <h1>{greeting}</h1>
    <h2>{message}</h2>
  </div>
 );
}

When we do this, we run into some errors, The error message “Adjacent JSX elements must be wrapped in an enclosing tag. “ pops up

This error occurs because, in React, elements must wrapped in a single parent element. To fix this error, we can use a div as a wrapper for all the elements or use a JSX fragment.

What is jsx Fragment

A JSX fragment is a tool in React that lets you wrap multiple elements without adding any additional div elements. Instead of creating a wrapper dic for all the divs, let's create a JSX fragment.

The syntax for a fragment looks like this:

shorthand syntax: <>...</>
full syntax: <React.Fragment>...</React.Fragment>

Let’s use the shorthand syntax in our code.

import "./styles.css";

export default function App() {
 const greeting = "Hello CodeSandbox";
 const message = "Start editing to see some magic happen! ";
 return (
   <>
   <div className="App">
     <h1>{greeting}</h1>
     <h2>{message}</h2>
   </div>
    <div className="App">
    <h1>{greeting}</h1>
    <h2>{message}</h2>
  </div>
  </>
 );
}

Now the errors disappear and when we inspect the elements using browser tools, we can see something like this;

Components

React is a component-based framework. A component is a function that returns React elements. Components make up the UI of any React Application. A component can be as small as a button or as big as a Navbar or Main content.

React comes with two kinds of components, class-based components and **function-based **components. Class-based components are considered legacy, and it's recommended to use function-based components.

You can think of a component as a JavaScript function that returns HTML.

A single component contains content, styles, and javascript of that feature.

We already have the App component.

Create Your First Component

The first step to creating interactive user interfaces in React is to create components since they are the building blocks of any React application. Components can be created as standalone or inside other components. For example, in the App.js file, we can add more components to it.

To create a standalone file, you need to create a new file in the src directory. When naming components, ensure you use PascalCasing.

Create a new file named Menu.js . In the new component, let’s define the structure and what it should display.

export default function Menu() {
 return (
   <div>
     <h2>Hello there what are you having</h2>
   </div>
 );
}

To make this component part of your app, let's import it into the **App.js **file at the top as follows:

To render the Menu component as part of our UI, we need to render it as <Menu/> .

Update the App.js file as shown below.

import "./styles.css";
import Menu from "./Menu";

export default function App() {
 return (
   <div className="App">
     <h1>JOT RESTAURANT</h1>
     <Menu />
   </div>
 );
}

Now your app looks like this.

The good thing about React is that, since it uses a virtual DOM,(a lightweight in-memory representation of the real DOM) every time you make changes to your code, the UI updates quickly without any page reload

Styling in React

You have probably seen the import "./styles.css"; import at the top of the App.js file. This is responsible for importing all the CSS styles to be applied to the App component elements.

React also allows us to add inline styles just as we would in HTML. However, the way we do it in React is a bit different. Instead of strings, React expects the styles to be contained in an object for the style attribute, with the CSS properties written in camelCase. Here’s an example:

const styles = {
  color: 'blue',
  fontSize: '20px',
  marginTop: '10px'
};

function MyComponent() {
  return <div style={styles}>This is a styled text!</div>;
}

Notice how font-size becomes fontSize, and values are written as strings or numbers where appropriate.

Let’s add some styles to our application.

import "./styles.css";

const styles = {
  color: "blue",
  fontSize: "20px",
  marginTop: "10px",
};

export default function App() {
  return (

      <div className="App">
        <h2 style={styles}>JOT RESTAURANT</h2>
      </div>


  );
}

These styles will be added to the h2 tag and you will see that the heading has a blue color

Props

You know how functions in JavaScript have arguments, and React components have props. Props allow us to pass data from one component to another, typically from a parent component to a child component.

In React, data can only be passed from parent to child components, not the other way around, for example, we have a Menu and an App component, and since the App is the parent component, we can only pass data downwards to its children.

Props are also read-only and shouldn’t be modified within a component. If a child component needs to communicate changes or pass data back up to the parent, it can do so using callback functions passed as props.

In the Menu component we we want to add a few dishes, update like this:

// menu.js
import React from "react";

const Menu = () => {
  return (
    <div className="menu-container">
      <div className="burger-item">
        <h3>Beef Burger</h3>
        <p>A classic beef burger with all the trimmings.</p>
      </div>
      <div className="burger-item">
        <h3>Cheeseburger</h3>
        <p>Juicy cheeseburger with melted cheddar cheese.</p>
      </div>
      <div className="burger-item">
        <h3>Bacon Burger</h3>
        <p>Delicious bacon burger with crispy bacon strips.</p>
      </div>
      <div className="burger-item">
        <h3>Veggie Burger</h3>
        <p>A hearty veggie burger with fresh ingredients.</p>
      </div>
      <div className="burger-item">
        <h3>Double Patty Burger</h3>
        <p>A massive burger with two juicy patties.</p>
      </div>
      <div className="burger-item">
        <h3>Spicy Jalapeño Burger</h3>
        <p>A spicy burger with jalapeños and pepper jack cheese.</p>
      </div>
    </div>
  );
};

Our app now looks like this:

In the Menu component, we have at least 5 items displayed, each item is contained in its div and the div has the title and description.

If we had images, we would also add them there. But there is a problem, this data is static. If we had a list of 100 items to display, it would be very cumbersome to create a div for each item, and that's where props come to save the day

Props (properties) allow us to pass data from parent to child components. We can use props to pass data therefore making components more reusable and dynamic.

Create a new component called Menu . Inside this file, we will create an instance of one burger, ie one item.

export default function Burger(props) {
 return (
   <div>
     <div className="burger-item">
       <h3>Beef Burger</h3>
       <p>A classic beef burger with all the trimmings.</p>
     </div>
   </div>
 );
}

You can see we have added the props in the function definition. Now rather than hardcoding the name of the burger and the description, we will simply use props.name and props.descriprtion

export default  function Burger(props) {
 return (
   <div>
     <div className="burger-item">
       <h3>{props.name}</h3>
       <p>{props.description}</p>
     </div>
   </div>
 );
}

Now in the Menu component, we need to pass as many Burger instances as there are burgers, so if we have 5 burgers in the menu, we will pass 5 Burger component instances like this:

Let's start by adding one instance of the Burger component. First import the Burger component at the top of the Menu.js file.

import Burger from "./Burger";

Update the Menu.js file as shown below:

// menu.js
import Burger from "./Burger";
export default function Menu() {

  return (
    <div className="menu-container">
      <Burger />
      {/* the rest of the code */}
    </div>
  );
};

The app now looks like this;

As you can see the first item is empty, that's because even though we have injected an instance of the Burger component, we haven't defined the values, the Burger component expects a name and a description.

This is how data is added via props:

 <Burger name = "Beef Burger" description = "A classic beef burger with all the trimmings."/>

Now we don't need the hard-coded data, since we have a reusable component. let's' replace the rest of the data

const Menu = () => {
  return (
    <div className="menu-container">
      <Burger
        name="Beef Burger"
        description="A classic beef burger with all the trimmings."
      />
      <Burger
        name="Cheeseburger"
        description="Juicy cheeseburger with melted cheddar cheese."
      />
      <Burger
        name="Bacon Burger"
        description="Delicious bacon burger with crispy bacon strips."
      />
      <Burger
        name="Veggie Burger"
        description="A hearty veggie burger with fresh ingredients."
      />
      <Burger
        name="Double Patty Burger"
        description="A massive burger with two juicy patties."
      />
      <Burger
        name="Spicy Jalapeño Burger"
        description="A spicy burger with jalapeños and pepper jack cheese."
      />
    </div>
  );
};


}

We have successfully passed props from parent to child.

Destructuring Props

When we define props as we have done above, we have no idea of what the props object contains. Luckily with destructuring, we can destructure the properties {name, description} and then rather than referencing props.name or props.description, we do something like this;

export default function Burger({name,description}) {
  return (
    <div>
      <div className="burger-item">
        <h3>{name}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
}

List Items

If we were getting a large amount of data from an API or database, it would take us all day to directly add the burger components in the JSX. To improve reusability and maintainability, the best approach would be to define an array of burgers, and then iterate over the array and create a component for each burger.

Create an array named burgers and add all the burger names. The array should be defined at the top level, outside the function.

const burgers = [
  { name: "Beef Burger" },
  { name: "Cheeseburger" },
  { name: "Bacon Burger" },
  { name: "Veggie Burger" },
  { name: "Double Patty Burger" },
  { name: "Spicy Jalapeño Burger" },
  { name: "BBQ Burger" },
  { name: "Mushroom Swiss Burger" },
  { name: "Chicken Burger" },
  { name: "Fish Burger" },
  { name: "Impossible Burger" },
];

Keeping the array outside the component ensures the data is only created once when the module is loaded. It is also good for performance since it can lead to unnecessary performance overhead especially if the dataset is large., if we keep it inside the component, it means that it will be rendered every time the component mounts.

Keeping the data outside the component also prevents redundant initializations since the data is static.

Iterating with the Map() Method

We have worked with a small set of data so far, suppose that our data is coming from an API or a database, the same approach we did so far will not be suitable.

The good thing about iterating in React is that you use pure JavaScript, so your Javascript skills of mapping over an array with the map () method will come in handy

To recap, if we wanted to map over an array, we would do something like this:

const burgers = ["Beef Burger", "Cheeseburger", "Bac Burger"];

const burgerList = burgers.map((burger) => {
  return `<div>
            <h3>${burger}</h3>

          </div>`;
});

The burgerList array will now contain an array of HTML strings for each burger. The output will contain an array of HTML strings for each burger.

[
  '<div><h3>Beef Burger</h3> </div>',
  '<div><h3>Cheeseburger</h3> </div>',
  '<div><h3>Bac Burger</h3> </div>'
]

Luckily react does a good job of unpacking arrays, So for example, if we injected this data in you our JsX syntax like this:

 {   [
  '<div><h3>Beef Burger</h3> </div>',
  '<div><h3>Cheeseburger</h3> </div>',
  '<div><h3>Bac Burger</h3> </div>'
]}

This would be the output

We can see that react renders the data as required, all we need to do is apply the necessary styles.

Create an array of burger objects

const burgers = [
 {
   name: "Beef Burger",
   description: "A classic beef burger with all the trimmings.",
 },
 {
   name: "Cheeseburger",
   description: "Juicy cheeseburger with melted cheddar cheese.",
 },
 {
   name: "Bacon Burger",
   description: "Delicious bacon burger with crispy bacon strips.",
 },
 {
   name: "Veggie Burger",
   description: "A hearty veggie burger with fresh ingredients.",
 },
 {
   name: "Double Patty Burger",
   description: "A massive burger with two juicy patties.",
 },
 {
   name: "Spicy Jalapeño Burger",
   description: "A spicy burger with jalapeños and pepper jack cheese.",
 },
];

Since the map() method must return something, in this case we want to create a Burger component for each of the items in the burgers array and then pass the name and description. Inside the menu-container div, call burgers.map and return a Burger component for each element.

import React from "react";

const burgers = [
  {
    name: "Beef Burger",
    description: "A classic beef burger with all the trimmings.",
  },
  {
    name: "Cheeseburger",
    description: "Juicy cheeseburger with melted cheddar cheese.",
  },
  {
    name: "Bacon Burger",
    description: "Delicious bacon burger with crispy bacon strips.",
  },
  {
    name: "Veggie Burger",
    description: "A hearty veggie burger with fresh ingredients.",
  },
  {
    name: "Double Patty Burger",
    description: "A massive burger with two juicy patties.",
  },
  {
    name: "Spicy Jalapeño Burger",
    description: "A spicy burger with jalapeños and pepper jack cheese.",
  },
];

const Menu = () => {
  return (
    <div className="menu-container">
      {burgers.map((burger) => (
        <Burger name={burger.name} description={burger.description} />
      ))}
    </div>
  );
};

export default Menu;

Once you update this, we can see an error that looks like this:

This error occurs because react needs each item in a list to have a unique key. To resolve the error, we need to add a key to each element. Since the index is unique, let's add it as the key.

Although using the index as a key is not recommended because it can lead to issues especially if any of the list items is removed or shifted in position you might want to generate a unique key for each burger.

 <div className="menu-container">
      {burgers.map((burger,index) => (
        <Burger key = {index}name={burger.name} description={burger.description} />
      ))}
    </div>

Conditional Rendering

Conditional rendering lets you render data based on certain conditions, for example, suppose we wanted to render certain burgers only if they are available or spicy, let's add additional properties to each burger namely is_available(boolean) and isSpicy(boolean).

const burgers = [
  { name: "Beef Burger", description: "A classic beef burger with all the trimmings.", available: true, isSpicy: false },
  { name: "Cheeseburger", description: "Juicy cheeseburger with melted cheddar cheese.", available: true, isSpicy: false },
  { name: "Bacon Burger", description: "Delicious bacon burger with crispy bacon strips.", available: false, isSpicy: false },
  { name: "Veggie Burger", description: "A hearty veggie burger with fresh ingredients.", available: true, isSpicy: false },
  { name: "Double Patty Burger", description: "A massive burger with two juicy patties.", available: true, isSpicy: false },
  { name: "Spicy Jalapeño Burger", description: "A spicy burger with jalapeños and pepper jack cheese.", available: true, isSpicy: true }
];

Now we can conditionally render items based on these properties. This time, we will use the filter method to render only the spicy burgers.

const availableBurgers = burgers.filter((burger) => burger.available);

In the code above , .filter(burger => burger.isSpicy) ensures that only burgers where available: trueare passed to the .map() function for rendering.

Let’s add the spicy Badge based on the isSpicy component within the burger component.

export default function Burger({ name, description, isSpicy }) {
  return (
    <div>
      <div className="burger-item">
        <h3>{name}</h3>
        <p>{description}</p>

        {isSpicy && <span className="spicy-badge">Spicy 🌶️</span>}
      </div>
    </div>
  );
}

{isSpicy && <span className="spicy-badge">Spicy 🌶️</span>}This code is one of the ways of applying conditional logic in React. This essentially means if isSpicy is true, render a span element.

Lastly, update the map method in the Menu component to use the available array rather than the burgers array.

const Menu = () => {
  return (
    <div className="menu-container">
      {availableBurgers.map((burger, index) => (
        <Burger
          key={index}
          name={burger.name}
          description={burger.description}
          isSpicy={burger.isSpicy}
        />
      ))}
    </div>
  );
};

Now your app looks like this:

We can see that the spicy badge has been added to the spicy burgers and now we are only showing the available burgers.

Other examples of Conditional Rendering

If the burgers array didn't have any data, we would have a blank page and this is not a good user experience. To prevent that we can create a condition that checks if the length of the burgers array is equal to 0 and if it is, we just display a message like “ No burgers available at the moment. Please check back later!

const Menu = () => {
  if (availableBurgers.length === 0) {
    return <p>No burgers available at the moment. Please check back later!</p>;
  }
  return (
    <div className="menu-container">
      {availableBurgers.map((burger, index) => (
        <Burger
          key={index}
          name={burger.name}
          description={burger.description}
          isSpicy={burger.isSpicy}
        />
      ))}
    </div>
  );
};

Even though JSX looks similar to HTML markup, there are some key differences you will encounter when working with different elements. For example, let’s look at the input and image elements.

<>
  <img src=" " alt="A cute brown cat on white snow" />
  <input type="text" placeholder="Type something..." />
</>

JSX Tags must be Closed

Both <img> and <input> are examples of self-closing tags. In HTML, it is okay to leave self-closing tags open e.g (<img> ), however in JSX, you must explicitly close them by adding a slash (/) before the closing >.

If you don't close these elements, you will get an error like this:

// Incorrect:
<img>

// Correct:
<img />

JSX Attributes must use CamelCase

When you need to respond to an event on a button, you typically pass the function as shown below for an onclick event.

<button onclick="handleClick()">Click me</button>

In HTML, onclick is written in all lowercase. When a user clicks the button, the handleClick function will be called.

However, in JSX, attributes that are Multi-word or part of the JavaScript language must be written in camelCase. So the equivalent JSX will look like this:

function handleClick() {
  alert("Hello");
}

export default function App() {
  return (
    <button onClick={() => handleClick("Hello")}>Click me</button>
  );
}

In the code above, onClick is written in camelCase instead of onclick, and the function handleClick is wrapped in curly braces to indicate that it is a JavaScript expression.

You might also have noticed that the function handleClick has not been invoked when passed to the onClick attribute. This is because when the component renders, we don't want to invoke the function immediately.

In JSX, when handling event handlers, the function should be passed as a reference without parentheses to avoid immediate invocation on component mount.

What if you need to pass arguments to the function? In this case, you use an arrow function to call the handler with the desired arguments.

function handleClick(message) {
  alert(message);
}

export default function App() {
  return (
    <button onClick={() => handleClick("Button clicked!")}>Click me</button>
  );
}

Conditionals in JSX

In JSX, conditional statements like if, for, switch, etc. are not allowed directly inside JSX markup. If you need to perform conditional rendering, you can use ternary operators or logical operators to conditionally render based on certain conditions.

// Incorrect:
if (isLoggedIn) {
  return <h1>Welcome</h1>;
}

// Correct (using ternary operator):
{isLoggedIn ? <h1>Welcome</h1> : <h1>Please Log In</h1>}

State Management in React

In this section, we will learn about state and how React uses it to update all areas of the application."

We will start with a simple counter example. The purpose of this counter is to increment and decrement numbers when a button is clicked.

Create a new React application and in the App.js file, add the code below.

import "./styles.css";
import { useState } from "react";

export default function App() {
 const [count, setCount] = useState(0);

 return (
   <div className="counter">
     <button>-</button>
     <span className="counter-number">{count}</span>
     <button>+</button>
   </div>
 );
}

The counter now looks like this:

In React, state is used to manage dynamic content. To create a state variable, we use the useState function. Whose syntax looks like this:

const [value, setValue] = useState(initialValue)

Where value is the current state, setValue is the function used to update the state, and initialValue is the initial value of the state. The initial value can be empty, an array, an object, or a string.

In our example, count is the current value of the state, and its initial value is 0. setCount is the function used to update the state.

To update the counter, we need to add onClick event handlers to the buttons. The left button will call a function to decrease the counter, while the right button will call a function to increase the counter by 1.

To update the new state when a button is clicked, you can do so directly by calling the setter function as follows:

setValue(value)

Use the State in JSX

Let's update the state directly within our button using the setCount function within the onClick event handler.

<div className="counter">
    <button onClick={() => setCount(count - 1)}>-</button>
    <span className="counter-number">{count}</span>
    <button onClick={() => setCount(count + 1)}>+</button>
</div>

When you click any of the buttons, the counter will change. Under the hood, when the state changes, it causes the component to re-render. Even though you don't see the page refresh, React does a good job of updating only the parts of the DOM that need to change.

State management in Forms

Working with forms can be a challenging process. You need to create the correct inputs for the data, perform validation on both the front end and back end, and ensure that the submitted data is valid and adheres to the required format and length.

In a traditional HTML form, data is typically collected from the input fields after the user clicks the submit button. However, working with forms in React is a bit different and slightly more complex. In React, every change in the input data must be captured and maintained in the component's state.

By the time the user clicks the submit button, your application already has the input data stored in its state.

This approach offers some benefits mainly:

Immediate feedback: Since the state handles the submitted data, validation can be done immediately before the user even submits the form.
State controlled: In React, we often hear the terms controlled vs uncontrolled input. In controlled input, as the name suggests, the input value is derived from the component's state meaning that every change in the input updates the state.

A simple input markup looks like this:

  <input type="text" id="name" name="name" value="John">

In this traditional HTML form, we have the value “John,” which has been hardcoded. However, in the React context, inputs are controlled elements, meaning that their values are managed by the state. Therefore, we will bind the input value to a state variable and handle changes to the value through state.

In React, the input will look like this:

 <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} />

Assuming we have a name state

const[name, setName] = useState()

Let’s create a simple Login form with username and password fields in the App.js file.

import "./styles.css";

export default function App() {
  return (
    <div className="login-container">
      <form className="login-form">
        <h2>Login</h2>
        <div className="input-group">
          <label htmlFor="username">Username</label>
          <input type="text" id="username" name="username" />
        </div>
<div className="input-group">
          <label htmlFor="password">Password</label>
          <input type="password" id="password" name="password" />
        </div>
        <button type="submit" className="login-button">
          Login
        </button>
      </form>
    </div>
  );
}

How State Works in Forms

In React, the value attribute of an input field is controlled by the component's state. This means that whatever is in the initial state will be the value shown in the input field. For example, let's create a state for both of our input fields:

First, import the useState function at the top of the file.

import { useState } from "react";

Intitialise state variables for username and password.

const [username,setUsername] = useState("john2024")
const [password,setPassword] = useState("1234")

Bind the value to the state

<input type="text" id="username" name="username" 
value = {username}  placeholder = "username"/>


<input type="password" id="password" name="password"
value = {password}
placeholder = "password"/>

Once we bind the value to the state, we can see that the values shown on the input fields are from the state.

The next step is to update the state when the input value changes. This is done by adding the onChange event handler which listens for changes to the input field. As the user types in the input, the event is triggered and the state is updated by the setter function.

This update happens in real-time and is reflected in the input field

Let's add onChange handlers to both our input fields:

<input
  type="text"
  id="username"
  name="username"
  value={username}
  placeholder="username"
  onChange={(e) => setUsername(e.target.value)}
/>

<input
  type="password"
  id="password"
  name="password"
  value={password}
  placeholder="password"
/>

It’s recommended to set the initial value of the state for an input field to an empty string, so let's do that.

const [username, setUsername] = useState(" ");
const [password, setPassword] = useState(" ");

Now the input fields are controlled by the state, and we are in a position to submit form data. Let's do that. Add an onClick event handler to the submit button.

<button onClick={submitData} type="submit" className="login-button">
       Login
</button>

Create the submitData function and log the form data to the console.

function submitData(e) {
   e.preventDefault();
// send data to server

   console.log(`My username is ${username} and password
   is ${password} `);
 }

Here is the output:

In React, it's important to understand that state updates are asynchronous and are typically batched together for performance optimization

Lifting State in React

Since React is a component-based framework, it’s common to create independent components that use their own state. However, in many cases, multiple components need to share or synchronize data. When this happens, the state must be lifted up to a common parent component so that it can be passed down as props to child components. This process is known as lifting state.

An example that comes to mind is a Modal, If we create an independent modal, but the button for opening the modal lives in the parent component, we have to lift the state on the modal into the parent component so as to effectively manage it.

Suppose we have a Modal component that looks like this:

import React, { useState } from "react";
import styles from "./Modal.module.css";
export default function Modal(props) {
const [isOpen, setIsOpen] = useState(false);

 const handleOpen = () => {
   setIsOpen(true);
 };

 const closeModal = () => {
   setIsOpen(false);
 };

 return (
   <>
     <button onClick={handleOpen}>Open Modal</button>
     <div>
       {isOpen && (
         <div className={styles.overlay}>
           <div className={styles.modal}>
             <h2 className={styles.title}>Simple Modal</h2>
             <p className={styles.content}>
               This is a simple modal component  </p>
             <button onClick={closeModal} className={styles.closeButton}>
               Close Modal
             </button>
           </div>
         </div>
       )}
     </div>
   </>
 );
}

In this code, we have a state that controls the opening and closing of a modal. When isOpen is true, the modal is shown; if it is false, the modal is not displayed.

However, we have a problem: we want the button for opening the modal to reside in the App.js component.

The App component cannot change the state of the modal since it has no access to the state. In such a case, we have to lift the state from the Modal component and put it in the App component.

This will allow us to add an Onclick event which will trigger a state change.

Let's start by moving the isOpen state and the functions that control the modal to the App component.

function App() {
 const [isOpen, setIsOpen] = useState(false);
const handleOpen = () => {
   setIsOpen(true);
 };

 const closeModal = () => {
   setIsOpen(false);
 };


 return (
   <>
     <button >Open Modal</button>
     <Modal isOpen={isOpen} closeModal={closeModal} />

   </>
 );
}

The next step is to modify the Modal component so that it receives the state (isOpen) and the closeModal function from the App component as props.

export default function Modal({isOpen, closeModal }) {

 return (
   <>

     <div>
       {isOpen && (
         <div className={styles.overlay}>
           <div className={styles.modal}>
             <h2 className={styles.title}>Simple Modal</h2>
             <p className={styles.content}>
               This is a simple modal component.
             </p>
             <button onClick={closeModal} className={styles.closeButton}>
               Close Modal
             </button>
           </div>
         </div>
       )}
     </div>
   </>
 );
}

Lastly, attach an event listener to the open Modal function so that it will be responsible for opening the modal.

<button onClick={handleOpen}>Open Modal</button>

Now that the App component controls the state of the Modal, and is also the single source of truth for the state of the Modal, it allows us to share the state with multiple child elements and also control the state from different parts of our application.

Managing Side Effects with the useEffect Hook

Side effects in React are operations that affect other components and for which React’s built-in rendering logic can't handle on its own. Some common examples of these side effects include

API requests
Local storage
Event listeners
Subscriptions such as web sockets, e.t. c

Let's look at a few examples.

API Requests

When you need to fetch data from an API in React, it creates a side effect since it involves asynchronous operations. Since React components render on mount, an asynchronous operation may not be completed in time before the component's initial render. In such cases, we use the useEffect hook to perform API interactions.

Suppose you need to fetch data from an API, such as a placeholder that returns some mock data. Let’s create a useEffect for that. In your App.js file, start by importing the useEffect hook."

import { useState,useEffect } from "react";

Next, define it

useEffect(()=>{

//put side effect code here
])

So for example in our case, we need to do a fetch request, let's do that inside the useEffect hook.

function App() {

 useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/todos/1')
     .then((res) => res.json())
     .then((data) => {
       console.log(data);
     });
 });

Now, every time the app renders, the data will be fetched and logged to the console.

The dependency array

React offers another argument to the useEffect hook, which is the dependency array. The dependency array determines what causes the useEffect to run. If you don’t want the useEffect to run on every re-render, you can specify the dependency array.

For example, if we want the useEffect to run on component mount, we will specify an empty dependency array, as shown below

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/todos/1')
     .then((res) => res.json())
     .then((data) => {
       console.log(data);
     });
 },[]);

If you want the use Effect to run when something like state changes, you will add the state to the dependency array,

For example, if we have a user state and we want it to control when the useEffect runs, we would have something like this:

function App() {

 const [user, setUser] = useState({"name":"Ankit","age":25});


 useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/todos/1')
     .then((res) => res.json())
     .then((data) => {
       console.log(data);
     });
 },[user]);

Local Storage

Reading and writing to local storage is a side effect and should be handled in a similar manner using the useEffect hook.

Consider this example where we have a simple note-taking app where a user adds notes, and the notes are then displayed on the page.

function App() {
  const[note,setNote]=useState("");
  const[notes,setNotes]=useState([]);
  console.log(notes);

  return (
    <>
     <input type="text"  value={note} onChange={(e)=>setNote(e.target.value)}/>
     <button onClick={()=>setNotes([...notes,note])}>Add Note</button>

     {notes? notes.map((note,i)=>{
       return <div key={i}>{note}</div>
     }):null}

    </>
  );
}

When a user refreshes the app, all the notes will disappear. To ensure that all the notes are displayed even after a refresh, we will store the notes in local storage.

Add a useEffect hook to save the current notes to local storage whenever the note state changes. In this case, our dependency array will be note. This means that every time a user adds a new note, the note will be saved to local storage.

useEffect(()=>{
  localStorage.setItem("notes",JSON.stringify(notes));
},[notes])

Then we need to set the initial state of the notes to be the notes from local storage.

const[notes,setNotes]=useState(localStorage.getItem("notes")? JSON.parse(localStorage.getItem("notes")):[]);

Here we are using a ternary operator which will first check if the item notes exists in local storage and if it does, the array will be used as the initial value, if it doesnt exist, the initial state will be an empty array.

Here is the full code for managing side effects in React

import { useState,useEffect } from "react";
import "./App.css";


function App() {
 const[note,setNote]=useState("");
 const[notes,setNotes]=useState(localStorage.getItem("notes")? JSON.parse(localStorage.getItem("notes")):[]);

 useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/todos/1')
     .then((res) => res.json())
     .then((data) => {
       console.log(data);
     });
 },[]);

useEffect(()=>{
  localStorage.setItem("notes",JSON.stringify(notes));
},[notes])
function saveNote() {
 if (note.trim()) {
   setNotes((prevNotes) => [...prevNotes, note]);
   setNote("");
 }
}
 return (
   <>

    <input type="text"  value={note} onChange={(e)=>setNote(e.target.value)}/>
    <button onClick={saveNote}>Add Note</button>

    {notes? notes.map((note,i)=>{
      return <div key={i}>{note}</div>
    }):null}
   </>
 );
}

Conclusion

Congratulations! You've just completed an introductory journey into the world of React.

How to Build a Pomodoro Timer in React

vaatiesther — Mon, 23 Sep 2024 11:02:37 +0000

One of the best ways to master any framework is by getting your hands dirty by building projects. In this tutorial, we will learn step-by-step how to build a Pomodoro timer in React

Prerequisites

Foundational Javascript Knowledge
Basics of React

Basics of React

React makes it easy to build applications. It uses the component architecture, which makes it easy to build apps. If you wanted to build this application in pure JavaScript, you would have to get and manipulate the DOM elements.

With React, you only need to update the state or props and React efficiently handles updating the DOM.

React uses components to build different parts of an application. These components use JSX syntax, which is easier to read and write.

Create a new React App with Vite

There are several ways to set up a new React app. You can use tools like Vite or Create React App. In this tutorial, we will use Vite. Vite is a modern build tool that allows developers to quickly set up and organize React applications.

Issue this command to create a new app called pomodoro with vite



npm create vite@latest pomodoro

From your terminal, select React as the framework.

In the next step select JavaScript

Now cd into the pomodoro folder and issue the npm install command to install dependencies:



cd pomodoro
npm install

Lastly, issue this command to run the server



 npm run dev

Your app should now be running at http://localhost:5173/.

The project comes with some starter code. In your App.js file, delete the div inside the return statement of the App component. You should now be working with a clean slate, like this:



import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>

    </>
  )
}

export default App

Just a recap, in the code above we have an App component. React components should be written in camelCase and exported either as default or named exports.

The App component currently returns an empty JSX element. Inside the return statement is where we will add the HTML structure for the Pomodoro timer. For now, we will use just one component.

Update the file as shown below:



import { useState } from "react";
import "./App.css";

function App() {
  return (
    <>
      <div className="wrapper">
          <h1>Pomodoro Timer</h1>

          <div className="timer-display">
            <span>25</span>
            <span>:</span>
            <span>00</span>
          </div>

          <div className="buttons">
            <button>START</button>
            <button>STOP</button>
          </div>
        </div>
    </>
  );
}

export default App;

Add the following styles in the index.css file



body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wrapper {
  display: inline-block;
  border: 2px solid #05011d;
  padding: 20px;
  width: 600px;
  box-sizing: border-box;
}
h1 {
  font-size: 24px;
  margin-top: 20px;
}

.timer-display {
  font-size: 48px;
  margin-top: 20px;
}
.buttons {
  margin-top: 20px;
}
.start,
.stop {

  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
}
.start{
  background-color: #53ae5e;
}
.stop{
  background-color: #d90f26;
}

Now we have a great-looking UI.

The first thing you might notice is that the time is hardcoded. To make it dynamically updatable, we need to set the initial time (e.g., 25 minutes) and allow it to be adjusted. We will start by storing the original time in a state variable.

The useState Hook

The useState Hook allows you to add state to functional components. This will allow us to declare the time and update it whenever the timer starts running.

The useState hook looks like this:



const [state, setState] = useState(initialState);

state: The current state value.
setState: A function to update the state.
initialState: The initial value of the state.

In our case, we want the initial timer value to be 1500 seconds(25 mins). We will then use the setState function to update the new state as the timer continues running.

Let's create our states for the initial time. To make it easier to work with time, we will convert the initial time to seconds.



  const[timeLeft, settimeLeft] = useState(1500);

A general rule of hooks in react is that they should be declared at the top level of the component. Hooks should also not be declared inside loops, conditions, or nested functions.

To display the time in minutes and seconds, let's convert the time back to minutes and seconds and update the span elements in the timer display.



<div className="timer-display">
    <span>{String(Math.floor(timeLeft / 60)).padStart(2, "0")}</span>
    <span>:</span>
    <span>{String(timeLeft % 60).padStart(2, "0")}</span>
  </div>

The padStart() function adds leading zeros to ensure consistency. For example, if the remaining minutes are 9, the timer will show 09. The same formatting is applied to the seconds.

To start the timer, we need to create a function startTimer which will be called when the START button is clicked, This function will then decrement the time by 1 second.

Create a function called StartTimer.



function App() {
 const [timeLeft, settimeLeft] = useState(1500);
 function startTimer(){
  // the rest of the code .....

  }}

Working with Time in JavaScript

When working with time in JavaScript, it's ideal to work with seconds and milliseconds. To decrement or increment the timer, you use the setInterval() method which repeatedly calls a function at the specified time interval

From MDN docs, this is the definition:

The setInterval() method, offered on the Window and WorkerGlobalScope interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

Using setInterval in pure JavaScript

If we were using pure javaScript, we would use setInterval() to decrement the timer after 1 second like this:



const interval = setInterval(() => {
  // decrement timer
}, 1000);

This will not work in React because of the way React rerenders states and components.

Using setInterval in React

React components re-render based on changes in props and state. If we use setInterval directly, it will not reflect the recent state since state updates are asynchronous.

To solve this issue, we need a way of updating the interval on every re-render, we will use useRef which will keep the state of the interval intact until it is cleared.

At the top of the App component file,import the useRef hook and, just after the useState hook, store the interval ID using useRef as shown below.



import { useState,useRef } from "react";
function App() {
  const [timeLeft, settimeLeft] = useState(1500);
  const intervalRef = useRef(null);
  /// the rest of the code

Start Pomodoro Timer

To start the Pomodoro Timer, add this code to the startTimer function.



function startTimer() {
    intervalRef.current = setInterval(() => {
      settimeLeft((prevTimeLeft) => {
        return prevTimeLeft - 1});
    }, 1000);
  }

Since states are asynchronous, when we update the timeLeft, we have to use the functional update form : settimeLeft(prevTimeLeft=> prevTimeLeft -1);This ensures that we have an accurate representation of the recent state.

Now let's bind the START button to the startTimer function so that it gets called when the button is clicked.



 <button onClick={startTimer}>START</button>

In React, you have to remember that event listeners are always camel-cased. Additionally, ensure that the function attached to the event listener is referenced rather than invoking it. (e.g., onClick={startTimer}) rather than invoking it directly (e.g., onClick={startTimer()})

When you click the START button, the timer will decrement as expected.

However, there is a potential flaw in our timer, when the timer reaches 0, it will start showing negative values. We need to create a condition to clear the timer when the timeLeft equals 0.
Update the startTimer function as follows:



  function startTimer() {
    intervalRef.current = setInterval(() => {
      settimeLeft((prevTimeLeft) => {
        if(prevTimeLeft<=0){
          clearInterval(intervalRef.current)
          intervalRef.current =null
          return 0
        }
        return prevTimeLeft - 1});

    }, 1000);
  }

After the timer reaches 0, we clear the interval and update the value of intervalRef to the original null value. The timer works as expected.

Stop Pomodoro Timer

The next functionality is the ability to stop a timer. Create a function stopTimer and add the code below.



function stopTimer(){
  clearInterval(intervalRef.current)

}

To stop the timer, all we need to do is clear the interval.

Conclusion

This tutorial has covered how to create a functional Pomodoro Timer in React. The code can be found in this repo:

Thanks for reading

The best way to master JavaScript is by building projects.
Subscribe to the Practical JavaScript Newsletter and level up your JavaScript skills.

JavaScript ES6 Features You need to Know before Learning React

vaatiesther — Thu, 06 Jun 2024 11:38:43 +0000

If you are looking to learn to react, it goes without saying that you should have your Javascript fundamentals figured out.

React also uses many ES6 concepts, which you should already be familiar with. In this tutorial, we will cover the most commonly used ES6 features you should know before learning React.Learning and understanding how to use these concepts will make your React journey fun and smooth.

Template Literals

ES6 has made working with strings easier. Rather than concatenating strings with the plus(+) sign, template strings provide an easier way.

// old way of joining strings
function sumNumbers(a, b) {
  return "The sum of " + a + " and " + b + " is " + (a + b);
}
// using template literals
function sumNumbers(a, b) {
  return `The sum of ${a}  and ${b} is ${a + b}`;
}

Template literals also make it easier to work with multi strings

const multiLineString = `
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit.
  Sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua.
`;

console.log(multiLineString);

Arrow Functions

Arrow functions make your code more concise. Let’s look at the differences between a normal function and an arrow function.

// Normal function
function myFunction() {
  // Expression or statement
}
// Arrow function
const myArrowFunction = () => {
  // Expression or statement
};

With an arrow function, rather than using the function keyword, you use the fat arrow(=>), hence making it more concise.

If an arrow function returns a single expression, you can commit the curly braces and the return keyword.

If an arrow function takes a single argument, you can commit the double parathesis around the parameter.

// explicit return  single expression
const add = (a,b) => a + b;

// ommit parantesis if single argument
const squared = a => a * a;

Arrow function are commonly used in array method such as map(), filter(), forEach(), e.t.c

const names = ["Carol", "jane", "alice"];
const capitalizedNames = names.map((name) => name.toUpperCase());
console.log(capitalizedNames);

//output  // [ 'CAROL', 'JANE', 'ALICE' ]

As you can see above, since we are only passing a single argument, we have committed the parentheses.

Destructuring Objects

Destructuring in JavaScript is the process of unpacking values from arrays or properties from objects into distinct variables. It is helpful when working with complex data structures, such as data from databases or an API.

For example, suppose you have a simple object describing a cat.

const cat = {
  catName: 'Whiskers',
  age: 3,
  color: 'gray',
  breed: 'Persian'
};

To get the cat name, you would normally use dot notation or bracket notation like this:

const cat = {
  catName: "Whiskers",
  age: 3,
  color: "gray",
  breed: "Persian",
};

``
// console.log(cat.catNname)

However, with object destructuring, you can unpack the properties into variable names and assign them to the cat object like this:

const { catNname, age, color, breed } = cat;
console.log(`My cat ${catNname} is ${age} moths old`)

The output will be:

My cat Whiskers is 3 months old

Destructuring Arrays

Destructuring arrays is similar to Destructuring objects;. Suppose we have an array of employees:

const employees = [
    'Carol kristen deck ',
    'john weber Smith',
    'Alice k Johnson'
  ];

If we wanted to get the employee on index 1, we would do this:

employees[1]

But with destructuring, we can unpack the values into variables like this:

const employees = [
  "Carol kristen deck ",
  "john weber Smith",
  "Alice k Johnson",
];


const [E1,E2,E3 ] = employees;

E1 will be the value of the first employee of the array, E2 is the value of the second employee and so on; if you just want the first employees of the array, you can commit the rest like this:

const [E1, ,] = employees;

console.log(E1); 
// Carol kristen deck

Object Literals

Object literals allow developers to avoid duplication when writing objects. For example, suppose we have a Task function constructor that looks like this:

function Task(title, description, priority) {
    return {
      title: title,
      description: description,
      priority: priority
    };
}

With ES6 object literals, you can write the short hand version like this;

function Task(title, description, priority) {
  return {
    title,
    description,
    priority,
  };
}

The Spread Operator

The spread operator is used to spread elements of iterable objects. Iterable objects include arrays, objects, and strings.

The spread operator can copy, combine, or pass elements as arguments to another function. For example, when you are working with arrays and you don’t want to alter the original array, you can use the spread operator to make a copy of the array like this:

const names = ["Alice", "Bob", "Charlie", "Diana", "Ethan"];
const namesCopy = [...names]
console.log(namesCopy)

The rest Operator

The rest operator is similar to the spread operator in that it uses three(…) dots. However, the rest operator is used within function parameters to collect multiple arguments into a single array.

For example, suppose we need to create a function that gets the sum of numbers. Assuming our array takes an indefinite number of arguments, we can use the rest operator to collect the arguments into an array.

function sumNumbers(...arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

Then, we can use the function to handle any number of arguments.

numbers = [1, 2, 4];
grades = [30, 40, 50, 60, 70];
console.log(sumNumbers(...numbers)); //output //7
console.log(sumNumbers(...grades));   //output //250

The rest operator can also be used in restructuring assignments. For example, suppose, we need to extract the first element of the grades array, we can extract it into a variable and then collect the rest of the elements into an array as shown below.

grades = [30, 40, 50, 60, 70];
const [index0, ...arr] = grades;
console.log(math);

The for of loop

The for of loop is used to iterate elements in iterable objects such as arrays, strings, typed arrays, maps, sets, and NodeLists. The syntax of a for of loop looks like this:

for (variable of iterable) {
  //code to be executed for each variable
}

Iterating over an Array

const currencyCodes = ["USD", "EUR", "GBP", "JPY"];
for (const code of currencyCodes) {
  console.log(code);
}
// USD
// EUR
// GBP
// JPY

Iterating over an array of objects

For example, suppose we have an array containing several objects, as shown below.

const currencies = [
    { currency: "US Dollar", code: "USD" },
    { currency: "Euro", code: "EUR" },
    { currency: "British Pound", code: "GBP" },
    { currency: "Japanese Yen", code: "JPY" }
  ];

If we iterate over the currencies array, we will get each individual object.

for (const currency of currencies) {
  console.log(currency);
}

The output will look like this:

{ currency: 'US Dollar', code: 'USD' }
{ currency: 'Euro', code: 'EUR' }
{ currency: 'British Pound', code: 'GBP' }
{ currency: 'Japanese Yen', code: 'JPY' }

Iterating over a NodeList

A NodeList is a collection of nodes extracted from the document of a web page. For example, suppose you have a <ul> of <li>elements in our page :

<ul class="languages">
      <li>Python</li>
      <li>JavaScript</li>
      <li>Ruby</li>
    </ul>

We can use the querySelectorAll attribute to get the NodeList containing the

elements like this

 const listItems = document.querySelectorAll('.languages li')

Then use the for of loop concept to get the textContent of each

element

const listItems = document.querySelectorAll(".languages li");
for (const item of listItems) {
  console.log(item.textContent);
}

Conclusion

Which ES6 Features do you find yourself using almost every day? Let me know in the comments below.

Thanks for reading

The best way to master JavaScript is by building projects. Subscribe to the Practical JavaScript Newsletter and level up your JavaScript skills.

How to Perform Semantic Search using ChromaDB in JavaScript

vaatiesther — Wed, 05 Jun 2024 14:50:59 +0000

This tutorial will cover how to use embeddings and vectors to perform semantic search using ChromaDB in JavaScript.

What are Embeddings

Have you ever wondered how recommendation systems like Netflix almost always know what movies you like? When you log in to Netflix, the app presents recommendations that will likely fit your tastes and preferences;Embeddings power the mechanism behind this.
Embeddings refer to the transformation of words, text, or audio into numerical vectors. A numerical vector is essentially an array of numbers. This transformation preserves the meaning of the words and also captures their relationship to to other words in the vector space.

What is A vector space

A vector space is a mathematical space where vectors represent data. For example, consider the words 'cat' and 'kitten.' When these words are represented as vectors in a vector space, the vectors capture their semantic relationship, thus facilitating their mapping within the space.

The distance between the 'cat' and 'kitten' vectors measures their relatedness. Since 'cat' and 'kitten' are close to one another, the distance between them is small. Larger distances between vectors indicate that the words or texts are not closely related.

This means that when you search for "cat," the system can recognize the similarity and suggest content related to cats and kittens.

This powerful technology is what allows platforms like Netflix and Spotify to provide you with personalized and accurate recommendations, enhancing your viewing and listening experience.

How to create Embeddings with OpenAI

OpenAI provides an embedding model that measures the relatedness of text. To get an embedding of our 'cat' and 'kitten' words, we need to send each string to the OpenAI embeddings API endpoint along with the model name

First, define your OpenAI API_KEY



const OPENAI_API_KEY ="your_openai_api_key";

Create a function that takes a phrase or word as an argument, sends it to the OpenAI embeddings API, and gives back the embedding.



async function createEmbeddings(word) {
  const url = " https://api.openai.com/v1/embeddings";

  const headers = {
    "Content-Type": "application/json",
    Authorization: `Bearer ${OPENAI_API_KEY}`,
  };
  const data = {
    input: word,
    model: "text-embedding-3-small",
  };
  const response = await fetch(url, {
    method:'POST',
    headers: headers,
    body: JSON.stringify(data),

  });
  const embedding = await response.json();
  console.log(embedding.data)
}

Now let's invoke the function with the words cat and kitten



createEmbeddings("cat");
createEmbeddings("kitten");

The output will look like this:



[
  {
    object: 'embedding',
    index: 0,
    embedding: [
         0.02552942,  -0.023411665, -0.016092611,    0.03937628,   0.02094483,
        -0.02632067,  0.0018908527,  0.030602723,  -0.015929706, 0.0053118416,
         0.02214334, -0.0002121755,  0.010460779,  0.0031213614,   0.02985802,
        0.006265995,  -0.021363726, -0.010716772,  -0.030532908,  0.057528466,
         0.03409353,    0.04589245,  0.020502662,  -0.046637155, -0.006871068,
         0.03800323,  -0.009268087,   0.04405396,   0.051803548, -0.013497779,
       0.0033686268,  -0.043123078,   -0.0112753,  -0.029090041, -0.022946225,
        0.017768197,   0.017570386, -0.028019529,  -0.015743531,   0.01378868,
       -0.037281796,  -0.008773557,  0.045799363,   0.011473113,  0.009460081,
         -0.0533395,  -0.022597145, -0.019606689,   0.019362332,  0.037142165,
        0.023388393,  -0.014870829,   0.01746566,    0.04998833, -0.004168603,
      -0.0011636016,  -0.019292515,   0.04659061, -0.0029279126,  0.009279723,
       -0.024970891,  0.0059925485,   0.02518034,  -0.002679193,  0.019420512,
        0.038282495,    0.01837327,  0.017232941,   -0.05962295, -0.018210366,
      -0.0058034635,   0.028415153, -0.062089786,   0.011286936,  0.047218956,
        0.009401902,  -0.029974379, -0.000250538,   0.062974125,  0.043425616,
       0.0011352389,   0.058552437,  0.016243879,  -0.025226884,   0.01259017,
       -0.023202218,  -0.034512427,   0.02850824,   0.011054216, -0.026041405,
      -0.0038457036,   0.015487539, -0.044798665,  -0.038980655, -0.010332783,
        0.043774694,  -0.008517564, -0.048219655,  -0.001969396,  0.014149397,
      ... 1436 more items
    ]
  }
]

What is a Vector Database

As the name suggests, a vector database is a database that can store vectors. Unlike traditional databases that use primary keys and foreign keys when querying data, data in vector databases is in the form of highly dimensional vectors. When querying, vector databases use mathematical proximity to find similar items.

How to Set up A vector database with ChromaDB and Docker

Vector databases are ideal for building complex AI applications. ChromadB is an open-source vector database that requires minimal configuration to get started.

To get started, you should have Docker Installed. Follow the steps below to get it running on your machine:

Pull the ChromaDB docker image from the Docker hub repository.



docker pull chromadb/chromadb

Run the chromaDB container and specify the ports



docker run -d -p 8080:8080 --name chromadb chromadb/chromadb

To verify that the container is running, issue this command



docker ps

You should see the ChromaDB container from your list of running containers.

Adding Data to the VectorStore

To ensure the semantic meaning of data is accurate, the data needs to be in small chunks, we will start by adding items in an array describing some movies that look like this:



const movies = [
  '"Title":"Due Date","Year":"2010","Rated":"R","Released":"05 Nov 2010","Runtime":"95 min","Genre":"Comedy, Drama","Actors":"Robert Downey Jr., Zach Galifianakis, Michelle Monaghan","Plot":"High-strung father-to-be Peter Highman is forced to hitch a ride with aspiring actor Ethan Tremblay on a road trip in order to make it to his child\'s birth on time."',
  '"Title":"Easy A","Year":"2010","Rated":"PG-13","Released":"17 Sep 2010","Runtime":"92 min","Genre":"Comedy, Drama, Romance","Actors":"Emma Stone, Amanda Bynes, Penn Badgley","Plot":"When Olive lies to her best friend about losing her virginity to one of the college boys, a girl overhears their conversation. Soon, her story spreads across the entire school like wildfire."',
  '"Title":"Unstoppable","Year":"2010","Rated":"PG-13","Released":"12 Nov 2010","Runtime":"98 min","Genre":"Action, Thriller","Actors":"Denzel Washington, Chris Pine, Rosario Dawson","Plot":"With an unmanned, half-mile-long freight train barreling toward a city, a veteran engineer and a young conductor race against the clock to prevent a catastrophe."',
  '"Title":"Despicable Me","Year":"2010","Rated":"PG","Runtime":"95 min","Genre":"Animation, Adventure, Comedy","Actors":"Steve Carell, Jason Segel, Russell Brand","Plot":"Gru, a criminal mastermind, adopts three orphans as pawns to carry out the biggest heist in history. His life takes an unexpected turn when the little girls see the evildoer as their potential father."',
  '"Title":"Don Henley: Live Inside Job","Year":"2000","Rated":"N/A","Runtime":"105 min","Genre":"Documentary, Music","Actors":"Don Henley, Jonathan K. Bendis, Will Hollis","Plot":"Don Henley performs his greatest hits live in Dallas."',
  '"Title":"Harry Potter and the Deathly Hallows: Part 1","Year":"2010","Rated":"PG-13","Runtime":"146 min","Genre":"Adventure, Family, Fantasy","Actors":"Daniel Radcliffe, Emma Watson, Rupert Grint","Plot":"As Harry, Ron and Hermione race against time and evil to destroy the Horcruxes, they uncover the existence of the three most powerful objects in the wizarding world: the Deathly Hallows."',
  '"Title":"Tangled","Year":"2010","Rated":"PG",,"Runtime":"100 min","Genre":"Animation, Adventure, Comedy","Actors":"Mandy Moore, Zachary Levi, Donna Murphy","Plot":"The magically long-haired Rapunzel has spent her entire life in a tower, but now that a runaway thief has stumbled upon her, she is about to discover the world for the first time, and who she really is."',
  '"Title":"Black Swan","Year":"2010","Rated":"R",,"Runtime":"108 min","Genre":"Drama, Thriller","Actors":"Natalie Portman, Mila Kunis, Vincent Cassel","Plot":"Nina is a talented but unstable ballerina on the verge of stardom. Pushed to the breaking point by her artistic director and a seductive rival, Nina\'s grip on reality slips, plunging her into a waking nightmare."',
  '"Title":"The Social Network","Year":"2010","Rated":"PG-13","Released":"01 Oct 2010","Runtime":"120 min","Genre":"Biography, Drama","Actors":"Jesse Eisenberg, Andrew Garfield, Justin Timberlake","Plot":"As Harvard student Mark Zuckerberg creates the social networking site that would become known as Facebook, he is sued by the twins who claimed he stole their idea and by the co-founder who was later squeezed out of the business."',
  '"Title":"Toy Story 3","Year":"2010","Rated":"G","Runtime":"103 min","Genre":"Animation, Adventure, Comedy","Actors":"Tom Hanks, Tim Allen, Joan Cusack","Plot":"The toys are mistakenly delivered to a day-care center instead of the attic right before Andy leaves for college, and it\'s up to Woody to convince the other toys that they weren\'t abandoned and to return home."',
  '"Title":"A Clockwork Orange","Year":"1971","Rated":"R","Runtime":"136 min","Genre":"Crime, Sci-Fi","Actors":"Malcolm McDowell, Patrick Magee, Michael Bates","Plot":"In the future, a sadistic gang leader is imprisoned and volunteers for a conduct-aversion experiment, but it doesn\'t go as planned."',
  '"Title":"Inception","Year":"2010","Rated":"PG-13",,"Runtime":"148 min","Genre":"Action, Adventure, Sci-Fi","Actors":"Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page","Plot":"A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O., but his tragic past may doom the project."'
];

Import ChromaClient.



import { ChromaClient } from "chromadb";

Instantiate a chromaDB client that will connect to the ChromaDBb server.



const client = ChromaClient();

Create a collection.

A collection is a way to organize vectors. Our collection will store all the details and features about the movies in the movies array. Each vector will have the following features:

ID,
metadata,
movie details,
and embeddings.

Chroma is integrated with OpenAI's Embeddings, which allows it to leverage OpenAI's Embedding capabilities.

Import OpenAIEmbeddingFunction class from chromadb and instantiate an OpenAIEmbeddingFunction class , authenticate with OpenAI and supply your embedding function in creating a collection.



import { ChromaClient,OpenAIEmbeddingFunction } from "chromadb";
const embeddingFunction = new OpenAIEmbeddingFunction({
  openai_api_key: OPENAI_API_KEY,
});

Create a collection called movies and specify the embedding function.
const collection = await client.createCollection({
name: "movies",
embeddingFunction:embeddingFunction
});

The embedding function ensures that Chroma transforms each individual movie into a multi-dimensional array (embeddings). This will ensure the semantic meaning is maintained, which will be useful when performing queries.

Add data to the Collection

Each movie should have a unique ID, so we will loop over the movie's array, create a unique ID for each movie, and insert it into the database.



for (const movie of movies) {
  const uniqueId = `${Date.now()}-${Math.floor(Math.random() * 10000)}`;

  collection.add({
    documents: [movie],
    ids: [uniqueId],
    metadatas: [{ name: movie }],

  });

To view the collection, navigate to http://localhost:8000/api/v1/collections , and you should see all your collections.

Perform Similarity Search

Let's first get the collection. Use the .getCollection() method and specify the name of your collection and the embeddingFunction.



const mycollection = await client.getCollection({
    name:"movies",
    embeddingFunction:embeddingFunction
})

Search Collection

Let's do a query with the phrase “ recommend for me a movie suitable for kids”,



const results = await mycollection.query({
    queryTexts: ["recommend for me a movie suitable for kids"],
    nResults: 2,
  });
console.log(results.documents);

Here is the response .



[
  [
    '"Title":"Despicable Me","Year":"2010","Rated":"PG","Runtime":"95 min","Genre":"Animation, Adventure, Comedy","Actors":"Steve Carell, Jason Segel, Russell Brand","Plot":"Gru, a criminal mastermind, adopts three orphans as pawns to carry out the biggest heist in history. His life takes an unexpected turn when the little girls see the evildoer as their potential father."',
    `"Title":"Toy Story 3","Year":"2010","Rated":"G","Runtime":"103 min","Genre":"Animation, Adventure, Comedy","Actors":"Tom Hanks, Tim Allen, Joan Cusack","Plot":"The toys are mistakenly delivered to a day-care center instead of the attic right before Andy leaves for college, and it's up to Woody to convince the other toys that they weren't abandoned and to return home."`
  ]
]

We expected our query to return results that are semantically similar to the query, and as you can see, the response is accurate. Despicable Me and Toy Story 3 are all movies suitable for kids. How awesome is this?

Conclusion

In conclusion, this tutorial has shown you how to leverage the power of embeddings and ChromaDB to perform semantic searches in JavaScript.

Stay tuned for part 2, where we will cover how to add a retriever.

A comprehensive guide to Promises, Async, and Await in JavaScript

vaatiesther — Mon, 15 Apr 2024 08:00:00 +0000

How JavaScript works under the Hood

By default, Javascript is single-threaded, meaning the JavaScript engine can only execute one thing at a time. i.e., the code is executed sequentially, line by line.

JavaScript uses the call stack, which is a data structure that keeps track of function calls in your code, and since JavaScript is single-threaded, it also means that there is only one call stack .

Because of the single call stack, only one function can be executed at a time.
Consider the example below:

function fetchData() {
  console.log("Fetching data from API...");
  console.log("Data fetched successfully:", { id: 1, name: "Example Data" });
  displayData({ id: 1, name: "Example Data" });
}

function displayData(data) {
  console.log("Displaying data to the user:", data);
}

fetchData();

The first time the program starts running, a global execution context is created. Next, the fecthData()function is pushed to the call stack. In this call stack, the 2 console.log() statements are executed.

When the displayData()is called, it is pushed to the call stack, and the console.log() statement "Displaying data to the user" is executed. fetchData() is resumed and completes the execution.
Now fetchData() has completed execution and is pushed off the stack, and the program execution is finally completed.
If we invoke the function, this is the result.

If the fetchData()function takes too long to execute, it can lead to blocking the main thread, this is where asynchronous operations come in.

Asynchronous JavaSript

Asynchronous code allows other operations within your program to continue running while the asynchronous operation runs in the background, so in short, it doesn't block, or it is called non-blocking.

Some examples that may require running asynchronously are getting data from the server when performing HTTP requests; rather than having to wait for an HTTP request to complete, which might take some time before you get a response, you can use asynchronous code to run the HTTP request in the background.

To properly understand this, we will simulate a setTimeout function in the fetching data function; the code below will have not wait for the setTimeout() function to execute before going to the next code statement.

function fetchData() {
    const start = new Date().getTime();
    console.log(" start fetching data from API...");
    setTimeout(() => {
      console.log(`running backgorund task`);
      displayData();
    }, 8000);
    console.log("If you can see this, am not blocking the main thread");
  }


  function displayData() {
    console.log("Displaying data to the user:");
  }

  fetchData();

The output of the above code will be:

As you can see from the console.log statements, the code below the setTimeout function runs before the fetching data from API because setTiemout is an example of an asynchronous function that runs in the background and, therefore, does not cause blocking of the main thread.

Promises for Asynchronous operations

To achieve asynchronous operations, we can also make use of promises.
A promise is a response to an Ajax call. A promise can also be defined as a placeholder for a result that may or may not be delivered.
To create a promise, we use the Promise()constructor like this: The Promise()constructor takes in a function as an argument, and the function takes in resolve and rejects parameters.

let promise = new Promise(function((resolve, reject));

The lifestyle of a promise consists of the following states:

pending
settled (can either be fulfilled or rejected)

A fulfilled promise is a successful response, while a rejected promise results in an error.

let  promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Operation successful!");
    }, 1000);
  });

  console.log(promise);

  // a promise that will reject
  let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("Operation failed!"));
    }, 1000);
  });

  console.log(promise1);

The first promise will be successful, while the second will be rejected. Once a promise has been settled, the state cannot be changed. Here is the output.

Consuming Promises

To get the result from a promise, we need to consume it. Promises are consumed by using a .then()method. Consider the following example, which illustrates the concept using the Hangman game.

const secretWord = "cheese";
function guessWord(letter){
    let promise = new Promise((resolve, reject)=>{
        if (secretWord.includes(letter)){
            resolve(`Letter ${letter} is correct`);
        }else{
            reject(new Error(`Letter ${letter} is incorrect`))
        }
    })
    return promise

}

Hangman is a word-guessing game that challenges players to guess a secret word one letter at a time. If players guess a correct letter, it's revealed in the word. If not, a part of a hangman is drawn. The game continues until the players guess the word correctly or the hangman is completed.

If we invoke the guessWord() function, we will get a Promise.

To get the value of the promise, we need to consume it by attaching the .then()method when invoking the function. Inside the .then method, we pass a callback function that will be executed as soon as the promise is fulfilled like this:

guessWord("c")
  .then((response) => {
    console.log(response); //output  //Letter c is correct

  })

Error handling

If a promise has not been resolved or fulfilled, then it means that it has been rejected. To handle rejected promises, we can pass a .catch() method at the end of the chain like this:

guessWord("b")
  .then((response) => {
    // console.log(response);
    return response

  })
  .catch((error)=> console.log(error.message))

The Fetch API

The Fetch API is a promise-based API for making network requests in web browsers and Node.js environments. Compared to traditional methods like XMLHttpRequest, it provides a more powerful and flexible way to handle HTTP requests. For example, suppose we need to fetch some dummy data from the placeholder API; our fetch will look like this:

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => {
    const promise = response.json();
    console.log("Promise returned by response.json():", promise);
    return promise;
  })
  .then(data => {
    console.log("Fetched data:", data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

The first .then()method returns a promise that resolves to the Response object representing the HTTP response. So when we log the response.json()object, it returns a Pending Promise.
The second .then() method waits for the promise returned by the first .then() method to resolve. and then returns the fetched data
Once the response is successful, the state of the promise will change to fulfilled, and if an error occurs, the state of the promise will be rejected.

If any error occurs during the fetch or the parsing of the response body, it will be caught in the .catch()method.

Async, await

Async, await is an even easier way to consume promises. Async await was introduced in ES2017 to simplify the consumption of promises. As the async function is created by adding the async keyword in any function you want to make asynchronous like this:

async function getDate(){
  // perform asynchronous operations here.
}

The await keyword, on the other hand, is used to await responses from the promise, For example, suppose you are making a fetch request to a URL like this:

const response = fetch(URL)

The response object is a promise, and so to get the actual data, we have to consume it with await like this:

const data = await response.json()

await will pause the execution of the async function until the fetch promise is settled. Then, it will retrieve the response data as JSON using the .json() method.

As you can see above, we have abstracted away all the logic behind the scenes, and we don't have to deal with the headaches of consuming promises by chaining several handler methods.

Async, Await Example

Let's rewrite the example we used above as an async function

async function fetchData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

        return response.json();
    } catch (error) {
        console.error('Fetch error:', error);
    }
}
fetchData();

Using async await not only simplifies asynchronous code but also makes it easy to handle errors by using a try ..catch block that will catch any error that may occur during the async operation. Whether an error occurs while waiting for the fetch call to resolve or during processing the response data inside the try block, it will be caught and handled in the same catch block

Returning data from async functions

If an async function returns data like above, the returned data is in a pending state, therefore the returned data should also be received in an asynchronous function.

If you invoke the getData() function like a normal function, you will get a pending promise.

The right way to consume data from an asynchronous function is by using another aync function since await can only be used in an asynchronous function.

async function fetchData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

        return response.json();
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

async function consumeData() {
    try {
        const data = await fetchData();
        console.log("Consumed data:", data);
    } catch (error) {
        console.error('Error consuming data:', error);
    }
}

consumeData();

//output

// {userId: 1, id: 1, title: 'delectus aut autem', completed: false}

The await keyword can also be used at the top level of a module.

Conclusion

This article has covered everything you need to know about Asynchronous operations in JavaScript. Check out this CodePen, which demonstrates how to use async functions with the OpenAI API to generate quotes.

How to Build a To-do App with HTML, CSS, and Vanilla JavaScript with Local Storage

vaatiesther — Mon, 04 Mar 2024 06:45:00 +0000

The internet is built on the foundation of interacting with data: getting data from users, storing data, updating, and deleting data. A to-do app is the best tool to practice these fundamental skills.

In this tutorial, we will cover how to create a fully functional to-do app with HTML, CSS, and JavaScript. Users will be able to do the following:

Add tasks
edit tasks,
delete tasks and
mark tasks as complete

By the end of this tutorial, we will have something like this:

HTML Structure

Our HTML will have three sections:

A message section
A search box section
A tasks section



<div class="container">
  <section class="message">

  </section>
  <section class="search-box">
    <input type="text" placeholder="Add Task" id="addTaskInput" />
    <button class="add-btn"><i class="fa-solid fa-plus"></i></button>
  </section>
  <section class="tasks">
    <ul>
      <!-- <li>
            <input type="radio" class="complete" checked />
            <span class="content complete">Create a Todo App with JavaScript</span>
            <div class="buttons">
              <button class="edit-btn">
                <i class="fa-solid fa-pen-to-square"></i>
              </button>
              <button class="delete-btn">
                <i class="fa-solid fa-trash"></i>
              </button>
            </div>
          </li> -->
    </ul>
  </section>
</div>

The ul element is empty because that is where we will add tasks dynamically with JavaScript. Each task will have the following elements:

A radio button to mark the task as complete
a span element to display the task
an edit button and a delete button

Styling with CSS

We will start by styling the body to ensure all our elements are centered horizontally:



body {
    background: #000;
    height: 100vh;
    display: flex;
    justify-content: center;
    color: #fff;
  }

The container element containing all our sections will have the following styles:



.container {
      padding: 60px 50px;
      margin-top: 100px;
      width: 500px;
      height: 500px;
      position: relative;
    }

Next style the message section to ensure it is always at the center of the container element.



.message{
      text-align: center;
      position: absolute;
      top: 50%;
      left: 30%;
    }

For the search-box section, use Flexbox to ensure child elements are aligned at the center and also spaced evenly.



.search-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

For the input, add the following styles:



.search-box input {
    width: 100%;
    height: 30px;
    border-radius: 20px;
    padding: 10px 10px;
    background: rgb(41, 39, 39);
    border: none;
    color: #fff;
    margin-left: 30px;

  }

To ensure our tasks will be stacked vertically, set the flex-direction to column, and add some padding and margin to ensure space between individual tasks.



.tasks {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
    }

    .tasks li {
      margin-top: 10px;
      padding: 20px 10px;
      background: rgb(28, 25, 28);
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 5px;
      border-radius: 10px;
      position: relative;

    }

Use flex-basis to ensure the span element for displaying taks takes up 60 % of the width while the buttons take only 20%.



.tasks li span {
    display: flex;
    flex-basis: 60%;
  }
  .tasks li .buttons {
    display: flex;
    flex-basis: 20%;

  }

Remove the default button style and add a transparent background on the edit and delete button to ensure the icons are visible:



.tasks li .buttons button {

      background: transparent;
      border: none;
    }

Add the following styles to the icons




.buttons button i {
      color: rgb(175, 16, 16);
      font-size: 20px;
    }

For the radio buttons, we will have these custom styles:



.tasks input[type="radio"] {
      appearance: none;
      width: 20px;
      height: 20px;
      border: 1px solid #999;
      border-radius: 50%;
      outline: none;
      box-shadow: 0 0 5px #999;
      transition: box-shadow 0.3s ease;
    }
.tasks input[type="radio"]:checked {
      background-color: #bfb9b9;
    }

Finally, add these styles, which will be added dynamically with JavaScript.



   .strike-through {
      -webkit-text-stroke: 2px rgb(179, 186, 179);
      text-decoration: line-through;
    }
    .complete {
      background-color: #bfb9b9;
    }

Now our app looks like this:

JavaScript Functionality

To make it possible for users to add tasks, we will use JavaScript. Let's start by getting the following HTML elements using the DOM(Document Object Model):



const message =  document.querySelector(".message");
const tasksContainer = document.querySelector(".tasks");
const ulElement = tasksContainer.querySelector("ul");
const taskBtn = document.querySelector(".add-btn");

Next, let's initialize some variables:



let html = "";
let allTasks = [];

The variable html will store the html string containing HTML markup representing each task.
The allTasks array will store all the tasks, each task will have an id (timestamp), a name and a completed value which is be either true or false. A sample task will look like this:



{
id:1700000,
name: "Name of task",
completed:false
}

Add New Task

Well, start by adding a click event listener to the add task button. Inside the event listener function, we will get the input value from the user, pass it to an addTask()function, and set the value of the input to an empty string.

If the user has not entered a value, we will return: This will prevent adding an empty task to the list or performing unnecessary operations when the user hasn't entered any value



  const taskBtn = document.querySelector(".add-btn");
  taskBtn.addEventListener("click", function () {
    let newTaskInput = document.getElementById("addTaskInput");
    const newTask =newTaskInput.value;

    console.log(newTask);
    if (!newTask) return;

    addTask(newTask);
    newTaskInput.value = "";

  });

Define the addTask() function.



function addTask(task) {

}

Inside the function, we want to do the following:

define a task id using the current timestamp
add the task object to the allTasks array
assign the html variable to the task HTML markup
append the html to the ulElement

Update the function as follows.



function addTask(task) {
  taskId = new Date().getTime();
  allTasks.push({ id: taskId, task: task, completed: false });
  html = ` <li data-id =${taskId}>
    <input type="radio" class="complete-btn"  />
              <span class="content">${task}</span>
              <div class="buttons">

              <button class = "edit-btn" ><i class="fa-solid fa-pen-to-square"></i>Edit</button>
              <button class="delete-btn"><i class="fa-solid fa-trash"></i>Delete</button>

          </div>

          </li>`;
  ulElement.innerHTML += html;
  editTask();

}

As you can see, each li element representing the task has a unique id added as a data attribute value (data-id = ${taskId}): This will allow us to retrieve the id when editing or deleting a task.

Delete Task

Define a function called removeTask()



function removeTask(){

}

Inside the removeTask() function, we want to get the data attribute of the li element and remove the task from the DOM.




    function removeTask(){
      deleteBtn = document.querySelectorAll(".delete-btn");
    deleteBtn.forEach((element) => {
      element.addEventListener("click", function (e) {
        const liElement = this.closest("li");
        const taskId = liElement.getAttribute("data-id");
        liElement.remove();
      });
    });

    }

Let's break down what is happening in the removeTask() function.

Since all the delete buttons have the same class, we have used the querySelectorAll property to select all the buttons.
Used forEach to iterate over each button
for each button, we get the li element closest to the button using this.closest("li) (where this refers to the button clicked).
then we remove the liElement from the DOM.
Finally, we get the data attribute value of the li element and store it in a variable called taskId. We will use this value when we implement local storage

Edit Task

Define a function called editTask().Inside this function, we want to do the same steps as the delete button: that is:

get all the edit buttons
use forEach() method to iterate and get the closest lielement
get the data-id attribute
use the id to find the task in the allTasks array
update the task name in the DOM

Update the editTask() function as follows:



      function editTask() {
        editBtn = document.querySelectorAll(".edit-btn");
        editBtn.forEach((element) => {
          element.addEventListener("click", function (event) {
            const liElement = event.target.closest("li");
            const taskId = liElement.getAttribute("data-id");

            const taskIdIndex = allTasks.findIndex(
              (task) => task.id.toString() === taskId
            );

            if (taskIdIndex !== -1) {
            const currentTask = allTasks[taskIdIndex].task;
              const newTask = prompt("Edit Task:", currentTask);
              if (
                newTask !== null &&
                newTask !== "" &&
                newTask !== currentTask
              ) {
                allTasks[taskIdIndex].task = newTask;

                const contentElement = liElement.querySelector(".content");
                contentElement.textContent = newTask;

              }
            }
          });
        });
      }

Let's break down what happening in the editTask() function above:

After we get the task id from the data attribute, we use the findIndex() method to check if the id exists in the allTaksks array .
When passed on an array, the findIndex() method finds the index of the first element that meets the specified condition. If no element is found, it returns -1
if the taskIndex is not -1, we use the taskIndex value to get the current task with this code allTasks[taskIndex].task const newTask = prompt("Edit Task", currentTask);:displays a prompt dialog box with the message "Edit Task:", and the input value is set to the current task content (currentTask).
The new value is then stored in the newTask variable.
The if statement validates the new value entered by the user.
allTasks[taskIndex].task = newTask : updates the new task name in the array.
finally, we update the span content of the current li element with this code: contentElement.textContent = new Task;

Now, if you click the edit button for any task, you should see this prompt.

Mark Tasks as Complete

To mark a task as complete, we will apply the following CSS classes to the radio button and the content in the li element.



  .tasks input[type="radio"]:checked {
    background-color: #bfb9b9;
  }

  .strike-through {
    -webkit-text-stroke: 2px rgb(179, 186, 179);
    text-decoration: line-through;
  }
  .complete {
    background-color: #bfb9b9;
  }

Create the completeTask()function, which will look like this:



function completeTask() {
  completeBtn = document.querySelectorAll(".complete-btn");
  completeBtn.forEach((element) => {
    element.addEventListener("click", function (e) {
      const liElement = event.target.closest("li");
      console.log(liElement);
      const contentSpan = liElement.querySelector(".content");

      contentSpan.classList.add("strike-through");

      const taskId = liElement.getAttribute("data-id");
      const taskIndex = allTasks.findIndex(
        (task) => task.id.toString() === taskId
      );
      if (taskIndex !== -1) {
        allTasks[taskIndex].completed = this.checked;

      }
    });
  });
}

In the completeTask()function, we are doing the following:

attaching event listeners to the radio buttons, and for each button, we are getting the task id from the data attribute of the closest li element.
adding the strike-through CSS classes to the span of the current li element
using the findIndex()method to get the index of the current task from the allTasks array, then updating the state of the button to checked.

Local Storage Functionality

Even after adding tasks, they will disappear once you refresh the page. To persist storage, we will add local storage functionality.

Local storage is an object that allows you to store data in the browser. The data is stored as strings in key-value pairs. Data stored in the browser will exist even after you close the browser. It will only be deleted if you clear the cache.

Adding this functionality to our project will allow data added to persist even after the page is refreshed or closed.
To store data in local storage, you use setItem, as shown below.




localStorage.setItem("task", "New task");

Once you store this data, using chrome dev tools, you can see the data under the Application tab.

To get the item stored in local storage, use the key as follows:



localStorage.getItem("tasks")

To remove items from local storage


 js
localStorage.clear();

Add Tasks to Local Storage

Let's implement the functionality for addding our tasks in local storage. Since we already have all the tasks in the allTasks array, all we need to do is add the data to local storage like this:



  localStorage.setItem("tasks", JSON.stringify(allTasks));

Since data stored in local storage is in string format, we have used JSON.stringify to convert the task objects into strings for storage.

Update the addTask() function as follows:



function addTask(task) {
  // the rest of the code
  localStorage.setItem("tasks", JSON.stringify(allTasks));

}

Now go back and add some tasks, and you should see them in the browser.

Load from Local Storage

We also need to load the tasks from local storage. Create a function called loadFromStorage(). This function will check if there are tasks in local storage, and if found, the tasks will be rendered on the page using the renderTasks() function.



function loadFromStorage() {
    const storedTasks = localStorage.getItem("tasks");
    if (storedTasks) {
      allTasks = JSON.parse(storedTasks);
      renderTasks();
    }
  }

Create the renderTasks() function and add the code below.



function renderTasks() {
  ulElement.innerHTML = ""; // Clear existing tasks
  allTasks.forEach((task) => {
    const completedClass = task.completed
      ? "complete strike-through"
      : "";
    const html = `
      <li data-id="${task.id}" class="${completedClass}">
          <input type="radio" class="complete-btn" ${
            task.completed ? "checked" : ""
          } />
          <span class="content">${task.task}</span>
          <div class="buttons">
              <button class="edit-btn"><i class="fa-solid fa-pen-to-square"></i>Edit</button>
              <button class="delete-btn"><i class="fa-solid fa-trash"></i>Delete</button>
          </div>
      </li>`;
    ulElement.innerHTML += html;
  });

  editTask();
  completeTask();
  removeTask();
}

Let's break down what the renderTasks()function does:
`

ulElement.innerHTML = "" `: clears any existing tasks on the page
then, we use the forEach() method to iterate over the allTasks array and add the HTML markup of each task to the ulElement.
const completedClass=task.completed? "complete strike-through": "": is a condition that checks if task.completed is true and adds the "complete strike-through" CSS class. If task.completed is false, the no CSS class will be applied.
Lastly we will attach the editTask, completeTask and removeTask event listeners.

Update Tasks in Local Storage

To update tasks in local storage, update the editTask() function as follows:



function editTask() {
  editBtn = document.querySelectorAll(".edit-btn");
  editBtn.forEach((element) => {
    element.addEventListener("click", function (event) {
      const liElement = event.target.closest("li");
      const taskId = liElement.getAttribute("data-id");

      const taskIdIndex = allTasks.findIndex(
        (task) => task.id.toString() === taskId
      );

      if (taskIdIndex !== -1) {
        console.log(allTasks[taskIdIndex]);
        console.log(allTasks[taskIdIndex].task);

        const currentTask = allTasks[taskIdIndex].task;
        const newTask = prompt("Edit Task:", currentTask);
        if (
          newTask !== null &&
          newTask !== "" &&
          newTask !== currentTask
        ) {
          allTasks[taskIdIndex].task = newTask;

          const contentElement = liElement.querySelector(".content");
          contentElement.textContent = newTask;

          localStorage.setItem("tasks", JSON.stringify(allTasks)); //update this line
        }
      }
    });
  });
}

The line localStorage.setItem("tasks",JSON.stringify(allTasks); will ensure that the current state of tasks is updated after a task is updated.
To remove a task from local Storage, create a deleteTask()function and add the code below;



function deleteTask(id) {
  const taskIdIndex = allTasks.findIndex(
    (task) => task.id.toString() === id
  );
  if (taskIdIndex !== -1) {
    allTasks.splice(taskIdIndex, 1);
    localStorage.setItem("tasks", JSON.stringify(allTasks));
  }
}

In the deleteTask() function above, we use the id of a task to check if it exists in the allTasks array. If found, we use the splice() method to remove the task from the allTasks array.

Update the removeTasks() function as follows:



function removeTask() {
  deleteBtn = document.querySelectorAll(".delete-btn");
  deleteBtn.forEach((element) => {
    element.addEventListener("click", function (e) {
      const liElement = this.closest("li");
      console.log(this);

      const taskId = liElement.getAttribute("data-id");
      liElement.remove();
      deleteTask(taskId); //add this line 

    });
  });
}

The final thing to do is to show the user a message if they have no pending tasks:



function updateMessage() {
  if (ulElement.children.length === 0) {
    message.innerHTML = "You are all caught up";
  } else {
    message.innerHTML = "";
  }
}

Now we have a fully functioning to-do application. You can find the final demo on Codepen. If you have any questions leave them in the comment section.

Subscribe to the Practical JavaScript newsletter and Learn JavaScript by building projects.

Mastering the map() Method in JavaScript: A Practical Application.

vaatiesther — Tue, 27 Feb 2024 09:57:37 +0000

In this short tutorial, we will learn how the map()method works and we will use it to map an array of products to produce a grid like this:

The map()method is one of JavaScript's most commonly used methods. When applied to an array, the map() method will apply a callback function to every element in the array.

The syntax for the map() function looks like this:

Array.map(function(element, index,array){
    // return something
)

The callback function takes the following parameters:

element: the current element being worked on.
index: the index of the current element . (this parameter is optional)
array- the array the map() method is being applied to .(this parameter is optional)

Let’s start with a simple example: suppose you have a list of names, and you want to capitalize all the names.

const names = ['antonio','melvin','sarah', 'john']

Using the map() method, let's first define the function which will take each element as a parameter and return a capitalized name.

function capitalize(name){
     return name.toUpperCase()
  }

toUppercase() is a built-in JavaScript String method used to convert strings to uppercase.

Once we have defined the function, we will assign the result to a variable and then use the map() function to apply the capitalize function to each element of the names array.

const capitalizedNames = names.map(capitalize )
console.log(capitalizedNames)

Rather than defining the callback function separately, you can combine everything and make your code more readable.

const capitalizedNames = names.map(function(name,index, array){
            console.log(index)
            console.log(array)
            return name.toUpperCase()
        })
console.log(capitalizedNames)

The output will look like this,

As you can see, even though we are not using the index and the array parameters, we still have access to them and can use them if we want to. If you are not using the index or the array, you can omit them from the code.

The syntax will be even shorter if you use an arrow function.

const capitalizedNames = names.map((name) =>name.toUpperCase())

Practical Example

Let’s look at a practical example that you can apply to your projects. Suppose we have an array of products, as shown below.

let products = [
  {
    id: 1,
    description: "Cocktail Juice",
    price: 10.99,
    imageSrc: "https://source.unsplash.com/yIE7pZUmT_s"
  },
  {
    id: 2,
    description: "Pomegranate  juice",
    price: 20.49,
    imageSrc: "https://source.unsplash.com/IKaFDABbfFY"
  },
  {
    id: 3,
    description: "Passion Juice",
    price: 15.79,
    imageSrc: "https://source.unsplash.com/KUT4HK3-Z5s"
  },
  {
    id: 3,
    description: "Mixed Juice",
    price: 15.79,
    imageSrc: "https://source.unsplash.com/ktMU5IS407s"
  }
];

The array contains objects representing product properties and values. Each product has an ID, title, price, and image source.

We are tasked to display the products on a web page in a grid-like format.

Create a products div as shown below in your index.html page.

<div class="products">
   <div class="card">
      <img src="https://source.unsplash.com/yIE7pZUmT_s" alt="" />
      <p>Cocktail Juice</p>
      <span>$ 20.50</span>
   </div>  
</div>

We will dynamically replace all the contents of the card with JavaScript.

Next, lets select the DOM element with the class name products.

const productsCard = document.querySelector(".products");

Next, we want to iterate through the array of products and, for each product, generate a card containing all the product details.

const productList = products
        .map((product,index) => {

          return `<div class="card">
            <img src="${product.imageSrc}" 
                  data-id = ${product.id}     
                  alt="${product.description}">
            <p>${product.description}</p>
            <span> $ ${product.price}</span></div>`;
        })
        .join("");

Lastly, we will append the generated HTML to the products container.

productsCard.innerHTML = `${productList}`;

Here is the final result.

Check out the final demo on Code pen. You can fork it and make improvements.

Summary

The next time you reach for a for loop to iterate over an array, consider whether the map() method might offer a more efficient and elegant solution. Using themap() method:

leads to more concise code,
encourages a functional programming style.
Enhances code readability

Thanks for reading

The best way to master JavaScript is by building projects. Subscribe to the Practical JavaScript Newsletter and level up your JavaScript skills.

How to Build a Weather App with HTML,CSS and Vanilla JavaScript

vaatiesther — Mon, 26 Feb 2024 06:33:59 +0000

The best way to learn JavaScript or any other programming language is by doing. In this tutorial, we will create a fully functioning weather app, and it will look like this:

HTML Structure

When building any project, it’s essential to have the design of how you want it to look. The HTML structure will look like this

<body>
    <div class="container">
      <div class="date">

        <p>Wednesday, 21st Feb 2024</p>
      </div>
      <div class="location">
        <input type="text" placeholder="Enter city" />
        <button class="fa-solid fa-magnifying-glass"></button>
      </div>

      <section class="weather hidden">
        <img src="" alt="" />
        <span class="cityName">Rome</span>
        <span class="description">clear clouds</span>
        <span class="temp">23°C</span>

      </section>

      <section class="weather-details hidden">
        <div class="wind">
          <p>Wind</p>
          <i class="fa-solid fa-wind"></i>
          <p class="speed">6.17</p>
        </div>
        <div class="humidity">
          <p>Humidity</p>
          <i class="fa-solid fa-droplet"></i>
          <p id="humidity">40</p>
        </div>
        <div class="feeling">
          <p>Feels</p>
          <i class="fa-solid fa-temperature-three-quarters"></i>
          <p id="feeeling">30°C</p>
        </div>
      </div>
    </section>

We will replace the data dynamically with Javascript.

Styling with CSS

And here are the CSS styles:

  body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #06283d;
      }

      .container {
        position: relative;
        width: 450px;
        height: 750px;
        background: #f0f0f0;
        padding: 18px 12px;
        overflow: hidden;
        border-radius: 18px;
        font-family: "Roboto", sans-serif;
        transition: 0.6s ease-out;
        border-radius: 30px;
      }

      .date {
        padding: 20px 32px;
        text-align: center;
      }
      .location {
        padding: 20px 32px;

        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .location input {
        /* color: #e26010; */
        width: 80%;
        background-color: #f0f0f0;
        font-size: 20px;
        font-weight: 500;
        margin-left: 22px;
      }
      .location button {
        cursor: pointer;
        width: 40px;
        height: 40px;
        color: #e35519;
        background: #e8dad1;
        border-radius: 50%;
        font-size: 22px;
        transition: 0.4s ease;
      }
      .weather {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
      }
      .weather img {
        width: 50%;
      }
      .weather span{
        font-size: 24px;
        font-weight: 500;
      }

      .weather-details {
        background: #fff;
        border-radius: 40px;
        padding: 20px 32px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
       .wind,
      .humidity,
      .feeeling {
        padding: 10px 22px;
      }

      .weather-details .wind p,
      .weather-details .humidity p,
      .weather-details .feeling p {
        margin: 8px 0;
      }

      .humidity i {
        color: rgb(73, 73, 220);
      }
      #feeeling i {
        color: orange;
      }

      .hidden {
        visibility: hidden;
      }

Things to Note

The section with the class weather will display the general weather, like the city name, weather description, and current temperature.

The weather-details section will display the rest of the weather details. Both sections have the class hidden and will be hidden by default.

.hidden {
visibility: hidden;
}

Once we get the Weather from the open weather API, we will use JavaScript to change the visibility of the sections.

Open Weather API

The Open Weather API is an organization that allows developers to get real-time data about the weather all over the world. To get the weather data, we need an API key. An API KEY is a secret key allowing us to authenticate ourselves when we request the data. Head to the Open weather API page and sign up for free to obtain your API Key.

There are multiple ways to get the weather data; you can use latitude and longitudes. However, the open weather provides a simple request that uses the city name as a parameter.

https://api.openweathermap.org/data/2.5/weather?q={city}&appid={APIKEY}

The only thing required of you is to replace city with the city you want the weather for and APIKEY with your APIKEY. For exmplee, the endpoint for getting the weather in rome will look like this:

https://api.openweathermap.org/data/2.5/weather?q=rome&appid=04419024fb0f20edd3f1abd06e46dd6d

If you paste this link on your browser, you will get this data

From this data, we are in a position to extract the weather information.

JavaScript Functionality

Next, make a GET request to this endpoint using the fetch method to get the weather for the city provided by the user. In your JavaScript file, create a variable called currentDate and use the new Date constructor to get the current Date.

const currentDate = new Date();

Display the current date at the top of the page.

const currentDate = document.querySelector(".date p");
currentDate.textContent = date
        .toString()
        .split(" ")
        .slice(0, 4)
        .join(" ");

Next, select all the DOM elements that will be updated dynamically with JavaScript.

const currentDate = document.querySelector(".date p");
const searchButton = document.querySelector(".location button");
const weatherDetails = document.querySelector(".weather-details");
const weather = document.querySelector(".weather");
const image = document.querySelector(".weather img");

Add an event listener to the search button. This event listener will listen for a click event.

searchButton.addEventListener("click", function () {
}

Inside the function, we want to get the city name value from the input, perform a request using the fetch method, and print the data to the console.

const BASE_URL = ` https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKEY}`;
console.log(BASE_URL);
fetch(BASE_URL)
.then((resp) => resp.json())
.then((data) => {
console.log(data);
});

Logging the data is also essential to ensure the fetch request performs as expected.

As you can see, the request was successful. Next, we will create an if statement that will extract data from the weather if cod ===200, 200 means a successful response, we will then display the appropriate weather icon.

The data will be contained in the first Array of the weather key

data.weather[0].main
data.weather[0].icon
data.weather[0].description

searchButton.addEventListener("click", function () {
  const city = document.querySelector(".location input").value;
  const APIKEY = "04419024fb0f20edd3f1abd06e46dd6d";
  const BASE_URL = ` https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKEY}`;

  fetch(BASE_URL)
    .then((resp) => resp.json())
    .then((data) => {
      if (data.cod === 200) {

        const iconUrl = `http://openweathermap.org/img/wn/${data.weather[0].icon}.png`;
        image.src =iconUrl; 

        const description = document.querySelector(".description");
        const temp = document.querySelector(".temp");
        const cityName = document.querySelector(".cityName");
        cityName.textContent = data.name;
        description.textContent = data.weather[0].description;
        const roundedCelsius = Math.round(data.main.temp / 18.14);
        temp.textContent = `${roundedCelsius}°C `;
        weather.style.visibility = "visible";

      }
    });
});

Let’s Summarise the code above.

The open weather API data comes with an icon code for each weather, which looks like this:

"weather": [
 {
 "id": 500,
 "main":"Rain",
 "description": "light rain",
 "icon": "10n"
 }
 ],

We have extracted the icon from the data and used it to construct the URL for the weather icon image.

Outside of the if statement, we are updating the city name, weather description, and the current temperature. Finally, we are setting the visibility of the element with the class weather to be visible. Now, if you search any city, you will get the following information.

The final step is to display

Wind
Pressure
Feels like

Get the DOM elements:

const windSpeed = document.querySelector(".speed");
const humidity = document.getElementById("humidity");


const feeeling = document.getElementById("feeeling");

Update the text content and change the visibility of the weather details element.


windSpeed.textContent = `{data.wind.speed}m/s`;
humidity.textContent = `${data.main["humidity"]}%`;
feeeling.textContent = `${Math.round(data.main["feels_like"]/18.14)} °C`;
weatherDetails.style.visibility = "visible";
weather.style.visibility = "visible";

Conclusion

Here is the Codepen. You can fork it and update the features of the weather app.

Subscribe to my Practical JavaScript Substack and master JavaScript by building projects, along with other talented developers who read it weekly.

Classes & Object-Oriented Programming in Python

vaatiesther — Mon, 24 Jul 2023 09:58:25 +0000

Object-Oriented programming is a programming paradigm that allows you to create programs based on classes and objects. Look at the following code,

What is a Python class?

A python class is similar to a function but it uses the class keyword. The syntax for a class looks like this:

class Person:
    '''This is a class named  person'''
    pass

When naming classes, always follow PEP 8 style guide, which says that class names should be capitalized like this:

class ClassName:
    pass

What is an Object in Python

Everything in python is an object. Since everything is an object, we can create an object from classes, a process known as instantiating.

house = Person()

Note the additional parenthesis at the end. You will get the following output if you print type(house):

<class '__main__.Person'>

Class Variables

A class will have variables as well. Variables are like attributes and are shared by all instances. For example, suppose the person class has a variable name, as shown below:

class Person:
    '''This is a class named  person'''
    name = 'Joe doe'

Every instance of the Person class will have the name i.e Joe doe as shown below:

person1 = Person.name
person2 = Person.name
print(person1)
print(person2)

The output will be:

Joe doe
Joe doe

Class Methods

Classes can also have methods and are defined inside the class. For example, a person can drive a car; let’s define a method in the Person class.

class Person:
    '''This is a class named  person'''
    name = 'Joe doe'

    def can_drive(self):
        print('{} can drive all types of vehicles'.format(self.name))

person1 = Person()
print(person1.can_drive())

In the code above, we define a method that returns a string and then calls the method on a Person instance. Convention requires that the first argument in class methods be self. Here self refers to the object
The output will be:

Joe doe can drive all types of vehicles

You can also add arguments to the class methods in addition to the self-argument. Let’s add another method with some arguments to our person class.

class Person:
    '''This is a class named  person'''
    name = 'Joe doe'

    def can_drive(self):
        print('{} can drive all types of vehicles'.format(self.name))

    def calculate_bmi(self, weight, height):
        return weight/height

In the code above, we add a method calculate_bmi which takes two additional arguments, weight and height, and returns the BMI, which is weight divided by height.

Now when you call the method, you need to pass in values to the method, as shown below:

person1 = Person()
print(person1.calculate_bmi(62,161))

The output will be:

0.38509316770186336

Dunder methods

Dunder methods are methods that are represented by double_underscore on either side, and they include:

__init__()
__str__()
__repr__()

The init() method initializes a new object. It is also known as a constructor and is defined as follows:

class Person:
   def __init__(self)
        pass

If you defined any arguments in the init() method, they would be available every time the class is instantiated.

class Person:
    def __init__(self, name):
        print('{} belongs to the VIP class'.format(name))

Let's instantiate a person object:

person_vip = Person('john')
print(person_vip)

We will get the following output:

john belongs to the VIP class
<__main__.Person object at 0x7f87129324f0>

__repr__() is another dunder method used to give a more meaningful representation of a class. The __repr__ () method usually returns a string. Let’s say you want to get information about the Person class below

class Person:
    def __init__(self, name):
        self.name = name
person = Person('John')
print(person)

The output of the code above will be:

<__main__.Person object at 0x7fb0b38642e0>

This doesn’t give any meaningful information about the class. Let’s add a __repr__() method to the class Person above.

class Person:
    def __init__(self, name):
        self.name = name
    def __repr__(self):
        return self.name


person = Person('John')
print(person)

The output will be:

John

Object-Oriented Programming

The four pillars of object-oriented programming (OOP) are:

Inheritance
Polymorphism
Abstraction
Encapsulation

Inheritance

Inheritance is a concept where classes inherit the properties of another class. Suppose we wanted to create a database of all the people in a school. A school can have students, teachers, non-teaching staff, etc. We would then create different classes for the category, as shown below.

class Student:
    pass
class Teacher:
    pass

Suppose we wanted to create a method contact which is shared by all which returns the contact details.

class Student:
    pass
class Teacher:
    pass

Rather than writing the same method in both classes, we can create a parent class, define all the methods that the two classes share, and then use inheritance to inherit the methods. here is how the parent class would look like.

class Person: 
  def contact(self): 
    print("print contact details")

The student and Teacher classes now automatically inherit the properties of the Person class, as shown below.


class Person: 
  def contact(self): 
    print("print contact details")

class Student(Person):
    pass

class Teacher(Person):
    pass

If we instantiate a student and teacher object, we will discover that the classes have inherited the contact method.

student1 = Student()
teacher1 = Teacher()
print(student1.contact())
print(teacher1.contact())

The output will be:

print contact details
None
print contact details
None

Polymorphism

Polymorphism is another pillar of Object-Oriented programming where a method is applied to different objects. Suppose you have an Animal class that defines a method called is_branded, as shown below

class Animal():
    def is_branded(self):
       print("This animal is branded")

Another class can have the same method i.e, is_branded which returns something different as shown below

class Product():
    def is_branded(self):
       print("This product is branded")

The two classes above, i.e., Product and Animal, have no relationship but share a common method which means something different when applied to each class. This concept is called polymorphism

Abstraction

Abstraction is another pillar of OOP. To abstract means to hide. Abstraction refers to the process in which programs hide the underlying functionality and can be used without the need to know what is happening behind the scenes

For instance, consider the example we use above.

class Person: 
  def contact(self): 
    print("print contact details")

class Student(Person):
    pass

class Teacher(Person):
    pass

To make the Person class an abstract, it will inherit from Abstract Base Class(ABC), then apply the abstract method to the contact() method as shown below.

from abc import ABC,abstractmethod
class Person(ABC): 

  @abstractmethod
  def contact(self): 
    print("print contact details")

class Student(Person):
    pass

class Teacher(Person):
    pass

student1 = Student()
teacher1 = Teacher()

Now the animal class cannot be instantiated. Let's instantiate it to see the result.

student1 = Student()
TypeError: Can't instantiate abstract class Student with abstract method contact

To make the error go away, we have to add the contact() method to the student and Teacher class as shown below.

from abc import ABC, abstractmethod
class Person(ABC): 

  @abstractmethod
  def contact(self): 
    print("print contact details")

class Student(Person):
    def contact(self): 
        print("print student contact details")

class Teacher(Person):
    def contact(self): 
        print("print teacher contact details")

Encapsulation

Encapsulation is the act of enclosing data; you can only use the data in the enclosed unit. While other programming languages perform encapsulation with public, protected, and private methods, Python doesn’t have the same. In Python, we prefix the variable with a single underscore if you need to define a private variable.

class Person:
    def __init__(self):
        self.__name = 'john doe'

For a protected variable, you prefix with a single underscore.

class Person:
    def __init__(self):
        self._name = 'john doe'

Conclusion
This tutorial has covered how to write Python classes from scratch, and how to define methods and object-oriented programming in Python. These are the fundamental concepts will make you a great programmer.

DEV Community: vaatiesther

LegalMindAI – Your AI-Powered Legal Document Hub

LegalMind AI – Auth0 AI Agents Challenge Submission

What I Built

Problems It Solves

Demo

1. Homepage

2. User Login

3. Uploading a Document

4. Viewing My Documents

5. Making a Document Public

6. AI-Powered Chat

7. Audit Logs

8. Share Documents

9. Audit Logs

10. Summary of Features Demonstrated

How I Used Auth0 for AI Agents

Key Lessons and Challenges

Takeaways

Test Users

How to Manage Multiple promises concurrently with Promise.all()

What is a Promise

Enhancing Asynchronous Operations with Promise.all()

Practical Examples

1.Fetching Data from multiple API’s

3. Reading and Processing multiple files concurrently.

Summary

Level Up Your JavaScript

How to Build a Weather App in React

Development Environment

Building the Interface

Styling with CSS

Get Real-Time Weather Data

Store Weather Data using State

Fetch Data with the useEffect Hook

Get and Display the Weather Forecast in React

Get custom Weather Information

Get Weather Data when the Form is Submitted

Error Handling

Conclusion

Getting Started with React: A Beginner's Complete Guide

What is React?

💡Why React

💡Getting Started with React

Step1: Set up Your HTML File

What is CreateElement

Create and Render an Element

Adding Properties.

Nesting Elements

What is JSX

Setting up a React environment

Recommended Tools for React Development:

Start a New React Project with Create-react app

Application Structure

JSX Expressions

What is jsx Fragment

Components

Create Your First Component

Styling in React

Props

Destructuring Props

List Items

Iterating with the Map() Method

Conditional Rendering

Other examples of Conditional Rendering

JSX Tags must be Closed

JSX Attributes must use CamelCase

Conditionals in JSX

State Management in React

Use the State in JSX

State management in Forms

How State Works in Forms

Lifting State in React

Managing Side Effects with the useEffect Hook

API Requests

The dependency array

Local Storage

Conclusion

How to Build a Pomodoro Timer in React

Prerequisites

Enhancing Asynchronous Operations with `Promise.all()`