Varför måste React finnas i scope när du använder JSX

JSX är praktisk att skriva, men den kräver något viktigt bakom kulisserna. När du får felmeddelandet "react måste vara i scope när du använder jsx" betyder det att React-biblioteket inte är importerat korrekt. JSX är egentligen syntaktisk socker som kompileras till JavaScript-funktionsanrop. Utan rätt import kan koden helt enkelt inte fungera.

Problemet beror på din React-version. Äldre versioner kräver en explicit import. Nyare versioner behöver den inte längre (vilket är rätt praktiskt, faktiskt). Låt oss fixa det nu.

Så åtgärdar du felet snabbt

Lösningen beror helt på vilken React-version ditt projekt använder.

För React före version 17: Du måste importera React överst i filen:

import React from 'react'

Många gör misstaget att skriva med liten r. Det fungerar inte:

// Felaktig import
import react from 'react'

React transformerar JSX till React.createElement() anrop. Därför måste React finnas i scope.

För React 17 och senare: Du behöver inte längre importera React för JSX. React-teamet ändrade detta för att göra koden renare och mindre rörig. Om ESLint klagar kan du stänga av regeln:

{
  "react/jsx-uses-react": "off",
  "react/react-in-jsx-scope": "off"
}

Uppdatera din ESLint-konfiguration i .eslintrc eller package.json. Då försvinner varningen direkt.

Tips för att undvika problemet framöver

Håll ett par enkla rutiner. Kontrollera alltid dina importer när du skapar nya filer. En snabb kontroll sparar massor av tid senare. Uppdatera dina verktyg regelbundet. Gamla versioner av Babel eller ESLint kan skapa konstiga problem som är svåra att debug.

Använd dot-notation när du arbetar med flera komponenter:

import React from 'react'

const Menu = {
  Button: function(props) {
    return {props.text}
  }
}

function App() {
  return 
}

Det här gör koden tydligare och minskar naming konflikter.

För dynamiska komponenter måste du tilldela dem till en kapitaliserad variabel först:

const  components = {
  photo: PhotoStory,
  video: VideoStory
}

function Story(props) {
  const SpecificStory = components[props.type]
  return 
}

JSX förväntar sig, att komponenter börjar med stor bokstav. Utan detta kan React inte se det som en komponent.

Dessa praktiska steg håller dina React filer organiserade och fria från import problem. Din editor hjälper dig ofta automatiskt, men att förstå varför regeln finns gör dig till en mycket bättre utvecklare på längre sikt.