Hooks

Giovanni García — Sun, 22 May 2022 21:15:28 +0000

One of the rules for using hooks is that you must use a hook inside a functional component.
Wege have to create a function that renders a component and then inside that function we can use hooks.

No colocar información anidad dentro de u state
No objetos dentro de otro objeto (anidados), ya que no se re-renderizará por React, así está diseñado

Custom Hooks

Checks if the user's device has a rear facing camera

Technique: Use the browser's getUserMedia API to check if facingMode='"environment", which means a camera exists that faces away from the user.

import { useEffect, useState } from "react";

/** Returns true if the user's device has a rear-facing camera */
export default function useHasRearFacingCamera() {
  const [hasRearFacingCamera, setHasRearFacingCamera] = useState<boolean | null>(null);
  useEffect(() => {
    const detectRearCamera = async () => {
      try {
        const hasRearCamera = await navigator.mediaDevices.getUserMedia({
          video: { facingMode: { exact: "environment" } },
        });
        if (hasRearCamera) {
          setHasRearFacingCamera(true);
        }
      } catch {
        setHasRearFacingCamera(false);
      }
    };
    detectRearCamera();
  }, []);
  return hasRearFacingCamera;
};

create-react-app

Giovanni García — Sun, 22 May 2022 21:14:12 +0000

CRA

Por como está configurado CRA, todo lo que esté dentro de la carpeta 'public', lo podremos acceder incluyendo en la ruta solo una diagonal:

<img src="/avatar.jpg" alt="Foto de Giovanni"></img>

https://create-react-app.dev/docs/getting-started

Iniciar react:

Instalar:
$ npx create-react-app my-app
$ my-app
$ npm start

$ react-scripts-start
$ react start

Dummy post

Giovanni García — Sun, 22 May 2022 21:07:51 +0000

Lorem ipsum...

DEV Community: Giovanni García

Hooks

create-react-app

Dummy post