btholt / citr-v6-project Goto Github PK

Hello
JSX from the Core React Components class doesn't work, followed all the steps correctly. But the code with JSX doesn't work, I get the server running but only HTML is printed out. no CSS or logo etc is visible on the page.
I also got an error for index.html and it suggested to add type="module" to script tag

But doing that also it doesn't work

Update - looks like babel doesn't seem to be working in chrome on mac, as my code works in Safari but doesn't properly on chrome

I get this error in the devtools console:
GET http://pets-images.dev-apis.com/pets/bird2.jpg net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
No pictures are displaying.
Example of one error as seen in the devtools/network:

Request URL: http://pets-images.dev-apis.com/pets/dog25.jpg
Referrer Policy: strict-origin-when-cross-origin
Content-Length: 23166
Content-MD5: ZZ42lZn3Giau/oYSVTnmcA==
Content-Type: image/jpeg
Date: Mon, 20 Sep 2021 16:42:08 GMT
ETag: 0x8D8DB6341F385A3
Last-Modified: Sat, 27 Feb 2021 21:04:22 GMT
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0
not-setcross-origin-resource-policy
To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:
Cross-Origin-Resource-Policy: same-siteChoose this option if the resource and the document are served from the same site.
Cross-Origin-Resource-Policy: cross-originOnly choose this option if an arbitrary website including this resource does not impose a security risk.
Learn more in the issues tab
x-ms-blob-type: BlockBlob
x-ms-lease-status: unlocked
x-ms-request-id: a0463c6b-501e-0048-0b3e-aef542000000
x-ms-version: 2009-09-19
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9,nb;q=0.8,fr;q=0.7
Connection: keep-alive
Host: pets-images.dev-apis.com
Referer: http://localhost:1234/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

I keep getting the following error when I try to enable @babel/plugin-proposal-class-properties in my .babelrc and @babel/eslint-parser in my .eslintrc.json.

Parsing error: No Babel config file detected for .../React-intro/src/Details.jsx. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint.

I've tried adding requireConfigFile: false to my eslintrc.json but then eslint can't find my .babelrc. Both files are in the root directory of my project. Cant figure out what im doing wrong. I've confirmed that my .eslintrc.json, .babelrc, and package.json are identical to the ones in 09-managing-state-in-class-components. I'm just going to ignore the error to get through the course as everything still works, but any help on what I might be doing wrong would be greatly appreciated.

My .eslintrc.json:

{
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:react-hooks/recommended",
        "prettier"
    ],
    "rules": {
        "react/prop-types": 0,
        "react/react-in-jsx-scope": 0
    },
    "parser": "@babel/eslint-parser",
    "plugins": [
        "react",
        "import",
        "jsx-a11y"
    ],
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

My .babelrc:

{
    "presets": [
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ],
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

My package.json:

{
  "name": "adopt-me",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "7.12.16",
    "@babel/eslint-parser": "7.13.4",
    "@babel/plugin-proposal-class-properties": "7.13.0",
    "@babel/preset-env": "7.13.5",
    "@babel/preset-react": "7.12.13",
    "eslint": "7.18.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "parcel": "1.12.3",
    "prettier": "2.2.1"
  },
  "dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-router-dom": "5.2.0"
  },
  "browserslist": [
    "last 2 Chrome versions"
  ]
}

If you create a context that consists of an array with two elements:

but then try to set the context with a default value of a single string:

it fails. At least I'm not currently able to get this specific code to work. If I'm missing something, please lmk.

6:16:44 PM: $ npm run build
6:16:44 PM: > [email protected] build /opt/build/repo
6:16:44 PM: > NODE_ENV=production parcel build src/index.html
6:17:03 PM: 🚨 /opt/build/repo/src/App.js:5:20: Cannot resolve dependency './Details' at '/opt/build/repo/src/Details'
6:17:03 PM: 3 | import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
6:17:03 PM: 4 | import SearchParams from "./SearchParams";
6:17:03 PM: > 5 | import Details from "./Details";
6:17:03 PM: | ^
6:17:03 PM: 6 | import Menu from "./Menu";
6:17:03 PM: 7 | import Home from "./Home";
6:17:03 PM: 8 | import About from "./About";
6:17:04 PM: npm ERR! code ELIFECYCLE

And, it is perfectly fine to build on local environment. Appreciate any tips why got an build error on Netlify.

In the Project Adopt Me part of Complete Intro to React v6, The API is served at HTTP while the site is loaded as HTTPS while deploying at FIREBASE or GITHUB Pages, so the browser blocks the request.

The code in the 10-error-boundaries checkpoint does not seem to work as expected since the <h2> tag with the link back to home is never rendered when hitting a path like http://localhost:1234/details/thisShouldShowTheFallbackPage. I tried console.log()'ing through the different parts of the component and am seeing that only render() is entered and this.props.children is returned immediately which results in a page with the None.jpg image and an ugly undefined-filled details page:

<h2>undefined — undefined — undefined, undefined</h2>
<button>Adopt </button>

// mostly code from reactjs.org/docs/error-boundaries.html
import { Component } from "react";
import { Link, Redirect } from "react-router-dom";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    console.log("getDerivedStateFromError"); //Never logged
    return { hasError: true, redirect: false };
  }
  componentDidCatch(error, info) {
    console.log("componentDidCatch");  //Never logged
    console.error("ErrorBoundary caught an error", error, info);
  }
  componentDidUpdate() {
    console.log("componentDidUpdate");  //Never logged
    if (this.state.hasError) {
      setTimeout(() => this.setState({ redirect: true }), 5000);
    }
  }

  render() {
    console.log("render"); //Logged
    if (this.state.redirect) {
      console.log("redirect"); //Never logged
      return <Redirect to="/" />;
    } else if (this.state.hasError) {
      console.log("hasError");  //Never logged
      return (
        <h2>
          There was an error with this listing. <Link to="/">Click here</Link>{" "}
          to back to the home page or wait five seconds.
        </h2>
      );
    }
    console.log("this.props.children"); //Logged
    return this.props.children;
  }
}

export default ErrorBoundary;

Reappear: visit http://localhost:3000/details/1 directly
Error: markup from server is App.js, not Details, and css、js path is not correct (wrongly prepend /detail )

Firstly please forgive my React ignorance

I am following the course and have come to the hooks section where we create a select for the animals, I have the Array of animals and the select within the animal label, where the entries are mapped to an option.

When I run the code using npm run dev I am seeing that I can only ever select the first entry in the array to empty string. I am sure I have done something wrong but after hours of looking I'm not sure what it is.

I have included the code I have in the hope it will be a "Oh you haven't done that!" moment.

Thanks for the course I am enjoying it 👍

import { useState } from "react";

const ANIMALS = ["bird", "cat", "dog", "rabbit", "reptile"];

const SearchParams = () => {
  const [location, setlocation] = useState("London");
  const [animal, setAnimal] = useState("");

  return (
    <div className="search-params">
      <form>
        <label htmlFor="location">
          Location
          <input
            id="location"
            onChange={(e) => setlocation(e.target.value)}
            value={location}
            placeholder="Location"
          />
        </label>
        <label htmlFor="animal">
          Animal
          <select
            id="animal"
            value={animal}
            onChange={(e) => setAnimal(e.target.value)}
            onBlur={(e) => setAnimal(e.target.value)}
          >
            <option />
            {ANIMALS.map((animal) => (
              <option value="animal" key={animal}>
                {animal}
              </option>
            ))}
          </select>
        </label>
        <button>Submit</button>
      </form>
    </div>
  );
};

export default SearchParams;

This error is there when I try to showModal using Modal.js
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at Modal.js:13

09-managing-state-in-class-components/src/App.js without import { StrictMode } from "react"; ?

The "Modal.js" file's code showing an error on running, saying "ErrorBoundary caught an error TypeError: Cannot read property 'appendChild' of null" please lmk what the problem is.