Day2: Introduction to Frontend: React, Creating a Single Page App

React (library)

React.js, often referred to simply as React, is a popular open-source JavaScript library used for building user interfaces, particularly single-page applications where data can change over time without requiring a page reload. Developed and maintained by Facebook, React was first released in 2013.

Docs

• https://vitejs.dev/guide/
• React doc: https://react.dev/

Creating a react app:

npm create vite@latest

• name it client
• select React as a lib
• select javascript as language

cd client

npm install

npm run dev

Component in React:
In React, a component is a fundamental building block of a React application. Components are reusable, self-contained pieces of UI that can be combined to build complex interfaces. They allow developers to break down the UI into smaller, manageable pieces, each responsible for rendering a portion of the user interface and handling its logic and state.

State: A Component's Memory (Ref)
Components often need to change what’s on the screen as a result of an interaction. Typing into the form should update the input field, clicking “next” on an image carousel should change which image is displayed, clicking “buy” should put a product in the shopping cart. Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state.

Built-in React Hooks (Ref)
Hooks let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.

useState (Ref)
useState is a React Hook that lets you add a state variable to your component.

const [state, setState] = useState(initialState)

App.jsx

import { useEffect, useState } from "react"

function App() {
  let [title, setTitle] = useState('')
  let [content, setContent] = useState('')

  const setTitleHandler = (e) => {
    setTitle(e.target.value)
  }

  const setContentHandler = (e) => {
    setContent(e.target.value)
  }


  return (
    <>
      <div className="container">
        <div className="post">
          <h1>{title}</h1>
          <p>
            {content}
          </p>
          <button>
            Publish
          </button>
        </div>
        <div className="inputs">
          <input type="text" onChange={setTitleHandler} placeholder="title here" value={title}/>
          <br />
          <textarea name="" id="" onChange={setContentHandler} placeholder="content here" value={content}></textarea>
        </div>
      </div>
    </>
  )
}

export default App

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.post{
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 70%;
}

content:

In today's fast-paced world, the concept of mindfulness has garnered significant attention. Mindfulness, often defined as the practice of being present and fully engaged with the current moment, offers numerous benefits that are especially relevant in our hectic, distraction-filled lives. From reducing stress to enhancing overall well-being, mindfulness has become a crucial tool for navigating the complexities of modern life.

One of the primary benefits of mindfulness is its ability to reduce stress. Stress is an inevitable part of life, but chronic stress can lead to serious health problems, including heart disease, depression, and anxiety. Mindfulness helps individuals manage stress by encouraging a non-judgmental awareness of their thoughts and feelings. By acknowledging stress without becoming overwhelmed by it, people can develop healthier responses to stressful situations. Research has shown that regular mindfulness practice can lower cortisol levels, the hormone associated with stress, thereby promoting a more relaxed state of mind.

In addition to stress reduction, mindfulness can significantly improve mental health. It fosters a greater sense of self-awareness and emotional regulation, which are critical for maintaining mental well-being. By paying attention to the present moment, individuals can break free from the cycle of rumination and negative thinking that often exacerbates mental health issues. Mindfulness-based therapies, such as Mindfulness-Based Stress Reduction (MBSR) and Mindfulness-Based Cognitive Therapy (MBCT), have been proven effective in treating conditions like depression, anxiety, and post-traumatic stress disorder (PTSD).

useEffect (Doc)

useEffect(setup, dependencies?)

Let's assume this is my backend:
https://server.clickswarnendu123.workers.dev/day-1

  useEffect(() => {
    fetch("https://server.clickswarnendu123.workers.dev/day-1")
      .then(res => res.json())
      .then(data => {
        setTitle(data.title)
        setContent(data.content)
      })
  })

Sum Server: https://server.clickswarnendu123.workers.dev/sum/10/13

import { useEffect, useState } from "react"

function App() {
  let [a, setA] = useState(0)
  let [b, setB] = useState(0)
  let [sum, setSum] = useState(0)

  const handleAChange = (e) => {
    setA(e.target.value)
  }

  const handleBChange = (e) => {
    setB(e.target.value)
  }

  useEffect(() => {
    fetch("https://server.clickswarnendu123.workers.dev/sum/" + a + "/" + b)
      .then((res) => res.json())
      .then((data) => {
        setSum(data.sum)
      })
  }, [a, b])

  return (
    <>
      <h1>
        Sum is {sum}
      </h1>
      <br />
      a=<input type="text" value={a} onChange={handleAChange} />
      <br />
      b=<input type="text" value={b} onChange={handleBChange} />
    </>
  )
}

export default App

Dependency Array = [a, b]