React Native

 youtube: Codevolution,

Expo CLI vs React Native CLI

---

youtube:Programming with Mosh
VS Code plugins: React Native Tools, React-Native/React/Redux, Prettier,Material Icon Theme
Settings: formatonsave

npm i -g expo-cli

(old?) expo init projectTitle

(npx create-expo-app --template)

npx expo run:android
https://docs.expo.dev/workflow/android-studio-emulator/#set-up-android-studio
expo init test1
npx expo run:android
./gradlew assembleDebug ? https://docs.expo.dev/workflow/android-studio-emulator/#set-up-android-studio

---

npx create-expo-app@latest npm run reset-project

npx create-expo-app app2 --template blank npm start rm -rf node_modules npm install npx expo start -c

React forms

Working with form data in React can be approached in several ways, depending on the complexity of the form and the specific requirements of your application. Here are some common methods:

1. Controlled Components

In controlled components, form data is handled by the React component’s state. This is the most common method for managing form data in React.

Example

jsx
import React, { useState } from 'react';

const ControlledForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

2. Uncontrolled Components with Refs

Uncontrolled components store form data in the DOM itself and use refs to access the data. This approach is useful for simple forms or when integrating with non-React libraries.

Example

jsx
import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({
      name: nameRef.current.value,
      email: emailRef.current.value,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" ref={nameRef} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" ref={emailRef} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

3. Using Form Libraries

Form libraries like Formik and React Hook Form can simplify form management by handling validation, state, and submission more efficiently.

Formik Example

jsx
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupForm = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={Yup.object({
        name: Yup.string().required('Required'),
        email: Yup.string().email('Invalid email address').required('Required'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
      }}
    >
      <Form>
        <div>
          <label htmlFor="name">Name:</label>
          <Field name="name" type="text" />
          <ErrorMessage name="name" component="div" />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <Field name="email" type="email" />
          <ErrorMessage name="email" component="div" />
        </div>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default SignupForm;

React Hook Form Example

jsx
import React from 'react';
import { useForm } from 'react-hook-form';

const HookForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name', { required: 'Name is required' })} />
        {errors.name && <span>{errors.name.message}</span>}
      </div>
      <div>
        <label>Email:</label>
        <input {...register('email', { required: 'Email is required', pattern: { value: /^\S+@\S+$/i, message: 'Invalid email address' } })} />
        {errors.email && <span>{errors.email.message}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default HookForm;

4. Custom Hooks

For more complex forms, you can create custom hooks to manage form state and validation logic.

Example

jsx
import React, { useState } from 'react';

const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  };

  const resetForm = () => {
    setValues(initialValues);
  };

  return [values, handleChange, resetForm];
};

const CustomHookForm = () => {
  const [formData, handleChange, resetForm] = useForm({ name: '', email: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
    resetForm();
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default CustomHookForm;

Summary

• Controlled Components: Use when you want React to manage form state.
• Uncontrolled Components: Use when you prefer to keep form data in the DOM and access it with refs.
• Form Libraries (Formik, React Hook Form): Use for complex forms that require robust validation and state management.
• Custom Hooks: Use for custom form logic and state management.

React hooks

 

useMemo

useMemo is a hook that memoizes the result of a function, caching its return value to optimize performance. It recalculates the memoized value only when one of its dependencies has changed.

Use Cases

• Performance Optimization: When you have expensive calculations that you don’t want to run on every render.
• Pure Functions: Memoize the results of pure functions that return the same output for the same inputs.

Syntax

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Example

import React, { useMemo, useState } from 'react';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const expensiveComputation = (num) => {
    console.log('Running expensive computation...');
    return num * 2;
  };

  const memoizedResult = useMemo(() => expensiveComputation(count), [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <h2>Memoized Result: {memoizedResult}</h2>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
    </div>
  );
};

export default ExampleComponent;

In this example, expensiveComputation will only run when count changes, not when text changes.

useEffect

useEffect is a hook that allows you to perform side effects in function components. It runs after the render and can run again when its dependencies change.

Use Cases

• Data Fetching: Fetching data from an API when the component mounts.
• Subscriptions: Setting up and cleaning up subscriptions.
• DOM Manipulations: Directly manipulating the DOM after render.
• Side Effects: Any other side effects that are not pure computations, such as logging.

Syntax

useEffect(() => {
  // Effect logic
  return () => {
    // Cleanup logic (optional)
  };
}, [dependencies]);

Example

import React, { useEffect, useState } from 'react';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component mounted or count changed');
    return () => {
      console.log('Cleanup if count changes or component unmounts');
    };
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;

In this example, the effect runs when the component mounts and whenever count changes. The cleanup function runs before the effect runs next time and when the component unmounts.

useCallback

useCallback is a hook that returns a memoized version of the callback function that only changes if one of its dependencies has changed. It's particularly useful to avoid unnecessary re-renders by preventing functions from being recreated on every render.

Use Cases

• Passing Callbacks to Child Components: When you pass a callback to a child component that depends on props or state, using useCallback ensures that the function reference remains the same unless dependencies change.
• Optimizing Performance: It can be used to optimize performance in scenarios where functions are recreated unnecessarily, causing unwanted renders.

Syntax

const memoizedCallback = useCallback(() => {
  // Callback logic
}, [dependencies]);

Example

import React, { useState, useCallback } from 'react';

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click me</button>;
});

const ExampleComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type something..."
      />
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

export default ExampleComponent;

In this example, handleClick will only be recreated if its dependencies change. This prevents ChildComponent from re-rendering unnecessarily.

Key Differences

1. Purpose:

   • useMemo: Memoizes a value to optimize performance.
   • useCallback: Memoizes a function to avoid unnecessary re-renders.
   • useEffect: Manages side effects in a component.

2. Timing:

   • useMemo: Runs during render.
   • useCallback: Runs during render, but memoizes the function reference.
   • useEffect: Runs after the render.

3. Usage:

   • useMemo: Use when you have an expensive calculation that should not re-run on every render unless dependencies change.
   • useCallback: Use when you have a function that you don't want to be recreated on every render unless dependencies change.
   • useEffect: Use for side effects like data fetching, subscriptions, or any code that should run after the component has rendered.

When to Use Each

• Use useMemo when you have computationally expensive operations and you want to memoize the result to avoid re-computation on every render.
• Use useEffect when you need to perform side effects such as data fetching, updating the DOM, or subscribing to services.
• Use useCallback when you need to memoize a function to prevent it from being recreated unnecessarily, especially when passing it as a prop to child components.

By understanding the distinct roles of these hooks and applying them appropriately, you can optimize your React applications for both performance and functionality

React

• vite
• next.js

Example with Vite:

npm create vite@latest

================================

npm install -g create-react-app

npx create-react-app file-upload-app cd file-upload-app npm start

maxschwarzmueller https://github.com/academind/react-complete-guide-course-resources

PizzaStore: CartContext Modal Button

TicTacToe

Investment Calc: 

Modal basic:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/07-adding-a-modal-cmp/src/components/ResultModal.jsx

Modal forwardRef:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/08%20Refs%20Portals/08-forwarding-refs/src/components/ResultModal.jsx

Section 8 Working with Refs and Portals

Demo project: Project Manager:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/09%20Practice%20Project%20-%20Project%20Management/10-finished/src/App.jsx

Demo project: Quiz app:

https://github.com/academind/react-complete-guide-course-resources/blob/main/code/13%20Demo%20Project%20-%20React%20Quiz/08-finished/src/App.jsx

Authentication: https://github.com/academind/react-complete-guide-course-resources/blob/main/code/22%20Authentication/09-finished/frontend/src/components/AuthForm.js

{data && data.errors && (

          <ul>

            {Object.values(data.errors).map((err) => (

              <li key={err}>{err}</li>

            ))}

          </ul>

        )}

https://github.com/jonasschmedtmann/ultimate-react-course

https://react.new/ - code sandbox

VS Code extentions: 

prettier, eslint, liveserver

Quokka - JavaScript and TypeScript playground in your editor.

1) we should never update the state in render logic

2) component will be re-rendered on:

-state change

-props change

-parent change

-

https://www.youtube.com/watch?v=i-hoSg8iRG0&t=231s 

https://github.com/facebook/create-react-app

npx create-react-app my-app
cd my-app
npm start

https://react-bootstrap.github.io/getting-started/introduction/

npm install react-bootstrap bootstrap

https://www.pexels.com/

const [items, setItems] = useState([]);

  function handleAddItems(item) {

    setItems((items) => [...items, item]);

  }

  function handleDeleteItem(id) {

    setItems((items) => items.filter((item) => item.id !== id));

  }

  function handleToggleItem(id) {

    setItems((items) =>

      items.map((item) =>

        item.id === id ? { ...item, packed: !item.packed } : item

      )

    );

  }

<PackingList

        items={items}

        onDeleteItem={handleDeleteItem}

        onToggleItem={handleToggleItem}

        onClearList={handleClearList}

      />

export default function PackingList({

  items,

  onDeleteItem,

  onToggleItem,

  onClearList,

}) {...}

      <button onClick={() => onDeleteItem(item.id)}>❌</button>

https://i.pravatar.cc/

https://i.pravatar.cc/200

https://i.pravatar.cc/200?u=499476

https://jsonplaceholder.typicode.com/

https://api.adviceslip.com/

https://api.adviceslip.com/advice/1

https://www.omdbapi.com/apikey.aspx

 const isWatched = watched.map((movie) => movie.imdbID).includes(selectedId);

  const watchedUserRating = watched.find(

    (movie) => movie.imdbID === selectedId

  )?.userRating;

 function handleDeleteWatched(id) {

    setWatched((watched) => watched.filter((movie) => movie.imdbID !== id));

  }

asdf

163  Initializing State With a Callback Lazy Initial State

localStorage.setItem("asdf",JSON.stringify(json));

const [asdf,setAsdf] = useEffect(function(){

return JSON.parse(localStorage.getItem("asdf");

});

localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));

// Function to update the object state
  const updateObject = () => {
    // Update the state by creating a new object with the updated values
    setMyObject({
      ...myObject, // Spread the current state
      key2: 'updatedValue' // Update the desired key/value pair
    });
  };

const countRef = useRef(0);

useEffect(function(){

countRef.current++;

})

function getWeatherIcon(wmoCode) {

  const icons = new Map([

    [[0], "☀️"],

    [[1], "🌤"],

    [[2], "⛅️"],

    [[3], "☁️"],

    [[45, 48], "🌫"],

    [[51, 56, 61, 66, 80], "🌦"],

    [[53, 55, 63, 65, 57, 67, 81, 82], "🌧"],

    [[71, 73, 75, 77, 85, 86], "🌨"],

    [[95], "🌩"],

    [[96, 99], "⛈"],

  ]);

  const arr = [...icons.keys()].find((key) => key.includes(wmoCode));

  if (!arr) return "NOT FOUND";

  return icons.get(arr);

}

js: <script src="..." type="module"></script>

export let apikey="asdf"

import {apikey, somekey as newkey} from './props.js"

import * as props from "./props.js"

console.log(props.apikey)

import "img" from "./img/some.png"

<p className={`label  ${ emailValid? 'valid' : 'invalid'}`}>email</p>

<p style={{color:'green', border:'solid'}}

import whateverName from './App.module.css'

<p className={whateverName.err}>Err</p>

className={`${whateverName.err}`}

const ChildComponent = forwardRef({ actual, ...otherProps },ref) => { return ( <div> {/* Pass other props to the input element */} <input {...otherProps} ref={ref} /> {/* You can use the "actual" prop here */} <p>Actual prop: {actual}</p> </div> ); });

npx create-next-app@13.4

npm run dev

npm run build #for prod

npm start

===============

npm create vite@latest

npm i(nstall) & npm run dev